/* ============================================================
   BRAXTRADE · Home v2 — seções no estilo dos mockups oficiais
   (Mercados split, categorias, faixa de cotações, passos 01-04,
    contas v2, Copa com ranking ao vivo)
   ============================================================ */

/* ---------- layout split ---------- */
.split-sec{display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(30px,4.5vw,64px); align-items:center}
@media(max-width:900px){.split-sec{grid-template-columns:1fr}}

.link-gold{color:var(--gold-400); font-weight:700; display:inline-flex; align-items:center; gap:.5em; margin-top:22px; transition:color .2s}
.link-gold:hover{color:var(--gold-300)}
.link-gold svg{width:18px;height:18px}

/* ---------- categorias ---------- */
.catgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.catcard{display:flex; flex-direction:column; gap:12px; padding:22px 20px; border-radius:16px;
  background:linear-gradient(168deg, rgba(22,36,76,.45), rgba(7,11,26,.9));
  border:1px solid rgba(255,255,255,.08); transition:transform .35s var(--ease), border-color .35s, box-shadow .35s}
.catcard:hover{transform:translateY(-4px); border-color:rgba(203,163,78,.5); box-shadow:0 0 36px rgba(203,163,78,.12)}
.catcard .cic{width:54px;height:54px;border-radius:50%; display:grid; place-items:center; color:var(--gold-400); flex:0 0 auto;
  background:radial-gradient(120% 120% at 30% 20%, rgba(46,123,255,.18), rgba(8,14,32,.6));
  border:1px solid rgba(203,163,78,.4); box-shadow:0 0 18px rgba(203,163,78,.12)}
.catcard .cic svg{width:24px;height:24px}
.catcard .ct{display:flex; flex-direction:column; gap:3px}
.catcard b{font-family:var(--f-display); font-size:1.05rem; color:var(--cream); font-weight:700}
.catcard .ct span{font-size:.85rem; color:var(--t-on-dark-mut); line-height:1.45}
.catcard .chev{display:none}
@media(max-width:760px){
  .catgrid{grid-template-columns:1fr; gap:11px}
  .catcard{flex-direction:row; align-items:center; gap:15px; padding:15px 16px; border-radius:14px}
  .catcard .cic{width:46px;height:46px; border-radius:12px}
  .catcard .chev{display:block; margin-left:auto; color:var(--t-muted); flex:0 0 auto; width:18px;height:18px}
}

/* ---------- faixa de cotações ---------- */
.qstrip{display:grid; grid-template-columns:repeat(6,1fr); margin-top:28px; border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(16,28,64,.45), rgba(6,10,22,.9))}
.qs{display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-right:1px solid rgba(255,255,255,.07)}
.qs:last-child{border-right:0}
.qs-h{display:flex; align-items:center; gap:7px; font-weight:700; color:var(--cream); font-size:.86rem}
.qs-dot{width:8px;height:8px;border-radius:50%; flex:0 0 auto}
.qs-px{font-family:var(--f-mono); color:var(--cream); font-size:1.02rem}
.qs-row{display:flex; align-items:flex-end; justify-content:space-between; gap:8px}
.qs svg.spark{width:72px;height:26px}
.qs-ch{font-family:var(--f-mono); font-size:.78rem; font-weight:600}
@media(max-width:980px){
  .qstrip{grid-template-columns:repeat(3,1fr)}
  .qs:nth-child(n+4){display:none}
}
@media(max-width:560px){
  .qs{padding:13px 12px}
  .qs svg.spark{width:100%}
  .qs-row{flex-direction:column; align-items:flex-start; gap:4px}
}

/* ---------- passos 01-04 ---------- */
.steps2{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:52px; position:relative}
.steps2::before{content:""; position:absolute; top:0; left:8%; right:8%; border-top:1px dashed rgba(203,163,78,.45)}
.step2{position:relative; margin-top:34px; padding:50px 22px 24px; border-radius:18px;
  background:linear-gradient(168deg, rgba(22,36,76,.45), rgba(7,11,26,.9)); border:1px solid rgba(255,255,255,.08)}
