/* ============================================================
   BRAXTRADE · Componentes de seção (reutilizáveis)
   ============================================================ */

/* ---------- HERO carrossel de imagens ---------- */
.hero{position:relative; background:var(--green-950); overflow:hidden}
.hc-track{position:relative; width:100%; aspect-ratio:1672/941; max-height:90vh; background:var(--green-950)}
.hc-slide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease); pointer-events:none}
.hc-slide.active{opacity:1; pointer-events:auto}
.hc-slide img{width:100%; height:100%; object-fit:cover; object-position:center; display:block}
/* leve scrim no topo p/ integrar o header translúcido */
.hc-scrim-top{position:absolute; left:0; right:0; top:0; height:120px; z-index:4; background:linear-gradient(180deg, rgba(4,7,15,.55), transparent); pointer-events:none}

.hc-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:52px; height:52px; border-radius:50%;
  background:rgba(7,12,28,.42); border:1px solid rgba(236,214,147,.35); color:var(--cream); backdrop-filter:blur(6px);
  display:grid; place-items:center; cursor:pointer; transition:opacity .3s, background .25s, transform .25s; opacity:0}
.hero:hover .hc-arrow{opacity:.9}
.hc-arrow:hover{background:rgba(46,123,255,.55); border-color:var(--blue-bright)}
.hc-arrow.prev{left:20px} .hc-arrow.next{right:20px}
.hc-arrow svg{width:22px; height:22px}

.hc-bottom{position:absolute; left:0; right:0; bottom:0; z-index:6; display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:0 20px 30px; background:linear-gradient(transparent, rgba(4,7,15,.5)); pointer-events:none}
.hc-bottom > *{pointer-events:auto}
.hc-dots{display:flex; gap:9px}
.hc-dot{width:9px; height:9px; border-radius:50%; background:rgba(236,232,220,.45); border:0; cursor:pointer; padding:0; transition:.3s var(--ease)}
.hc-dot.active{background:var(--gold); width:30px; border-radius:6px}
.hc-cta{box-shadow:0 18px 50px rgba(4,7,15,.5), var(--sh-gold)}

/* badge mono reutilizável (ex.: dias de webinar na Academia) */
.fcard-ic{width:24px; height:24px; border-radius:6px; background:rgba(203,163,78,.18); display:grid; place-items:center; font-size:.7rem; color:var(--gold-400); font-family:var(--f-mono); font-weight:600}

/* progress de autoplay */
.hc-progress{position:absolute; left:0; bottom:0; height:3px; background:linear-gradient(90deg,var(--gold),var(--blue)); width:0; z-index:6; box-shadow:0 0 12px rgba(203,163,78,.6)}

/* ---------- franja de métricas sob o hero ---------- */
.hero-stats{background:var(--green-900); border-bottom:1px solid var(--line-dark)}
.hero-stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-block:30px}
.hero-stats .hm{display:flex; flex-direction:column; gap:3px; text-align:center; position:relative}
.hero-stats .hm + .hm::before{content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%); height:38px; width:1px; background:var(--line-dark)}
.hero-stats .hm b{font-family:var(--f-display); font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--cream); font-weight:800; letter-spacing:-.02em}
.hero-stats .hm b .u{color:var(--gold-400); font-size:.6em; font-weight:700}
.hero-stats .hm span{font-size:.82rem; color:var(--t-on-dark-mut); letter-spacing:.02em}

@media(max-width:760px){
  .hc-track{aspect-ratio:auto; height:74vh; min-height:460px}
  .hc-slide img{object-position:24% center}
  .hc-arrow{display:none}
  .hero-stats .wrap{grid-template-columns:repeat(2,1fr); gap:26px 12px}
  .hero-stats .hm:nth-child(odd)::before{display:none}
}

/* ---------- generic internal page hero ---------- */
.phero{position:relative; background:linear-gradient(160deg,var(--green-900),var(--green-950)); color:var(--t-on-dark); padding-top:calc(var(--header-h) + var(--ticker-h) + 70px); padding-bottom:70px; overflow:hidden}
.phero::after{content:""; position:absolute; right:-10%; top:-30%; width:60%; height:160%; background:radial-gradient(circle, rgba(199,163,107,.14), transparent 60%); pointer-events:none}
.phero h1{color:var(--cream); max-width:18ch}
.phero .lead{margin-top:20px}
.phero .eyebrow{margin-bottom:18px}
.crumbs{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em; color:var(--t-on-dark-mut); margin-bottom:22px; text-transform:uppercase}
.crumbs a{color:var(--gold-400)}

