/* Meteos2 — tema do site = paleta do launcher v2 / skin do cliente
   (autopatcher_v2/launcher/src/main.cpp namespace Theme) */
:root{
  --bg:#0c0a12; --panel:#0e0b15; --panel2:#15111e; --bar:#09070d; --track:#2a2335;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.16);
  --gold:#e8b04b; --gold-dark:#a8701f; --gold-light:#ffd98a; --gold-top:#f6c766;
  --text:#efe9f6; --muted:#9c93aa; --dim:#6f6680;
  --purple:#6b3fa0; --ok:#7bd88f; --err:#ff6b6b;
  --radius:8px;
  --display:'Cinzel', Georgia, 'Times New Roman', serif;
  --ui:'Segoe UI', 'Segoe UI Variable', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ui); font-size:16px; line-height:1.6; color:var(--text); background:var(--bg); overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
a{color:var(--gold); text-decoration:none}
img{max-width:100%}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px}
.brand{font-family:var(--display); font-weight:700; color:var(--gold); letter-spacing:.06em;
  background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 55%,var(--gold-dark) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

/* ---------- barra superior (como a barra do launcher) ---------- */
header.nav{position:sticky; top:0; z-index:50; background:rgba(9,7,13,.94); border-bottom:1px solid var(--line)}
header.nav::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,176,75,.55),transparent)}
.nav .wrap{display:flex; align-items:center; gap:28px; height:64px}
.logo{display:flex; align-items:center; gap:10px; font-size:21px}
.logo img{width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(232,176,75,.35))}
nav.links{display:flex; gap:4px; align-items:center; margin-right:auto}
nav.links a{color:var(--muted); font-size:14px; font-weight:600; padding:8px 12px; border-radius:6px; transition:color .15s, background .15s}
nav.links a:hover{color:var(--text); background:rgba(255,255,255,.05)}
nav.links a.active{color:var(--gold)}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--line2); color:var(--text); border-radius:6px; width:40px; height:36px; font-size:18px; cursor:pointer}

