/* Paleta SIMULADOR (azul-marinho tecnológico) */
:root{
  --bg:#080F18;--bg2:#0D1622;--head:#111C2A;--card:#162131;--card2:#101B29;--line:#26384D;
  --pri:#3FA9F5;--pri2:#62B5F7;--glow:#0099FF;--hov:#8BCBFF;--pri-ink:#04101C;
  --ink:#F2F6FA;--mut:#9DB5CE;--dim:#7189A3;
  --ok:#35D07F;--ok-bg:#0F2A21;--no:#FF5C6C;--no-bg:#2E1620;--warn:#F2C062;--warn-bg:#2B2410;
  --grad:linear-gradient(135deg,#3FA9F5,#0099FF);
  --glow-sm:0 0 20px rgba(0,153,255,.20);--glow-lg:0 0 30px rgba(0,153,255,.35);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.top{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line);padding:10px 16px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand{font-size:18px}.brand .cargo{font-size:12px;color:var(--mut);margin-left:6px}
nav{display:flex;gap:4px}
nav button{background:none;border:0;color:var(--mut);padding:8px 12px;border-radius:8px;font:inherit;font-size:14px;cursor:pointer}
nav button.on{background:var(--pri);color:var(--pri-ink)}
main{max-width:860px;margin:0 auto;padding:16px 16px 80px}
h1{font-size:22px;margin:8px 0 12px}h2{font-size:18px;margin:20px 0 8px}h3{font-size:15px;margin:0 0 6px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:12px 0}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}
.stat b{display:block;font-size:26px}.stat span{font-size:13px;color:var(--mut)}
.btn{display:inline-block;background:var(--pri);color:var(--pri-ink);border:0;border-radius:10px;padding:12px 18px;font:inherit;font-weight:600;cursor:pointer;min-height:44px}
.btn.sec{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.sm{padding:8px 12px;min-height:36px;font-size:14px}
.btn:disabled{opacity:.45;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sp{justify-content:space-between}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:14px;cursor:pointer;min-height:34px}
.chip.on{background:var(--pri);color:var(--pri-ink);border-color:var(--pri)}
select{font:inherit;padding:8px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);max-width:100%}
.tag{display:inline-block;font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:6px;padding:1px 8px;margin-right:6px}
.q{font-size:18px;margin:10px 0 16px}
.ce{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ce .btn{font-size:18px;padding:16px}
.ce .c{background:var(--ok)}.ce .e{background:var(--no)}
.ce .c,.ce .e{color:#fff}
.ce .on{outline:3px solid var(--ink)}
.fb{border-radius:10px;padding:12px;margin-top:14px}
.fb.ok{background:var(--ok-bg);border:1px solid var(--ok)}
.fb.no{background:var(--no-bg);border:1px solid var(--no)}
.fb.bl{background:var(--warn-bg);border:1px solid var(--warn)}
.fb p{margin:6px 0 0}
.bar{height:10px;border-radius:6px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--pri)}
.nums{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.nums button{width:38px;height:38px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.nums .done{background:var(--pri);color:var(--pri-ink);border-color:var(--pri)}
.nums .cur{outline:3px solid var(--warn)}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}
.pass{color:var(--ok);font-weight:700}.fail{color:var(--no);font-weight:700}
.muted{color:var(--mut);font-size:14px}
.tip{background:var(--warn-bg);border:1px solid var(--warn);border-radius:10px;padding:10px 12px;font-size:14px;margin:12px 0}
.timer{font-variant-numeric:tabular-nums;color:var(--mut)}
@media (max-width:560px){
  .top{position:static}
  nav{width:100%;position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;z-index:9}
  nav button{flex:1;padding:10px 4px}
  .q{font-size:17px}
}
.chart{width:100%;height:auto;display:block}
.chart text{fill:var(--mut);font-size:10px}
.chart .eixo,.chart .grade{stroke:var(--line);stroke-width:1}
.chart .pos{fill:var(--ok)}.chart .neg{fill:var(--no)}
.chart .linha{stroke:var(--pri);stroke-width:2.5}
.chart .ponto{fill:var(--pri)}
.chart .ref{stroke:var(--no);stroke-width:1.5;stroke-dasharray:5 4}
.chart .reft{fill:var(--no)}

/* ---- marca e tela inicial ---- */
.brand b{letter-spacing:.14em;font-size:17px}
nav .troca{border:1px solid var(--line)}
.eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.hero{background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 55%,#000));color:var(--pri-ink);border-radius:18px;padding:22px 20px;margin:4px 0 14px}
.hero h1{margin:2px 0 14px;font-size:28px}
.hero .eyebrow,.hero .muted{color:color-mix(in srgb,var(--pri-ink) 78%,transparent)}
.meter-top{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.meter-top b{font-size:30px}.meter-top small{font-size:14px;font-weight:400;opacity:.8}
.meter-bar{position:relative;height:12px;border-radius:8px;background:color-mix(in srgb,var(--pri-ink) 22%,transparent);margin:8px 0 4px}
.meter-bar i{position:absolute;inset:0 auto 0 0;border-radius:8px;background:var(--pri-ink)}
.meter-bar u{position:absolute;top:-4px;bottom:-4px;width:2px;background:#ffd166;text-decoration:none}
.meter-leg{position:relative;display:flex;justify-content:space-between;font-size:12px;opacity:.85;height:16px}
.meter-leg span:nth-child(2){position:absolute;transform:translateX(-50%);color:#ffd166}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn.big{flex:1 1 180px;text-align:center;padding:15px 18px;font-size:17px;background:var(--pri-ink);color:var(--pri)}
.hero .btn.big.sec{background:transparent;color:var(--pri-ink);border:2px solid color-mix(in srgb,var(--pri-ink) 70%,transparent)}
.hoje{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.hoje>div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:2px}
.hoje span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.hoje b{font-size:26px;line-height:1.15}.hoje b small{font-size:13px;font-weight:500;color:var(--mut)}
.hoje b.neg{color:var(--no)}
.hoje em{font-style:normal;font-size:12px;color:var(--mut)}
.acoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.acoes .card{margin:0}
details.card summary{cursor:pointer;list-style:none}
details.card summary::before{content:"▸ ";color:var(--mut)}
details.card[open] summary::before{content:"▾ "}
@media (max-width:560px){
  .hero h1{font-size:24px}
  .hoje{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .hoje>div{padding:10px 8px}.hoje b{font-size:21px}
  nav button{font-size:13px;padding:10px 2px}
  nav .troca{border:0}
  .top .brand{width:100%}
}

/* ---- múltipla escolha ---- */
.opts{display:grid;gap:8px}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;cursor:pointer;min-height:48px}
.opt b{flex:0 0 28px;height:28px;border-radius:50%;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;font-size:14px}
.opt span{padding-top:2px}
.opt:hover:not(:disabled){border-color:var(--pri)}
.opt.on{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri) inset}
.opt.on b{background:var(--pri);color:var(--pri-ink);border-color:var(--pri)}
.opt.certa{border-color:var(--ok);background:var(--ok-bg)}
.opt.certa b{background:var(--ok);color:#fff;border-color:var(--ok)}
.opt.errada{border-color:var(--no);background:var(--no-bg)}
.opt.errada b{background:var(--no);color:#fff;border-color:var(--no)}
.opt:disabled{cursor:default}

/* ---- tela inicial (landing) ---- */
main.wide{max-width:1120px}
.acc{color:var(--pri)}
.land-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;padding:28px 8px 18px;
  background:radial-gradient(60% 80% at 80% 30%,color-mix(in srgb,var(--pri) 14%,transparent),transparent 70%)}
.land-hero h1{font-size:clamp(30px,5vw,48px);line-height:1.12;margin:0 0 14px}
.lead{font-size:18px;color:var(--mut);max-width:30em;margin:0 0 22px}
.land-ilus{display:grid;place-items:center}
.ilus{width:100%;max-width:440px;height:auto}
.land .ctas{margin-top:0}
.land .btn.big{flex:0 0 auto;min-width:170px;background:var(--pri);color:var(--pri-ink);text-transform:uppercase;letter-spacing:.04em;font-size:14px}
.land .btn.big.sec{background:transparent;color:var(--ink);border:1px solid var(--pri)}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 26px}
.fcard{display:flex;align-items:center;gap:14px;text-align:left;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:16px;font:inherit;cursor:pointer}
.fcard:hover{border-color:var(--pri)}
.fico{flex:0 0 46px;height:46px;border-radius:12px;background:color-mix(in srgb,var(--pri) 16%,transparent);color:var(--pri);display:grid;place-items:center}
.fico svg,.cico svg{width:24px;height:24px}
.ftxt{flex:1;display:flex;flex-direction:column;gap:2px}
.ftxt b{font-size:16px}.ftxt small{font-size:13px;color:var(--mut);line-height:1.35}
.fcard i{font-style:normal;font-size:26px;color:var(--pri)}
.land h2{font-size:24px;margin:8px 0 4px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;margin-top:12px}
.ccard{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.cico{flex:0 0 52px;height:52px;border-radius:12px;background:color-mix(in srgb,var(--pri) 16%,transparent);color:var(--pri);display:grid;place-items:center}
.cinfo{flex:1 1 220px;min-width:0}
.cinfo h3{font-size:17px;margin:0 0 4px;line-height:1.3}
.cinfo p{margin:0 0 8px}
.ccard .btn{flex:0 0 auto;margin-left:66px}
.selo{display:inline-block;font-size:12px;border:1px solid var(--warn);color:var(--warn);background:var(--warn-bg);border-radius:999px;padding:2px 10px;margin:0 6px 4px 0}
.selo.ok{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
@media (max-width:760px){
  .land-hero{grid-template-columns:1fr;padding-top:12px}
  .land-ilus{order:-1}.ilus{max-width:300px}
  .feat{grid-template-columns:1fr}
  .cgrid{grid-template-columns:1fr}
  .ccard .btn{margin-left:0;width:100%}
}


/* ---- tema azul-marinho: fundo, header, botões e brilho ---- */
html{background:#080F18}
body{background:linear-gradient(135deg,#080F18 0%,#0D1622 100%) fixed;min-height:100vh}
.top{background:var(--head);border-bottom:1px solid var(--line)}
.brand b{color:var(--ink)}
nav button:hover{color:var(--hov)}
nav button.on{background:transparent;color:var(--pri2);box-shadow:inset 0 -2px 0 var(--pri)}
.card,.stat,.hoje>div,.fcard,.ccard,.opt{background:var(--card);border-color:var(--line)}
.card.foco,.hoje>div,.stat{background:var(--card2)}
.btn{background:var(--grad);color:var(--pri-ink);box-shadow:var(--glow-sm);transition:box-shadow .15s,transform .15s}
.btn:hover:not(:disabled){box-shadow:var(--glow-lg);transform:translateY(-1px)}
.btn.sec{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.sec:hover:not(:disabled){border-color:var(--pri);color:var(--hov);box-shadow:var(--glow-sm)}
.ce .c,.ce .e{box-shadow:none}
.chip{background:var(--card2);border-color:var(--line)}
.chip.on{background:var(--grad);color:var(--pri-ink);border-color:var(--pri)}
select{background:var(--card2);color:var(--ink);border-color:var(--line)}
.bar i,.meter-bar i{background:var(--grad)}
.nums button{background:var(--card2)}
.nums .done{background:var(--grad);color:var(--pri-ink)}
.fcard:hover,.ccard:hover{border-color:var(--pri);box-shadow:var(--glow-sm)}
.opt:hover:not(:disabled){border-color:var(--pri);box-shadow:var(--glow-sm)}
.opt.on{box-shadow:var(--glow-sm),0 0 0 2px var(--pri) inset}
.opt.on b{background:var(--grad)}
.opt.certa b,.opt.errada b{color:#04101C}
.land .btn.big{background:var(--grad);color:var(--pri-ink)}
.land .btn.big.sec{background:transparent;color:var(--ink);border:1px solid var(--pri);box-shadow:none}
.land-hero{background:radial-gradient(60% 80% at 80% 30%,rgba(0,153,255,.18),transparent 70%)}
.ilus{filter:drop-shadow(0 0 30px rgba(0,153,255,.35))}
.hero{background:linear-gradient(135deg,#162131 0%,#101B29 100%);color:var(--ink);border:1px solid var(--line);box-shadow:var(--glow-sm)}
.hero .eyebrow,.hero .muted{color:var(--mut)}
.hero h1{color:var(--ink)}
.meter-bar{background:var(--line)}
.meter-bar u{background:var(--warn)}
.meter-leg span:nth-child(2){color:var(--warn)}
.hero .btn.big{background:var(--grad);color:var(--pri-ink)}
.hero .btn.big.sec{background:transparent;color:var(--ink);border:1px solid var(--pri)}
.tip{background:var(--warn-bg)}
.fb.ok{background:var(--ok-bg)}.fb.no{background:var(--no-bg)}

.selo.adm{border-color:var(--pri);color:var(--pri2);background:rgba(63,169,245,.10)}
button.link{background:none;border:0;color:var(--pri2);text-decoration:underline;font:inherit;cursor:pointer;padding:0}

/* ---- níveis e trilha ---- */
.tag.nv{border-color:transparent;font-weight:600}
.tag.nv1{background:rgba(53,208,127,.14);color:#35D07F}
.tag.nv2{background:rgba(98,181,247,.14);color:#62B5F7}
.tag.nv3{background:rgba(255,92,108,.14);color:#FF5C6C}
.trilha{background:var(--card2)}
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.passo{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:12px;font:inherit;cursor:pointer}
.passo:hover{border-color:var(--pri);box-shadow:var(--glow-sm)}
.passo.rec{border-color:var(--pri);box-shadow:var(--glow-sm)}
.passo .pn{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.passo b{font-size:24px;line-height:1}
.passo small{color:var(--mut);font-size:12px}
.passo em{color:var(--pri2);font-style:normal;font-weight:600}
@media (max-width:560px){.passos{grid-template-columns:1fr}}

/* ---- nova tela inicial (referência: mockup aprovado) ---- */
[hidden]{display:none!important}
body.landing .top{background:rgba(10,18,29,.92);backdrop-filter:blur(8px);padding:12px clamp(16px,6vw,84px);border-bottom:1px solid #1B2D44}
body.landing .brand{display:flex;align-items:center;gap:12px}
body.landing .brand b{font-size:21px;letter-spacing:.2em;font-weight:700}
.logo-s{width:32px;height:32px;flex:0 0 auto}
body.landing nav{gap:10px;align-items:center}
body.landing nav button{font-size:15px;padding:10px 18px;color:#dbe7f5;border-radius:0}
body.landing nav button.on{color:#1E9BFF;box-shadow:inset 0 -3px 0 #1E9BFF}
body.landing nav button.avatar{width:40px;height:40px;padding:0;margin-left:14px;border-radius:50%;background:#16273D;border:1px solid #2B4466;color:#CFE3F8;display:grid;place-items:center;box-shadow:none}
.avatar svg{width:20px;height:20px}
body.landing main.wide{max-width:1280px;padding:0 clamp(16px,4vw,48px) 60px}
body.landing{background:radial-gradient(70% 55% at 78% 14%,rgba(0,110,220,.20),transparent 70%),linear-gradient(180deg,#07101B 0%,#0A1523 100%) fixed}
.land-hero{grid-template-columns:1.02fr .98fr;gap:24px;padding:56px clamp(0px,3vw,48px) 36px;background:none}
.land-hero h1{font-size:clamp(34px,4.6vw,60px);line-height:1.08;font-weight:800;letter-spacing:-.01em;margin:0 0 20px}
.land-hero .acc{color:#1E9BFF}
.lead{font-size:18px;line-height:1.55;color:#DCE8F5;max-width:27em;margin:0 0 26px}
.land .btn.big{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:0;padding:15px 24px;font-size:16px;font-weight:600;text-transform:none;letter-spacing:0;border-radius:8px;background:linear-gradient(90deg,#1E8CF5,#0A6FE0);color:#fff;box-shadow:0 8px 26px rgba(0,120,255,.35)}
.land .btn.big svg{width:20px;height:20px}
.land .btn.big i{font-style:normal;font-size:24px;line-height:1}
.land .btn.big.sec{background:rgba(255,255,255,.02);border:1px solid #3B6EA8;color:#fff;box-shadow:none;border-radius:8px}
.land-ilus{display:grid;place-items:center}
.ilus{width:100%;max-width:600px;filter:none}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:8px 0 44px;background:linear-gradient(180deg,#0E1B2D,#0B1625);border:1px solid #1F3350;border-radius:14px}
.feat .fcard{background:none;border:0;border-radius:0;padding:26px 28px;gap:18px}
.feat .fcard+.fcard{border-left:1px solid #1F3350}
.feat .fcard:hover{box-shadow:none;background:rgba(30,155,255,.06)}
.feat .fico{flex:0 0 72px;height:72px;border-radius:14px;background:#12294A;border:1px solid #1F4170;color:#1E9BFF}
.feat .fico svg{width:32px;height:32px}
.feat .ftxt b{font-size:20px;font-weight:700}
.feat .ftxt small{font-size:15px;color:#9DB5CE}
.feat .fcard i{font-size:30px;color:#1E9BFF}
.lhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.lhead h2{font-size:36px;font-weight:700;margin:0 0 4px}
.lhead .muted{margin:0;font-size:16px}
.fchips{display:flex;flex-wrap:wrap;gap:10px}
.fchip{background:transparent;color:#DCE8F5;border:1px solid #2A4467;border-radius:999px;padding:9px 20px;font:inherit;font-size:15px;cursor:pointer}
.fchip:hover{border-color:#1E9BFF}
.fchip.on{background:#1E8CF5;border-color:#1E8CF5;color:#fff;font-weight:600}
.dgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.dcard{background:linear-gradient(180deg,#0E1B2D,#0B1625);border:1px solid #1F3350;border-radius:14px;padding:24px 28px}
.dcard:hover{border-color:#2E5C94;box-shadow:var(--glow-sm)}
.dtop{display:flex;align-items:center;gap:18px}
.dlogo{flex:0 0 76px;height:76px;border-radius:14px;background:#0A1424;border:1px solid #1F3350;display:grid;place-items:center;color:#62B5F7;overflow:hidden}
.dlogo svg{width:38px;height:38px}.dlogo img{width:100%;height:100%;object-fit:contain;padding:6px}
.dtit{flex:1;min-width:0}
.dtit h3{font-size:25px;font-weight:700;margin:0 0 4px;line-height:1.2}
.dsub{margin:0;color:#3FA9F5;font-size:17px}
.badge{display:inline-block;margin:8px 8px 0 0;font-size:12px;color:#35D07F;border:1px solid #1F7A4C;background:#0F2A21;border-radius:6px;padding:2px 10px}
.badge.adm{color:#62B5F7;border-color:#2B5F96;background:rgba(63,169,245,.10)}
.btn.play{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;margin:0;background:#1E8CF5;color:#fff;border-radius:8px;padding:14px 22px;font-size:15px;box-shadow:none}
.btn.play svg{width:18px;height:18px}
.dinfo{display:grid;grid-template-columns:repeat(3,1fr);margin:22px 0 18px}
.dinfo>div{display:flex;align-items:center;gap:12px;padding:0 16px}
.dinfo>div:first-child{padding-left:0}
.dinfo>div+div{border-left:1px solid #1F3350}
.ic{color:#7FB8F0;display:grid;place-items:center;flex:0 0 auto}.ic svg{width:26px;height:26px}
.dinfo small{display:block;font-size:13px;color:#9DB5CE}
.dinfo b{display:block;font-size:15px;font-weight:600}
.dfoot{display:flex;align-items:center;gap:20px;border-top:1px solid #1F3350;padding-top:16px;flex-wrap:wrap}
.dprog{flex:0 0 190px}
.dprog .bar{height:8px;background:#1B2D44}
.dprog small{display:block;margin-top:6px;color:#3FA9F5;font-size:13px}
.dmeta{display:flex;align-items:center;gap:10px;font-size:14px;color:#DCE8F5}
.dmeta .ic svg{width:22px;height:22px}
.dmeta.mat{flex:1 1 220px;border-left:1px solid #1F3350;padding-left:20px;color:#B9CCE0;font-size:13px}
@media (max-width:900px){
  .dgrid{grid-template-columns:1fr}
  .land-hero{grid-template-columns:1fr;padding-top:24px}
  .feat{grid-template-columns:1fr}
  .feat .fcard+.fcard{border-left:0;border-top:1px solid #1F3350}
}
@media (max-width:560px){
  body.landing .top{padding:12px 16px}
  body.landing nav button.avatar{display:none}
  body.landing nav button{padding:10px 4px}
  .lhead h2{font-size:28px}
  .dcard{padding:18px}
  .dtop{flex-wrap:wrap}
  .btn.play{width:100%;justify-content:center}
  .dinfo{grid-template-columns:1fr;gap:12px}
  .dinfo>div,.dinfo>div:first-child{padding:0;border:0}
  .dmeta.mat{border-left:0;padding-left:0}
  .dprog{flex:1 1 100%}
}

.dlogo{position:relative}.dlogo img{position:absolute;inset:0;background:#fff;border-radius:13px}

/* alinhamento dos cartões: as linhas (topo, dados, matérias) ficam na mesma altura nos dois */
.dgrid{row-gap:0}
.dcard{display:grid;grid-row:span 3;grid-template-rows:subgrid;margin-bottom:24px;padding:24px 28px}
.dtop{align-items:center}
.dinfo{margin:0;padding:22px 0 18px;align-items:start}
.dinfo>div{align-items:flex-start}
.dinfo .ic{padding-top:2px}
.dfoot{border-top:1px solid #1F3350;padding-top:16px;align-self:end}
.dmeta.mat{border-left:0;padding-left:0;flex:1 1 auto;font-size:14px}
@media (max-width:900px){.dcard{grid-row:auto;display:block}.dinfo{margin:20px 0 16px;padding:0}}

/* botão voltar ao topo */
.topo{position:fixed;right:18px;bottom:22px;width:46px;height:46px;border-radius:50%;border:1px solid #2E5C94;background:#12294A;color:#62B5F7;display:grid;place-items:center;cursor:pointer;z-index:20;box-shadow:0 6px 20px rgba(0,0,0,.4),var(--glow-sm);padding:0}
.topo:hover{background:#1E8CF5;color:#fff;border-color:#1E8CF5}
.topo[hidden]{display:none}
@media (max-width:560px){.topo{bottom:calc(78px + env(safe-area-inset-bottom));right:14px}}

/* imagem do herói: bordas esmaecidas para se fundir ao fundo da página */
.hero-img{display:block;width:100%;max-width:720px;height:auto;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 58%,transparent 100%);
          mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 58%,transparent 100%)}
@media (max-width:900px){.hero-img{max-width:420px;margin:0 auto}}

/* logotipo */
.brand{display:flex;align-items:center;gap:10px}
.logo-img{display:block;height:34px;width:auto}
body.landing .logo-img{height:38px}
.brand .cargo{white-space:nowrap}
@media (max-width:560px){.logo-img,body.landing .logo-img{height:30px}.brand .cargo{display:none}}

/* ---- aba lateral: áreas de estudo ---- */
.shell{display:block}
#side{display:none}
#side-fab{display:none}
body.com-side .shell{display:grid;grid-template-columns:310px minmax(0,1fr);max-width:1340px;margin:0 auto;align-items:start}
body.com-side #side{display:block;position:sticky;top:58px;height:calc(100vh - 58px);overflow-y:auto;padding:18px 16px 28px;border-right:1px solid var(--line);background:rgba(10,18,29,.55)}
body.com-side main{margin:0 auto;width:100%}
.side-head{display:flex;justify-content:space-between;align-items:center;font-size:17px}
.side-x{display:none;background:none;border:0;color:var(--mut);font-size:28px;line-height:1;cursor:pointer;padding:0 6px}
#side .muted{margin:6px 0 10px;font-size:13px}
.si{display:flex;align-items:stretch;margin:8px 0;border:1px solid var(--line);border-radius:12px;background:var(--card2);transition:border-color .15s,box-shadow .15s}
.si:hover{border-color:#2E5C94}
.si.on{border-color:var(--pri);box-shadow:var(--glow-sm);background:linear-gradient(180deg,#12294A,#0F2038)}
.si-main{flex:1;display:flex;gap:10px;padding:11px 8px 11px 12px;cursor:pointer;min-width:0}
.si-main input{accent-color:#1E9BFF;width:18px;height:18px;margin-top:1px;flex:0 0 auto}
.si-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.si-txt b{font-size:14px;line-height:1.3}
.si-txt small{color:var(--mut);font-size:12px}
.si-txt .bar{height:5px;margin-top:3px}
.si-go{flex:0 0 42px;border:0;border-left:1px solid var(--line);background:transparent;color:var(--pri2);cursor:pointer;border-radius:0 12px 12px 0;font-size:13px}
.si-go:hover{background:var(--pri);color:var(--pri-ink)}
.side-acoes{display:flex;gap:8px;margin:14px 0 10px}
#side .btn{width:100%;text-align:center}
.side-acoes .btn{flex:1}
@media (max-width:1000px){
  body.com-side .shell{display:block;max-width:none}
  body.com-side #side{position:fixed;left:0;top:0;bottom:0;height:auto;width:min(88vw,340px);z-index:40;transform:translateX(-104%);transition:transform .22s ease;background:#0B1624;border-right:1px solid #1F3350;box-shadow:12px 0 40px rgba(0,0,0,.5)}
  body.com-side #side.open{transform:none}
  body.com-side .side-x{display:block}
  #side-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:35}
  body.com-side #side-fab{display:inline-flex;align-items:center;gap:8px;position:static;order:2;padding:9px 14px;border-radius:999px;border:1px solid #2E5C94;background:#12294A;color:#CFE3F8;font:inherit;font-size:14px;font-weight:600;cursor:pointer;min-height:40px}
  body.com-side .top .brand{flex:1 1 auto;width:auto;min-width:0}
}