/* ---------- trust strip ---------- */
.trust{background:var(--green-950); border-top:1px solid rgba(214,200,160,.1); border-bottom:1px solid rgba(214,200,160,.1)}
.trust .wrap{display:flex; flex-wrap:wrap; gap:18px 50px; justify-content:space-between; align-items:center; padding-block:26px}
.trust .ti{display:flex; align-items:center; gap:12px; color:var(--t-on-dark-mut); font-size:.9rem}
.trust .ti b{color:var(--cream); font-family:var(--f-display); font-weight:700}
.trust .ti .tic{width:34px; height:34px; border-radius:9px; background:rgba(199,163,107,.14); display:grid; place-items:center; color:var(--gold-400); flex:0 0 auto}
.trust .ti svg{width:18px;height:18px}

/* ---------- market panel (live table) ---------- */
.mkt{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--paper); box-shadow:var(--sh-md)}
.mkt-tabs{display:flex; gap:4px; padding:14px 16px; border-bottom:1px solid var(--line); overflow-x:auto}
.mkt-tab{flex:0 0 auto; border:1px solid transparent; background:none; color:var(--t-muted); font-weight:600; font-size:.86rem; padding:.5em 1em; border-radius:9px; transition:.2s}
.mkt-tab:hover{color:var(--t-strong); background:var(--cream)}
.mkt-tab.active{background:var(--green-800); color:var(--cream)}
.mkt-table{width:100%; border-collapse:collapse}
.mkt-table th{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t-muted); text-align:right; padding:12px 18px; font-weight:500; border-bottom:1px solid var(--line)}
.mkt-table th:first-child{text-align:left}
.mkt-table td{padding:14px 18px; border-bottom:1px solid var(--line); text-align:right; font-size:.92rem}
.mkt-table tr:last-child td{border-bottom:0}
.mkt-table tr{transition:background .2s}
.mkt-table tbody tr:hover{background:var(--cream)}
.mkt-name{display:flex; align-items:center; gap:11px; text-align:left}
.mkt-ic{width:30px;height:30px;border-radius:8px;background:var(--cream-2);display:grid;place-items:center;font-family:var(--f-mono);font-size:.6rem;font-weight:600;color:var(--green-700);flex:0 0 auto}
.mkt-name b{display:block; color:var(--t-strong); font-weight:700; font-size:.9rem}
.mkt-name span{display:block; color:var(--t-muted); font-size:.74rem}
.mkt-px{font-family:var(--f-mono); color:var(--t-strong); font-weight:500}
.mkt-ch{font-family:var(--f-mono); font-weight:600; font-size:.86rem}
.mkt-ch .chip{display:inline-block; padding:.2em .55em; border-radius:7px; min-width:74px}
.chip.up{background:var(--up-soft); color:var(--up)} .chip.down{background:var(--down-soft); color:var(--down)}
.mkt-spark{width:88px;height:30px}
.mkt-buy{padding:.42em .9em; border-radius:8px; background:var(--green-800); color:var(--cream); font-weight:700; font-size:.8rem; border:0}
.mkt-buy:hover{background:var(--green-700)}
@media(max-width:760px){.mkt-hidem{display:none}}

/* ---------- feature cards ---------- */
.feat{display:flex; flex-direction:column; gap:14px}
.feat-ic{width:52px; height:52px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(150deg,var(--green-700),var(--green-900)); color:var(--gold-400); box-shadow:var(--sh-sm)}
.feat-ic svg{width:24px;height:24px}
.feat h3{font-size:1.18rem}
.feat p{font-size:.95rem; color:var(--t-muted); line-height:1.6}
.card-dark .feat p{color:var(--t-on-dark-mut)}
.card-dark .feat-ic{background:rgba(199,163,107,.14)}

/* ---------- numbered steps ---------- */
.step{position:relative; padding-left:0}
.step-n{font-family:var(--f-display); font-size:2.4rem; font-weight:800; color:var(--gold); line-height:1; letter-spacing:-.04em}
.step h3{margin:14px 0 8px; font-size:1.2rem}
.step p{color:var(--t-muted); font-size:.94rem}
.section-dark .step p{color:var(--t-on-dark-mut)}