/* ---------- botões (GoldButton / OutlineButton do launcher) ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; border-radius:6px;
  font-family:var(--ui); font-weight:700; font-size:14px; letter-spacing:.02em; cursor:pointer; border:1px solid transparent;
  transition:filter .15s, box-shadow .2s, background .15s, border-color .15s, transform .06s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-gold{color:#2a1a05; border-color:rgba(255,255,255,.28);
  background:linear-gradient(180deg,var(--gold-top) 0%,var(--gold) 55%,var(--gold-dark) 100%)}
.btn-gold:hover{background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 55%,var(--gold-dark) 100%);
  box-shadow:0 0 28px rgba(232,176,75,.35)}
.btn-ghost{color:var(--text); background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14)}
.btn-ghost:hover{background:rgba(255,255,255,.10); border-color:rgba(232,176,75,.55)}
.btn-lg{font-size:17px; padding:15px 34px}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; text-align:center; padding:56px 20px 72px; border-bottom:1px solid var(--line);
  background:
    radial-gradient(560px 380px at 50% 40%, rgba(12,10,18,.82) 0%, rgba(12,10,18,.62) 45%, rgba(12,10,18,.30) 80%),
    linear-gradient(180deg, rgba(12,10,18,.55) 0%, rgba(12,10,18,.42) 50%, rgba(12,10,18,.72) 85%, var(--bg) 100%),
    url('/assets/bg.webp') center 40% / cover no-repeat var(--bg)}
.hero > *{position:relative; z-index:1}
.hero #embers{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.hero .emblem{display:block; width:min(300px,64vw); height:auto; margin:6px auto 8px;
  filter:drop-shadow(0 0 30px rgba(232,140,60,.35)); animation:emblemGlow 5s ease-in-out infinite}
@keyframes emblemGlow{0%,100%{filter:drop-shadow(0 0 22px rgba(232,140,60,.28))}50%{filter:drop-shadow(0 0 42px rgba(255,170,80,.55)) brightness(1.06)}}
.hero p.tag{font-size:18px; color:#d9d1e4; max-width:600px; margin:0 auto 28px; text-shadow:0 2px 10px #000}
.cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

.status{display:inline-flex; align-items:center; gap:9px; padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600;
  background:rgba(9,7,13,.75); border:1px solid var(--line2)}
.status.on{color:var(--ok)} .status.off{color:var(--err)}
.dot{width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; animation:dotPulse 2s ease-in-out infinite}
@keyframes dotPulse{50%{opacity:.45}}

.page-hero{position:relative; text-align:center; padding:64px 20px 52px; border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(12,10,18,.55) 0%, rgba(12,10,18,.40) 50%, var(--bg) 100%),
    url('/assets/bg.webp') center 35% / cover no-repeat var(--bg)}
.page-hero h1{font-family:var(--display); font-size:40px; font-weight:700}
.page-hero p{color:var(--muted); margin-top:6px}

/* ---------- stats (cartões tipo painel do launcher) ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:-40px; position:relative; z-index:2}
.stat{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 12px; text-align:center; box-shadow:0 12px 30px rgba(0,0,0,.45)}
.stat .num{font-size:30px; font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums; line-height:1.2}
.stat .lbl{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; margin-top:4px}

/* ---------- secções ---------- */
section{padding:72px 0}
.alt{background:var(--bar); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.eyebrow{display:block; text-align:center; color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; margin-bottom:8px}
h2.section{font-family:var(--display); font-weight:700; font-size:34px; text-align:center; color:var(--text); margin-bottom:8px}
h2.section .brand{font-size:inherit}
.section-sub{text-align:center; color:var(--muted); margin:0 auto 40px; max-width:620px}
.ornament{display:flex; align-items:center; justify-content:center; gap:12px; margin:0 auto 14px; color:var(--gold)}
.ornament::before,.ornament::after{content:""; width:70px; height:1px; background:linear-gradient(90deg,transparent,var(--gold))}
.ornament::after{transform:scaleX(-1)}
.ornament span{width:7px; height:7px; transform:rotate(45deg); background:var(--gold); box-shadow:0 0 10px var(--gold)}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px}
.card{position:relative; background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 22px; transition:border-color .2s, transform .2s, box-shadow .2s}
.card:hover{border-color:rgba(232,176,75,.5); transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 24px rgba(232,176,75,.08)}
.card .ico{width:46px; height:46px; display:grid; place-items:center; border-radius:8px; font-size:22px; margin-bottom:14px;
  background:radial-gradient(circle at 50% 35%, rgba(232,176,75,.22), rgba(107,63,160,.18)); border:1px solid rgba(232,176,75,.3)}
.card h3{font-size:17px; color:var(--gold); margin-bottom:6px; font-weight:700}
.card p{color:var(--muted); font-size:14.5px}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.step{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 22px; text-align:center; display:flex; flex-direction:column; align-items:center}
.step .n{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:20px;
  color:#2a1a05; background:linear-gradient(180deg,var(--gold-top),var(--gold) 55%,var(--gold-dark)); margin-bottom:14px;
  box-shadow:0 0 22px rgba(232,176,75,.3)}
.step h3{font-size:18px; margin-bottom:6px}
.step p{color:var(--muted); font-size:14.5px; margin-bottom:18px; flex:1}