.step2 .sic{position:absolute; top:-34px; left:22px; width:66px;height:66px;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%, rgba(46,123,255,.2), #0a1228);
  border:1px solid rgba(203,163,78,.5); box-shadow:0 0 26px rgba(203,163,78,.2); display:grid; place-items:center; color:var(--gold-300)}
.step2 .sic svg{width:26px;height:26px}
.step2 .sn{position:absolute; top:12px; right:16px; font-family:var(--f-mono); font-size:.75rem; color:var(--gold-400);
  border:1px solid rgba(203,163,78,.4); border-radius:50%; width:34px;height:34px; display:grid; place-items:center; background:rgba(8,14,32,.7)}
.step2 h3{font-size:1.15rem; margin:0 0 8px; color:var(--cream)}
.step2 p{font-size:.92rem; color:var(--t-on-dark-mut)}
@media(max-width:900px){
  .steps2{grid-template-columns:1fr; gap:14px; padding-left:20px; margin-top:30px}
  .steps2::before{top:10px; bottom:10px; left:0; right:auto; border-top:0; border-left:1px dashed rgba(203,163,78,.45)}
  .step2{margin-top:0; padding:18px; display:flex; gap:16px; align-items:flex-start}
  .step2 .sic{position:static; flex:0 0 auto; width:56px;height:56px; border-radius:14px; box-shadow:none}
  .step2 .st{flex:1; min-width:0; padding-right:30px}
}

.notecard{display:flex; align-items:center; gap:14px; margin-top:30px; padding:16px 20px; border-radius:14px;
  background:linear-gradient(168deg, rgba(22,36,76,.45), rgba(7,11,26,.9)); border:1px solid rgba(255,255,255,.08); color:var(--t-on-dark-mut)}
.notecard .nic{width:42px;height:42px;border-radius:50%; display:grid; place-items:center; color:var(--gold-300);
  border:1px solid rgba(203,163,78,.4); flex:0 0 auto}
.notecard .nic svg{width:20px;height:20px}
.notecard .chev{margin-left:auto; color:var(--gold-400); flex:0 0 auto; width:18px;height:18px}

/* ---------- contas v2 ---------- */
.acct2{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
.acct2 .ac{position:relative; display:flex; flex-direction:column; padding:30px 26px; border-radius:20px;
  background:linear-gradient(168deg, rgba(22,36,76,.5), rgba(7,11,26,.92)); border:1px solid rgba(255,255,255,.09);
  transition:transform .35s var(--ease), box-shadow .35s}
.acct2 .ac:hover{transform:translateY(-4px)}
.ac-head{display:flex; align-items:center; gap:14px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:18px}
.ac-ic{width:48px;height:48px;border-radius:13px; display:grid; place-items:center; color:var(--gold-300); flex:0 0 auto;
  border:1px solid rgba(203,163,78,.45); background:radial-gradient(120% 120% at 30% 20%, rgba(46,123,255,.18), rgba(8,14,32,.6))}
.ac-ic svg{width:22px;height:22px}
.ac-head b{font-family:var(--f-display); font-size:1.3rem; color:var(--cream); font-weight:800; display:block; line-height:1.1}
.ac-head span{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.18em; color:var(--t-muted); text-transform:uppercase}
.ac-dep{margin-bottom:14px}
.ac-dep span{display:block; font-size:.8rem; color:var(--t-muted)}
.ac-dep b{font-family:var(--f-display); font-size:1.9rem; color:var(--gold-400); font-weight:800; letter-spacing:-.02em}
.ac-list{list-style:none; margin:0 0 24px; padding:0; flex:1}
.ac-list li{display:flex; gap:11px; align-items:center; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.9rem; color:var(--t-on-dark-mut)}
.ac-list li:last-child{border-bottom:0}
.ac-list li svg{width:18px;height:18px; color:var(--gold-400); flex:0 0 auto}
.ac.popular{border-color:rgba(91,156,255,.6); box-shadow:0 0 0 1px rgba(91,156,255,.22), 0 0 50px rgba(46,123,255,.18)}
.ac-badge{position:absolute; top:-14px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:.45em;
  background:linear-gradient(180deg,var(--gold-300),var(--gold)); color:#081022; font-size:.66rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; padding:.55em 1.1em; border-radius:100px; font-family:var(--f-mono); white-space:nowrap}
.ac .btn{width:100%}
@media(max-width:900px){.acct2{grid-template-columns:1fr; max-width:480px; margin-inline:auto; gap:26px}}

/* ---------- Copa: grid + ranking ---------- */
.copa-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(30px,4vw,60px); align-items:start}
@media(max-width:980px){.copa-grid{grid-template-columns:1fr}}
.prize4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:30px}
@media(max-width:760px){.prize4{grid-template-columns:repeat(2,1fr)}}
.pz{display:flex; flex-direction:column; gap:5px; text-align:center; padding:18px 12px; border-radius:14px;
  background:linear-gradient(168deg, rgba(22,36,76,.45), rgba(7,11,26,.9)); border:1px solid rgba(255,255,255,.08)}
