:root{
  --bg:#E8EBEF; --surface:#F7F8FA; --surface2:#FFFFFF; --ink:#10161D; --muted:#566170; --line:#C9D0D8;
  --graphite:#0C1015; --steel:#151B23; --steel2:#1E2630; --plat:#E7EBF0; --silver:#AEB8C4; --gun:#5E6A78;
  --up:#0E9F6E; --down:#D6303F; --upbg:#DFF3EA; --downbg:#F9E3E6; --focus:#8FB3D9;
  --metal:linear-gradient(#F6F8FA,#CDD3DA 47%,#B3BBC5 53%,#E3E7EC);
  --metal-dark:linear-gradient(#2E3742,#1A2029 50%,#12171D 52%,#232B35);
  --edge:linear-gradient(145deg,#FFFFFF,#7D8793 32%,#DDE2E8 58%,#5B6571 82%,#C9CFD6);
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#0A0E13;--surface:#121921;--surface2:#171F29;--ink:#E7EBF0;--muted:#8F9BAA;--line:#26303C;--upbg:#0E2B24;--downbg:#35171D;--up:#26C98F;--down:#F2596B}
}
:root[data-theme="dark"]{--bg:#0A0E13;--surface:#121921;--surface2:#171F29;--ink:#E7EBF0;--muted:#8F9BAA;--line:#26303C;--upbg:#0E2B24;--downbg:#35171D;--up:#26C98F;--down:#F2596B}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 "IBM Plex Sans","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;min-height:100%}
h1,h2,h3{font-family:"Saira Semi Condensed","IBM Plex Sans","Noto Sans Arabic",Arial,sans-serif;font-weight:600;letter-spacing:.005em;margin:0 0 .45em;line-height:1.12}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem)} h2{font-size:clamp(1.6rem,3.2vw,2.3rem)} h3{font-size:1.2rem}
a{color:inherit} button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wrap{max-width:1220px;margin:0 auto;padding:0 20px}
.up{color:var(--up)} .down{color:var(--down)}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
.note{font-size:.84rem;color:var(--muted)}
.plat-text{background:linear-gradient(180deg,#fff,#aeb8c4 55%,#e9edf1);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Botones metalizados ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;border:1.5px solid transparent;border-radius:7px;padding:10px 20px;font-weight:600;color:#0C1015;letter-spacing:.01em;
  background:var(--metal) padding-box,var(--edge) border-box;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 6px 14px -8px rgba(0,0,0,.6);transition:transform .15s,box-shadow .2s}
.btn::after{content:"";position:absolute;top:-10%;left:-80%;width:45%;height:120%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-20deg)}
.btn:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 18px -8px rgba(0,0,0,.65)}
.btn:hover::after{animation:shine .85s ease}
.btn:active{transform:translateY(0)}
@keyframes shine{to{left:140%}}
.btn.dark{color:var(--plat);background:var(--metal-dark) padding-box,var(--edge) border-box;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 14px -8px rgba(0,0,0,.8)}
.btn.dark::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent)}
.btn.sm{padding:6px 13px;font-size:.86rem}
.btn.up{color:#fff;background:linear-gradient(#2ED39A,#0E9F6E 48%,#0A7F58 52%,#18B27F) padding-box,var(--edge) border-box}
.btn.down{color:#fff;background:linear-gradient(#F56E7E,#D6303F 48%,#B02130 52%,#E24557) padding-box,var(--edge) border-box}
@media (prefers-reduced-motion:reduce){.btn:hover::after{animation:none}}

/* ---------- Encabezado ---------- */
header.top{background:linear-gradient(180deg,#10151B,var(--graphite));color:var(--plat);position:sticky;top:0;z-index:40;border-bottom:1px solid #2A333F}
header.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#C9CFD6 50%,transparent);opacity:.55}
.bar{display:flex;align-items:center;gap:16px;padding:10px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;border:0;background:none;padding:0}
.brand .wm{display:block;line-height:1}
.brand .wm b{display:block;font-family:"Saira Semi Condensed",Arial,sans-serif;font-size:1.32rem;letter-spacing:.2em;font-weight:700;background:linear-gradient(180deg,#fff,#9EA9B6 60%,#E3E8ED);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .wm small{display:block;margin-top:4px;font-size:.62rem;letter-spacing:.28em;color:#8F9BAA;white-space:nowrap}
nav.main{display:flex;gap:2px;flex:1;flex-wrap:wrap;justify-content:center}
nav.main button{background:none;border:0;color:#B4BDC8;padding:8px 12px;border-radius:6px;position:relative}
nav.main button:hover,nav.main button.on{color:#fff}
nav.main button.on::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:linear-gradient(90deg,transparent,#E7EBF0,transparent)}
.tools{display:flex;gap:8px;align-items:center}
.lang{background:var(--metal-dark) padding-box,var(--edge) border-box;border:1.5px solid transparent;color:var(--plat);border-radius:7px;padding:6px 8px;width:auto;font-size:.85rem}
.search{display:flex;gap:8px;padding:0 0 12px}
.search input{flex:1;min-width:0;padding:10px 14px;border-radius:7px;border:1px solid #2D3745;background:#0A0E13;color:#fff}
.search input::placeholder{color:#76838F}
#searchOut{display:none;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:0 0 12px}
.ticker{background:#080B0F;border-top:1px solid #1F2833;overflow:hidden;white-space:nowrap;direction:ltr}
.ticker-track{display:inline-flex;gap:34px;padding:8px 0;animation:slide 90s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.tk{font-size:.85rem;color:#AEB8C4} .tk b{color:#fff;margin-right:6px;font-weight:600}
.tk .up{color:#3DDC97} .tk .down{color:#FF7A88}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;color:var(--plat);padding:56px 0 64px;
  background:radial-gradient(1100px 500px at 78% 10%,#232C37 0%,transparent 60%),linear-gradient(180deg,#0D1218,#0A0D11)}
.hero canvas.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .grid{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.hero p.lead{color:#A9B4C0;font-size:1.1rem;max-width:34em}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.emblem{width:84px;height:94px;margin-bottom:18px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.6))}
.bezel{position:relative;border-radius:12px;padding:1.5px;background:var(--edge);box-shadow:0 18px 40px -22px rgba(0,0,0,.9)}
.bezel>.in{border-radius:11px;background:linear-gradient(180deg,var(--steel2),var(--steel));color:var(--plat);padding:16px;height:100%}
.bezel .in .px{font-size:2rem;font-weight:600;font-family:"Saira Semi Condensed",Arial,sans-serif}
.chip{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.78rem;font-weight:600}
.chip.up{background:var(--upbg);color:var(--up)} .chip.down{background:var(--downbg);color:var(--down)}
.flag{display:inline-block;border:1px solid var(--silver);color:var(--silver);border-radius:4px;padding:1px 7px;font-size:.72rem;font-weight:600}
svg.chart{width:100%;height:auto;display:block}
.feed{display:flex;align-items:center;gap:8px;font-size:.78rem;color:#8F9BAA;margin-top:8px}
.dot{width:8px;height:8px;border-radius:50%;background:#C9A227;box-shadow:0 0 0 0 rgba(201,162,39,.6)}
.dot.live{background:#26C98F;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(38,201,143,.55)}100%{box-shadow:0 0 0 9px rgba(38,201,143,0)}}

/* ---------- Secciones ---------- */
section.blk{padding:60px 0;position:relative}
section.blk.alt{background:var(--surface);border-block:1px solid var(--line)}
section.blk.dark{background:linear-gradient(180deg,#0C1015,#10161D);color:var(--plat)}
.sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.sechead p{margin:0;color:var(--muted);max-width:40em}
.dark .sechead p{color:#8F9BAA}
.plate{background:var(--surface2);border:1px solid var(--line);border-radius:10px;position:relative}
.plate::before,.plate::after{content:"";position:absolute;width:12px;height:12px;border:1.5px solid var(--silver);opacity:.7;pointer-events:none}
.plate::before{top:6px;left:6px;border-right:0;border-bottom:0;border-top-left-radius:3px}
.plate::after{bottom:6px;right:6px;border-left:0;border-top:0;border-bottom-right-radius:3px}
.pad{padding:18px}
.mkts{display:grid;grid-template-columns:1.75fr 1fr;gap:20px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:20px}
.card{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:18px;border-top:2px solid var(--silver)}
.card p{color:var(--muted);margin:.3em 0 0}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{background:var(--surface2);border:1px solid var(--line);color:var(--ink);padding:6px 13px;border-radius:6px;font-size:.88rem}
.tabs button.on{color:var(--plat);background:var(--metal-dark) padding-box,var(--edge) border-box;border:1.5px solid transparent}
.heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-bottom:18px}
.tile{border-radius:8px;padding:10px 12px;border:1px solid var(--line);cursor:pointer;background:var(--surface2);text-align:start;color:var(--ink)}
.tile b{display:block;font-size:.9rem} .tile span{font-size:.82rem}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:start;white-space:nowrap}
.tbl th{font-weight:500;color:var(--muted);font-size:.82rem}
.tbl td.r,.tbl th.r{text-align:end}
.scroll{overflow-x:auto;max-width:100%}
tbody tr.clickable{cursor:pointer} tbody tr.clickable:hover{background:var(--bg)}
.flash-up{animation:fu .7s} .flash-down{animation:fd .7s}
@keyframes fu{from{background:var(--upbg)}to{background:transparent}} @keyframes fd{from{background:var(--downbg)}to{background:transparent}}
.news ul{margin:0;padding:0} .news li{padding:10px 0;border-bottom:1px solid var(--line);list-style:none} .news small{color:var(--muted)}

/* mapa */
.mapbox{position:relative;border-radius:12px;overflow:hidden;background:radial-gradient(900px 400px at 50% 40%,#18212B,#0B0F14);border:1px solid #2A333F}
.mapbox canvas{display:block;width:100%;height:auto;aspect-ratio:2/1}
.maptip{position:absolute;pointer-events:none;background:#0C1015;color:#E7EBF0;border:1px solid #5E6A78;border-radius:6px;padding:4px 9px;font-size:.8rem;display:none;white-space:nowrap}

/* plataforma */
.platgrid{display:grid;grid-template-columns:300px 1fr;gap:20px}
.modlist{display:flex;flex-direction:column;gap:6px}
.modlist button{text-align:start;padding:14px 16px;border-radius:8px;border:1px solid var(--line);background:var(--surface2);color:var(--ink)}
.modlist button.on{color:var(--plat);background:var(--metal-dark) padding-box,var(--edge) border-box;border:1.5px solid transparent}
.modlist button b{display:block;font-family:"Saira Semi Condensed",Arial,sans-serif;font-size:1.05rem}
.modpanel h3{margin-bottom:.3em}
.modpanel ul{margin:10px 0 0;padding-inline-start:18px;color:var(--muted)}

/* formularios */
label{display:block;font-size:.85rem;color:var(--muted);margin:12px 0 4px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:7px;background:var(--surface2);color:var(--ink);font:inherit}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.banner{background:var(--upbg);border:1px solid var(--up);padding:10px 14px;border-radius:8px;margin:0 0 14px}
.banner.warn{background:var(--downbg);border-color:var(--down)} .banner.demo{background:transparent;border-color:var(--silver)}
.view{display:none} .view.on{display:block}

/* patrocinadores */
.sponsors{background:linear-gradient(180deg,#0E1318,#0A0D11);border-top:1px solid #2A333F;padding:26px 0 18px;overflow:hidden;color:#AEB8C4}
.sponsors .cap{text-align:center;margin-bottom:14px;font-size:.82rem;letter-spacing:.14em}
.mq{overflow:hidden;direction:ltr;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:inline-flex;gap:18px;white-space:nowrap;animation:mq 45s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sp{min-width:170px;height:64px;display:flex;align-items:center;justify-content:center;padding:0 22px;border-radius:9px;border:1.5px solid transparent;background:linear-gradient(180deg,#1B232C,#10151B) padding-box,var(--edge) border-box;color:#C5CDD6;font-family:"Saira Semi Condensed",Arial,sans-serif;font-size:1.05rem;letter-spacing:.06em}
.sp img{max-height:38px;max-width:140px;object-fit:contain;filter:grayscale(1) brightness(1.3)}
.sp.ph{border-style:dashed;color:#6C7885;font-size:.85rem;font-family:"IBM Plex Sans",Arial,sans-serif;letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}

footer{background:#080B0F;color:#8F9BAA;padding:26px 0 40px;font-size:.85rem}
footer a{color:#C5CDD6}
.shortcuts{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0 12px}

dialog{border:1.5px solid transparent;border-radius:12px;padding:22px;width:min(440px,92vw);background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--edge) border-box;color:var(--ink)}
dialog::backdrop{background:rgba(4,8,12,.7)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#0C1015;color:#fff;border:1px solid #5E6A78;padding:10px 18px;border-radius:8px;display:none;z-index:60;max-width:92vw}
.bottomnav{display:none}

@media (max-width:900px){
  .hero .grid,.two,.mkts,.row,.platgrid{grid-template-columns:1fr}
  nav.main{display:none}
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#0C1015;border-top:1px solid #2A333F;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .bottomnav button{flex:1;background:none;border:0;color:#8F9BAA;padding:10px 4px;border-radius:6px;font-size:.8rem}
  .bottomnav button.on{color:#fff;background:rgba(255,255,255,.08)}
  body{padding-bottom:66px}
  .toast{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  h1{font-size:2rem} .hero{padding:32px 0 40px} section.blk{padding:38px 0}
  .bar{gap:10px} .brand .wm small{display:none} .emblem{width:64px;height:72px}
  .btn{min-height:44px} input,select,textarea{font-size:16px}
  .modlist{flex-direction:row;overflow-x:auto}.modlist button{min-width:150px}
}

.realonly{display:none}
body.real .realonly{display:revert}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
details>summary{margin-bottom:6px}