/* ---------- rankings ---------- */
.ranks{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.rankbox{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.rankbox h3{font-size:15px; font-weight:700; padding:14px 18px; color:var(--gold); background:var(--bar); border-bottom:1px solid var(--line);
  text-transform:uppercase; letter-spacing:.1em}
table{width:100%; border-collapse:collapse; font-size:14.5px}
th{text-align:left; color:var(--dim); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; padding:10px 18px; border-bottom:1px solid var(--line)}
td{padding:9px 18px; border-bottom:1px solid rgba(255,255,255,.05)}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(255,255,255,.03)}
td.rank{width:44px; color:var(--dim); font-weight:700}
td.name{font-weight:600}
td.r{text-align:right; font-variant-numeric:tabular-nums}
td.muted{color:var(--muted)}
tr.rank-1 td.rank{color:#ffd24a} tr.rank-2 td.rank{color:#c9cfdc} tr.rank-3 td.rank{color:#d08a4e}
tr.rank-1 td.name{color:var(--gold-light)}
.empty{padding:28px 18px; color:var(--muted); text-align:center}

/* ---------- apresentação ---------- */
.prose h2{font-family:var(--display); font-weight:700; font-size:26px; margin-bottom:14px; color:var(--text)}
.prose h2 .tag{color:var(--gold)}
.prose p.lead{font-size:17px; margin-bottom:12px}
.prose p.sub{color:var(--muted); margin-bottom:12px}
.prose section{padding:44px 0; border-bottom:1px solid var(--line)}
ul.feats{list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:12px; margin-top:18px}
ul.feats li{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px 14px 18px; border-left:3px solid var(--gold-dark); transition:border-color .2s}
ul.feats li:hover{border-color:rgba(232,176,75,.5); border-left-color:var(--gold)}
ul.feats li b{color:var(--gold); display:block; margin-bottom:2px}
ul.feats li span{color:var(--muted); font-size:14px}
.highlight{margin-top:18px; padding:18px 20px; border-radius:var(--radius); border:1px solid rgba(232,176,75,.35);
  background:linear-gradient(90deg,rgba(232,176,75,.10),rgba(107,63,160,.10))}
.highlight b{color:var(--gold)}
.cta-final{text-align:center; padding:60px 20px}
.cta-final .cta{margin-top:20px}

/* ---------- registo ---------- */
.auth{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 16px;
  background:
    radial-gradient(620px 520px at 50% 45%, rgba(12,10,18,.70) 0%, rgba(12,10,18,.55) 75%),
    url('/assets/bg.webp') center / cover no-repeat fixed var(--bg)}
.panel{width:100%; max-width:430px; background:rgba(14,11,21,.94); border:1px solid var(--line2); border-radius:10px;
  padding:26px 28px 24px; box-shadow:0 24px 70px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.04)}
.panel .head{text-align:center; margin-bottom:12px}
.panel .head img{width:150px; height:auto; filter:drop-shadow(0 0 22px rgba(232,140,60,.3))}
.panel .head .sub{color:var(--muted); font-size:14px; margin-top:2px}
.panel label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin:14px 0 6px; letter-spacing:.08em; text-transform:uppercase}
.panel input[type=text],.panel input[type=password],.panel input[type=email]{width:100%; padding:11px 13px; background:#09070d;
  border:1px solid rgba(255,255,255,.12); border-radius:6px; color:var(--text); font:inherit; font-size:15px; outline:none; transition:border-color .15s, box-shadow .15s}
.panel input:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,176,75,.15)}
.hint{font-size:12px; color:var(--dim); margin-top:5px}
.hp{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0}
.panel .btn{width:100%; margin-top:20px; font-size:15px; padding:13px}
.panel .btn small{display:block; font-weight:400; font-size:11.5px; color:var(--muted)}
.btn-dl{flex-direction:column; gap:2px}
.divider{display:flex; align-items:center; gap:12px; margin:22px 0 0; color:var(--dim); font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line2),transparent)}
.divider + .btn{margin-top:12px}
.msg{border-radius:6px; padding:12px 14px; font-size:14px; margin-bottom:6px; line-height:1.5}
.msg.err{background:rgba(255,107,107,.10); border:1px solid rgba(255,107,107,.45); color:#ffc2c2}
.msg.ok{background:rgba(123,216,143,.10); border:1px solid rgba(123,216,143,.45); color:#cdf3d5}
.msg ul{margin:6px 0 0; padding-left:18px}
.foot{text-align:center; margin-top:18px; font-size:12px; color:var(--dim)}
.foot a{color:var(--muted)} .foot a:hover{color:var(--gold)}

/* ---------- footer ---------- */
footer.site{background:var(--bar); border-top:1px solid var(--line); padding:34px 0; text-align:center}
footer.site .flinks{display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-bottom:12px}
footer.site .flinks a{color:var(--muted); font-size:14px} footer.site .flinks a:hover{color:var(--gold)}
footer.site .cp{color:var(--dim); font-size:13px}

/* ---------- animações de entrada ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}

@media (max-width:860px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .steps,.ranks{grid-template-columns:1fr}
  h2.section{font-size:28px}
}
@media (max-width:760px){
  .burger{display:block}
  .nav .wrap{gap:12px}
  .nav .wrap > .btn{display:none}
  nav.links{display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:stretch; padding:10px 16px 14px;
    background:rgba(9,7,13,.98); border-bottom:1px solid var(--line)}
  nav.links.open{display:flex}
  .page-hero h1{font-size:30px}
}
@media (prefers-reduced-motion: reduce){
  .hero .emblem,.dot{animation:none}
  .reveal{opacity:1; transform:none; transition:none}
  #embers{display:none}
  .card:hover{transform:none}
}

/* =================== DASHBOARD (homepage 2 colunas) =================== */
.dash{display:grid; grid-template-columns:340px 1fr; gap:22px; align-items:start; padding:34px 0 60px}
.dash .col{display:flex; flex-direction:column; gap:22px; min-width:0}
.box{background:linear-gradient(180deg,rgba(21,17,30,.96),rgba(14,11,21,.96)); border:1px solid var(--line); border-radius:10px; overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.35)}
.box-h{display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--line)}
.box-h h3{font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:var(--text);
  display:flex; align-items:center; gap:10px; margin-right:auto}