/* ---------- account cards ---------- */
.acct{display:grid; gap:22px; grid-template-columns:repeat(3,1fr)}
.acct-card{display:flex; flex-direction:column; position:relative; padding:32px 28px}
.acct-card.feature{background:linear-gradient(165deg,var(--green-800),var(--green-950)); border-color:var(--gold); color:var(--t-on-dark)}
.acct-card.feature h3,.acct-card.feature .acct-price{color:var(--cream)}
.acct-badge{position:absolute; top:-12px; left:28px; background:linear-gradient(180deg,var(--gold-400),var(--gold)); color:var(--green-900); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.4em .9em; border-radius:100px; font-family:var(--f-mono)}
.acct-name{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-700)}
.acct-card.feature .acct-name{color:var(--gold-400)}
.acct-price{font-family:var(--f-display); font-size:2.6rem; font-weight:800; margin:14px 0 4px; letter-spacing:-.03em}
.acct-price small{font-size:.9rem; font-weight:500; color:var(--t-muted); letter-spacing:0}
.acct-list{list-style:none; padding:0; margin:22px 0; display:flex; flex-direction:column; gap:12px; flex:1}
.acct-list li{display:flex; gap:10px; font-size:.92rem; align-items:flex-start}
.acct-list li::before{content:""; width:18px;height:18px;flex:0 0 auto; margin-top:2px; background:var(--gold); -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2l-3.5-3.5L4 14.2 9 19 20 8l-1.4-1.4z'/%3E%3C/svg%3E"); mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2l-3.5-3.5L4 14.2 9 19 20 8l-1.4-1.4z'/%3E%3C/svg%3E")}

/* ---------- platform mock ---------- */
.pmock{background:linear-gradient(165deg,#0e1c44,#070c1c); border:1px solid rgba(214,200,160,.18); border-radius:18px; overflow:hidden; box-shadow:var(--sh-lg)}
.pmock-bar{display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid rgba(214,200,160,.12); background:rgba(0,0,0,.2)}
.pmock-bar .d{width:11px;height:11px;border-radius:50%}
.pmock-body{display:grid; grid-template-columns:1.6fr 1fr; min-height:340px}
.pmock-chart{position:relative; padding:18px; border-right:1px solid rgba(214,200,160,.1)}
.pmock-side{padding:18px; display:flex; flex-direction:column; gap:12px}
.pmock-sym{display:flex; justify-content:space-between; align-items:center; color:var(--cream)}
.pmock-sym b{font-family:var(--f-display); font-size:1.3rem}
.pmock-px{font-family:var(--f-mono); font-size:2rem; color:var(--cream); font-weight:500}
.pmock-order{display:flex; gap:8px; margin-top:auto}
.pmock-order .b{flex:1; text-align:center; padding:.8em; border-radius:10px; font-weight:800; font-family:var(--f-body)}
.pmock-order .buy{background:var(--up); color:#04130d}
.pmock-order .sell{background:var(--down); color:#fff}
.pmock-stat{display:flex; justify-content:space-between; font-size:.84rem; color:var(--t-on-dark-mut); padding:.4em 0; border-bottom:1px solid rgba(214,200,160,.08)}
.pmock-stat b{color:var(--cream); font-family:var(--f-mono); font-weight:500}

/* ---------- CTA band ---------- */
.cta-band{position:relative; background:linear-gradient(135deg,var(--green-800),var(--green-950)); color:var(--cream); border-radius:var(--radius-lg); overflow:hidden; padding:clamp(40px,6vw,72px); text-align:center}
.cta-band::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% -20%, rgba(199,163,107,.28), transparent 60%)}
.cta-band > *{position:relative}
.cta-band h2{color:var(--cream); margin-bottom:16px}
.cta-band .lead{margin:0 auto 30px; color:rgba(237,233,220,.7)}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ---------- prize / mundial ---------- */
.prize{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:30px 20px; border-radius:var(--radius-lg); background:var(--paper); border:1px solid var(--line)}
.prize .rk{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.14em; color:var(--gold-700); text-transform:uppercase}
.prize .amt{font-family:var(--f-display); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; color:var(--green-800); letter-spacing:-.03em}
.prize.gold-1{background:linear-gradient(165deg,var(--green-800),var(--green-950)); border-color:var(--gold)}
.prize.gold-1 .amt{color:var(--gold-400)} .prize.gold-1 .rk{color:var(--gold-400)} .prize.gold-1 .desc{color:var(--t-on-dark-mut)}
.prize .desc{font-size:.86rem; color:var(--t-muted)}

@media(max-width:860px){.acct{grid-template-columns:1fr; max-width:440px; margin-inline:auto} .pmock-body{grid-template-columns:1fr}}