.pz .n{font-family:var(--f-display); font-weight:800; font-size:1.45rem; color:var(--cream); line-height:1}
.pz .n small{font-size:.46em; color:var(--t-muted); font-family:var(--f-mono); letter-spacing:.16em; display:block; margin-top:4px}
.pz .v{font-family:var(--f-display); font-weight:800; color:var(--gold-400); font-size:1.12rem; margin-top:4px}
.pz .d{font-size:.74rem; color:var(--t-on-dark-mut); line-height:1.4}
.pz.first{border-color:var(--gold); box-shadow:0 0 30px rgba(203,163,78,.18)}
.copa-feats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:20px}
@media(max-width:760px){.copa-feats{grid-template-columns:repeat(2,1fr)}}
.cfeat{display:flex; gap:10px; align-items:flex-start; padding:14px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07)}
.cfeat svg{width:18px;height:18px; color:var(--gold-400); flex:0 0 auto; margin-top:2px}
.cfeat b{display:block; font-size:.82rem; color:var(--cream)}
.cfeat span{font-size:.74rem; color:var(--t-muted); line-height:1.45}

.rankcard{border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(168deg, rgba(18,30,68,.55), rgba(6,10,22,.95)); box-shadow:0 24px 60px rgba(2,5,12,.5)}
.rk-head{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid rgba(255,255,255,.09)}
.rk-head b{font-family:var(--f-mono); color:var(--cream); letter-spacing:.08em; font-size:.84rem}
.rk-live{display:inline-flex; align-items:center; gap:.55em; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; color:var(--up)}
.rk-cols{display:grid; grid-template-columns:46px 1fr auto; gap:12px; padding:10px 20px; border-bottom:1px solid rgba(255,255,255,.07);
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.12em; color:var(--t-muted); text-transform:uppercase}
.rk-row{display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:12px; padding:11px 20px; border-bottom:1px solid rgba(255,255,255,.06); font-size:.9rem}
.rk-pos{width:27px;height:27px;border-radius:50%; display:grid; place-items:center; font-family:var(--f-mono); font-size:.72rem; font-weight:700; background:rgba(255,255,255,.1); color:var(--cream)}
.rk-pos.g{background:linear-gradient(180deg,#F3DA8B,#C9A24B); color:#081022}
.rk-pos.s{background:linear-gradient(180deg,#E8ECF3,#9AA4B5); color:#081022}
.rk-pos.b{background:linear-gradient(180deg,#E3A877,#A96A3C); color:#081022}
.rk-row b{color:var(--cream); font-weight:600}
.rk-pts{font-family:var(--f-mono); color:var(--up); font-size:.82rem; white-space:nowrap}
.rk-row.you{border:1px solid rgba(203,163,78,.55); border-radius:12px; margin:8px 12px; padding:11px 8px 11px 8px; background:rgba(203,163,78,.07)}
.rk-row.you .rk-pos{border:1px solid var(--gold); background:transparent; color:var(--gold-300)}
.rk-foot{padding:6px 20px 16px}
.rk-foot .link-gold{margin-top:8px}