.box-h h3::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold)}
.box-h .side{font-size:13px; color:var(--gold); font-weight:600}
.box-h .side:hover{color:var(--gold-light)}
.box-b{padding:16px 18px}
.box-f{display:block; text-align:center; padding:13px; border-top:1px solid var(--line); font-size:12.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text); background:none; width:100%; border-left:0; border-right:0; border-bottom:0; cursor:pointer; font-family:var(--ui)}
.box-f:hover{color:var(--gold); background:rgba(255,255,255,.02)}
.box-f::after{content:" \203A"; color:var(--gold)}

/* conta */
.acc .btn{width:100%; margin-bottom:10px}
.acc p{color:var(--muted); font-size:13.5px; text-align:center}
.acc p a{font-weight:700}

/* servidor */
.srv-st{font-size:13px; font-weight:600; display:flex; align-items:center; gap:7px}
.srv-st.on{color:var(--ok)} .srv-st.off{color:var(--err)}
.kv{display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:14px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted)} .kv b{font-size:16px; font-variant-numeric:tabular-nums}
.kv b.gold{color:var(--gold)}

/* ranking */
.tabs{display:flex; gap:6px; padding:12px 18px 0}
.tab{font:700 12px var(--ui); letter-spacing:.1em; text-transform:uppercase; padding:7px 12px; border-radius:6px; cursor:pointer;
  color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line2)}
