/* ============================================================
   BRAXTRADE · Chrome (ticker / header / mega / mobile / footer)
   ============================================================ */

.brax-top{position:sticky; top:0; z-index:900}

/* ---------- TICKER ---------- */
.ticker{
  height:var(--ticker-h); display:flex; align-items:center; gap:0;
  background:var(--green-950); color:var(--t-on-dark); overflow:hidden;
  border-bottom:1px solid rgba(214,200,160,.1);
  transition:height .35s var(--ease), opacity .3s;
}
.brax-top.scrolled .ticker{height:0; opacity:0; border-color:transparent}
.tk-live{
  display:flex; align-items:center; gap:.5em; flex:0 0 auto; height:100%;
  padding:0 16px; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; font-weight:600;
  color:var(--gold-400); background:linear-gradient(90deg,var(--green-900),transparent); z-index:2;
}
.tk-viewport{overflow:hidden; flex:1; height:100%; display:flex; align-items:center; -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.tk-track{display:flex; gap:0; white-space:nowrap; animation:tkScroll 60s linear infinite; will-change:transform}
.brax-top:hover .tk-track{animation-play-state:paused}
@keyframes tkScroll{to{transform:translateX(-50%)}}
.tk-item{display:inline-flex; align-items:center; gap:.55em; padding:0 22px; font-size:.8rem; border-right:1px solid rgba(214,200,160,.1)}
.tk-sym{color:var(--t-on-dark-mut); font-weight:600; letter-spacing:.02em}
.tk-px{color:var(--cream); font-size:.82rem}
.tk-ch{font-family:var(--f-mono); font-size:.74rem; font-weight:500}
.flash-up{animation:fUp .6s} .flash-down{animation:fDown .6s}
@keyframes fUp{0%{color:var(--up)}100%{}} @keyframes fDown{0%{color:var(--down)}100%{}}

/* ---------- HEADER ---------- */
.hdr{
  height:var(--header-h);
  background:rgba(7,12,28,.72); backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(214,200,160,.12);
  transition:background .35s, height .35s var(--ease), border-color .35s;
}
.brax-top.scrolled .hdr{background:rgba(5,9,20,.94); height:64px}
.hdr-inner{height:100%; display:flex; align-items:center; gap:28px}
.brand{flex:0 0 auto; display:flex; align-items:center}
.brand img{height:42px; width:auto; transition:height .35s var(--ease)}
.brax-top.scrolled .brand img{height:34px}
.nav{display:flex; align-items:center; gap:4px; margin-left:8px}
.nav-item{position:relative}
.nav-link{
  display:inline-flex; align-items:center; gap:.4em; background:none; border:0;
  color:var(--t-on-dark); font-family:var(--f-body); font-weight:600; font-size:.93rem;
  padding:.6em .82em; border-radius:9px; transition:color .25s, background .25s; position:relative;
}
.nav-link:hover{color:var(--cream); background:rgba(237,233,220,.07)}
.nav-link svg{opacity:.6; transition:transform .3s}
.has-mega:hover .nav-link svg{transform:rotate(180deg)}
.nav-link.is-active{color:var(--gold-400)}
.nav-link.is-active::after{content:""; position:absolute; left:.82em; right:.82em; bottom:.2em; height:2px; background:var(--gold); border-radius:2px}
.nav-flag{color:var(--gold-300)}
.nav-flag::before{content:"●"; font-size:.5em; color:var(--gold); margin-right:.5em; vertical-align:middle; animation:livepulse 2s infinite}
.hdr-cta{margin-left:auto; display:flex; align-items:center; gap:14px; flex:0 0 auto}
.hdr-cta .login{font-size:.9rem}

/* ---------- nav typography (mockup: caps) ---------- */
.nav-link{text-transform:uppercase; font-size:.8rem; letter-spacing:.07em; font-weight:700}
.hdr-cta .login{text-transform:uppercase; font-size:.78rem; letter-spacing:.07em}

/* ---------- dropdowns por item ---------- */
.dd{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(8px);
  width:295px; padding:18px 16px 16px;
  background:linear-gradient(170deg, rgba(13,23,52,.98), rgba(5,9,20,.99));
  border:1px solid rgba(203,163,78,.28); border-radius:16px;
  box-shadow:0 30px 70px rgba(2,5,12,.7), 0 0 44px rgba(46,123,255,.08), inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.has-dd:hover .dd{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.dd::before{content:""; position:absolute; top:-14px; left:0; right:0; height:14px}
.has-dd:hover .nav-link svg{transform:rotate(180deg)}
.dd-t{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.22em; color:var(--gold-400); margin:0 6px 12px}
.dd-list{display:flex; flex-direction:column; gap:2px}
.dd-it{display:flex; gap:12px; align-items:center; padding:8px; border-radius:10px; transition:background .2s}
.dd-it:hover{background:rgba(255,255,255,.05)}
.dd-ic{width:36px;height:36px;border-radius:10px; display:grid; place-items:center; color:var(--gold-400); flex:0 0 auto;
  background:rgba(46,123,255,.1); border:1px solid rgba(203,163,78,.3)}
.dd-ic svg{width:18px;height:18px}
.dd-it b{display:block; color:var(--cream); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; font-weight:700}
.dd-it em{display:block; font-style:normal; color:var(--t-on-dark-mut); font-size:.76rem; margin-top:1px}
.dd-cta{display:block; text-align:center; margin-top:14px; padding:.72em 1em; border:1px solid rgba(203,163,78,.55); border-radius:10px;
  color:var(--gold-300); font-weight:700; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; transition:.2s}
.dd-cta:hover{background:rgba(203,163,78,.12); box-shadow:0 0 24px rgba(203,163,78,.2)}

/* contas no dropdown */
.dd-acct{display:flex; gap:12px; align-items:center; padding:11px 12px; border-radius:12px; margin-bottom:6px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); transition:.2s}
.dd-acct:hover{border-color:rgba(203,163,78,.45)}
.dd-acct.blue{background:linear-gradient(135deg, rgba(46,123,255,.18), rgba(8,14,32,.6)); border-color:rgba(91,156,255,.4)}
.dd-medal{width:34px;height:34px;border-radius:50%; display:grid; place-items:center; flex:0 0 auto; color:#081022}
.dd-acct.blue .dd-medal{background:linear-gradient(180deg,#7AB0FF,#2E7BFF); color:#04101f}
.dd-acct.gold .dd-medal{background:linear-gradient(180deg,#F3DA8B,#C9A24B)}
.dd-acct.dark .dd-medal{background:linear-gradient(180deg,#6B7280,#374151); color:#E5E7EB}
.dd-medal svg{width:18px;height:18px}
.dd-acct b{display:block; color:var(--cream); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; font-weight:700}
.dd-acct em{display:block; font-style:normal; color:var(--t-on-dark-mut); font-size:.7rem}
.dd-acct strong{display:block; color:var(--gold-300); font-family:var(--f-mono); font-size:.84rem; margin-top:1px}

/* copa promo */
.dd-promo{display:block}
.dd-promo-img{display:block; height:170px; border-radius:12px; background-size:cover; background-position:center 24%;
  border:1px solid rgba(203,163,78,.35); box-shadow:0 12px 30px rgba(2,5,12,.5)}
.dd-promo p{margin:13px 6px 0; color:var(--t-on-dark-mut); font-size:.85rem; line-height:1.5; text-align:center}

/* burger */
.burger{display:none; width:40px; height:40px; border:0; background:none; flex-direction:column; gap:5px; align-items:center; justify-content:center}
.burger span{width:22px; height:2px; background:var(--cream); border-radius:2px; transition:.3s var(--ease)}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer (card) */
.mobile{position:fixed; inset:0; z-index:960; background:rgba(3,6,12,.66);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s}
.mobile.open{opacity:1; visibility:visible}
.m-panel{position:absolute; top:10px; right:10px; bottom:10px; width:min(370px, calc(100vw - 20px));
  border-radius:20px; background:linear-gradient(170deg,#0c1531,#05080f); border:1px solid rgba(203,163,78,.3);
  box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 60px rgba(46,123,255,.08);
  transform:translateX(110%); transition:transform .42s var(--ease); overflow:hidden}
.mobile.open .m-panel{transform:none}
.m-views{position:relative; height:100%}
.m-view{position:absolute; inset:0; display:flex; flex-direction:column; padding:20px; transition:transform .38s var(--ease), opacity .38s; background:transparent}
.m-view.m-main{transform:none}
.m-panel.subopen .m-main{transform:translateX(-18%); opacity:0; pointer-events:none}
.m-sub{transform:translateX(105%); opacity:0; pointer-events:none}
.m-sub.active{transform:none; opacity:1; pointer-events:auto}
.m-head{display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:10px}
.m-logo{height:30px; width:auto}
.m-head b{font-family:var(--f-mono); font-size:.82rem; letter-spacing:.18em; color:var(--cream)}
.m-close,.m-back{background:none; border:0; color:var(--t-on-dark-mut); width:36px; height:36px; border-radius:10px; display:grid; place-items:center; cursor:pointer; transition:.2s}
.m-close{margin-left:auto}
.m-close:hover,.m-back:hover{background:rgba(255,255,255,.06); color:var(--cream)}
.m-back{margin-left:-8px}
.m-body{flex:1; overflow-y:auto; padding:6px 0}
.mm{display:flex; flex-direction:column}
.mm-it{display:flex; align-items:center; gap:14px; width:100%; background:none; border:0; text-align:left; cursor:pointer;
  color:var(--cream); font-family:var(--f-body); font-weight:700; font-size:.95rem; letter-spacing:.07em; text-transform:uppercase;
  padding:13px 4px; border-bottom:1px solid rgba(255,255,255,.07)}
.mm-it:last-child{border-bottom:0}
.mm-ic{width:36px;height:36px;border-radius:10px; display:grid; place-items:center; color:var(--gold-400); flex:0 0 auto;
  background:rgba(46,123,255,.1); border:1px solid rgba(203,163,78,.3)}
.mm-ic svg{width:18px;height:18px}
.mm-it .mchev{margin-left:auto; color:var(--t-muted); flex:0 0 auto}
.m-cta{display:flex; flex-direction:column; gap:10px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08)}
.m-cta .btn{width:100%}
.m-outline{background:transparent; color:var(--cream); border:1px solid rgba(236,214,147,.4)}
.m-outline:hover{background:rgba(236,214,147,.08)}
.m-foot{margin:6px 0 0; text-align:center; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; color:var(--t-muted)}
.m-sub .dd-cta{margin-top:14px; flex:0 0 auto}
.m-sub .dd-it b{font-size:.86rem}
.m-sub .dd-it{padding:11px 6px; border-bottom:1px solid rgba(255,255,255,.06); border-radius:0}
.m-sub .dd-acct{margin-bottom:8px}

/* ---------- FOOTER ---------- */
.ft{background:var(--green-950); color:var(--t-on-dark-mut); padding-top:72px}
.ft-top{display:grid; grid-template-columns:1.3fr 2fr; gap:60px; padding-bottom:48px}
.ft-logo{height:30px; margin-bottom:18px}
.ft-brand p{font-size:.92rem; line-height:1.6; max-width:38ch}
.ft-social{display:flex; gap:10px; margin-top:22px}
.ft-social a{width:38px; height:38px; border-radius:10px; border:1px solid rgba(214,200,160,.18); display:grid; place-items:center; color:var(--gold-400); transition:.25s}
.ft-social a:hover{background:rgba(199,163,107,.14); transform:translateY(-2px)}
.ft-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.ft-col h4{color:var(--cream); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-family:var(--f-mono); font-weight:500; margin-bottom:16px}
.ft-col a{display:block; color:var(--t-on-dark-mut); font-size:.9rem; padding:.34em 0; transition:color .2s}
.ft-col a:hover{color:var(--gold-400)}
.ft-risk{font-size:.78rem; line-height:1.6; color:rgba(237,233,220,.45); border-top:1px solid rgba(214,200,160,.12); border-bottom:1px solid rgba(214,200,160,.12); padding:22px 0; margin-top:8px}
.ft-risk strong{color:var(--gold-400)}
.ft-risk span{color:rgba(237,233,220,.62)}
.ft-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:24px 0 40px; font-size:.82rem}
.ft-reg{color:var(--gold-700)}

@media(max-width:980px){
  .nav,.hdr-cta .login{display:none}
  .burger{display:flex}
  .ft-top{grid-template-columns:1fr; gap:40px}
}
@media(max-width:560px){
  .ft-cols{grid-template-columns:repeat(2,1fr)}
  .tk-live{display:none}
}