.tab.on{color:#2a1a05; border-color:rgba(255,255,255,.28); background:linear-gradient(180deg,var(--gold-top),var(--gold) 55%,var(--gold-dark))}
.rk-pane{display:none} .rk-pane.on{display:block}
.podium{display:grid; grid-template-columns:1fr 1.12fr 1fr; gap:8px; align-items:end; padding:18px 14px 10px}
.pod{text-align:center; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:8px; padding:12px 6px 10px; min-width:0}
.pod.p1{padding-top:16px; padding-bottom:14px; border-color:rgba(232,176,75,.45); background:linear-gradient(180deg,rgba(232,176,75,.12),rgba(255,255,255,.02))}
.av{position:relative; width:52px; height:52px; margin:0 auto 14px; border-radius:50%; border:2px solid var(--track); background:#09070d center/cover no-repeat;
  display:grid; place-items:center; font-size:22px}
.pod.p1 .av{width:62px; height:62px; border-color:var(--gold); box-shadow:0 0 18px rgba(232,176,75,.35)}
.pod.p2 .av{border-color:#c9cfdc} .pod.p3 .av{border-color:#d08a4e}
.av i{position:absolute; left:50%; bottom:-11px; transform:translateX(-50%); font:700 10.5px var(--ui); font-style:normal; padding:2px 5px; border-radius:4px;
  background:var(--bar); border:1px solid var(--line2); color:var(--text)}
.pod.p1 .av i{color:#2a1a05; background:var(--gold); border-color:var(--gold)}
.pod .nm{font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pod .lv{font-size:12px; color:var(--muted)}
.rk-list{padding:0 18px 6px}
.rk-row{display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid rgba(255,255,255,.06)}
.rk-row .n{width:18px; color:var(--dim); font-weight:700; font-size:13px}
.rk-row .av{width:34px; height:34px; margin:0; font-size:15px; border-width:1px}
.rk-row .who{flex:1; min-width:0} .rk-row .who b{display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rk-row .who span{font-size:12px; color:var(--muted)}
.rk-row .v{font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums; font-size:14px}
.rk-more{display:none} .rk-pane.all .rk-more{display:flex}
.empty{padding:22px 18px; color:var(--muted); text-align:center; font-size:14px}

/* eventos */
.evs{padding:12px; display:flex; flex-direction:column; gap:8px}
.ev{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:7px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05);
  border-left:3px solid var(--track)}
.ev.live{border-left-color:var(--ok); background:linear-gradient(90deg,rgba(123,216,143,.08),rgba(255,255,255,.02))}
.ev .ei{width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:17px; background:radial-gradient(circle at 50% 35%,rgba(232,176,75,.25),rgba(107,63,160,.2));
  border:1px solid rgba(232,176,75,.35)}
.ev b{display:block; font-size:14px} .ev small{font-size:12.5px; font-weight:600; color:var(--gold)}
.ev.live small{color:var(--ok)}

/* notícias (linha do tempo) */
.news{padding:6px 22px 8px}
.ni{position:relative; padding:20px 0 20px 30px; border-bottom:1px solid var(--line)}
.ni:last-child{border-bottom:0}
.ni::before{content:""; position:absolute; left:5px; top:0; bottom:0; width:1px; background:linear-gradient(180deg,rgba(232,176,75,.45),rgba(255,255,255,.08))}
.ni:first-child::before{top:30px}
.ni::after{content:""; position:absolute; left:0; top:25px; width:11px; height:11px; border-radius:50%; border:2px solid var(--gold-dark); background:var(--bg)}
.ni:first-child::after{background:var(--gold); border-color:var(--gold); box-shadow:0 0 10px var(--gold)}
.tags{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px}
.tg{font:800 10.5px var(--ui); letter-spacing:.1em; text-transform:uppercase; padding:3px 10px; border-radius:999px; border:1px solid rgba(232,176,75,.45); color:var(--gold)}
.tg.new{background:var(--gold); color:#2a1a05; border-color:var(--gold)}
.tg.ev{border-color:rgba(123,216,143,.5); color:var(--ok)}
.tags time{font-size:12.5px; color:var(--dim)}
.ni h4{font-size:21px; font-weight:700; margin-bottom:6px; line-height:1.3}
.ni p{color:var(--muted); font-size:15px}
.ni .more{display:inline-block; margin-top:10px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
.ni .more::after{content:" \203A"}

/* descobre */
.disc{display:grid; grid-template-columns:230px 1fr; min-height:340px}
.disc-nav{padding:14px 12px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:4px}
.disc-nav button{all:unset; cursor:pointer; display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:7px; color:var(--muted); font-size:14px; font-weight:600}
.disc-nav button::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--dim)}
.disc-nav button:hover{color:var(--text); background:rgba(255,255,255,.03)}
.disc-nav button.on{color:var(--gold-light); background:rgba(232,176,75,.10)}
.disc-nav button.on::before{background:var(--gold); box-shadow:0 0 8px var(--gold)}
.disc-view{position:relative; margin:14px; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:#09070d}
.disc-view img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s, transform 6s ease}
.disc-view img.on{opacity:1; transform:scale(1.04)}
.disc-view .cap{position:absolute; left:0; right:0; bottom:0; padding:60px 26px 22px; background:linear-gradient(180deg,transparent,rgba(9,7,13,.92) 55%)}
.disc-view .cap h4{font-family:var(--display); font-size:24px; font-weight:700; margin-bottom:4px}
.disc-view .cap p{color:#d4ccdf; font-size:14.5px; max-width:520px}

/* passos compactos */
.steps3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:16px}
.steps3 .s{padding:18px 14px; border-radius:8px; background:rgba(255,255,255,.025); border:1px solid var(--line); text-align:center}
.steps3 .s .n{width:36px; height:36px; margin:0 auto 10px; border-radius:50%; display:grid; place-items:center; font:700 16px var(--display); color:#2a1a05;
  background:linear-gradient(180deg,var(--gold-top),var(--gold) 55%,var(--gold-dark))}
.steps3 .s b{display:block; margin-bottom:4px} .steps3 .s p{color:var(--muted); font-size:13.5px}

.hero.compact{padding:40px 20px 54px}
.hero.compact .emblem{width:min(250px,56vw)}

@media (max-width:980px){
  .dash{grid-template-columns:1fr}
  .dash .col.side{order:2}
}
@media (max-width:640px){
  .disc{grid-template-columns:1fr}
  .disc-nav{flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--line)}
  .disc-view{min-height:240px}
  .steps3{grid-template-columns:1fr}
  .ni h4{font-size:18px}
}