/* ── Páginas de verificación y track record ───────────────
   Se apoyan en las variables y componentes de styles.css
   (colores, .btn, .tabs, .topbar). Aquí solo lo propio.
   ───────────────────────────────────────────────────────── */

.nav a.is-active { color: var(--gold); }

.gx-page { position: relative; z-index: 1; }
.gx-wrap { max-width: 1180px; margin: 0 auto; padding: 38px clamp(16px, 4vw, 44px) 60px; display: flex; flex-direction: column; gap: 24px; }

.mono { font-family: var(--mono); }
.dim { color: var(--txt-dim); }
.gold { color: var(--gold-hi); }
.up { color: var(--up); }
.down { color: var(--down); }
.strong { font-weight: 700; }

.gx-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #7d778a; }
.gx-lbl.gold { color: #b58c3a; }

.gx-panel { background: linear-gradient(180deg, var(--panel), #0e0d12); border: 1px solid var(--line); border-radius: var(--r); }
.gx-panel h2 { font-size: 18px; display: flex; align-items: center; gap: 10px; }

.gx-chip { font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: .1em; color: var(--txt-dim); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.gx-chip.is-ok { color: var(--up); border-color: rgba(69, 212, 131, .35); }
.gx-chip.is-bad { color: var(--down); border-color: rgba(242, 85, 90, .4); font-size: 10px; }

/* ── cabecera del strike ─────────────────────────────── */

.gx-crumb { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #7d778a; }
.gx-crumb a:hover { color: var(--gold); }
.gx-crumb span { color: var(--txt); }

.gx-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.gx-avatar { width: 60px; height: 60px; border-radius: 14px; background: var(--panel-2); display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 24px; color: var(--gold-dim); flex: none; }
.gx-head-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.gx-titlerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gx-titlerow h1 { font-size: 34px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.gx-ticker { font-family: var(--mono); font-size: 16px; color: var(--gold); }
.gx-head-actions { display: flex; gap: 10px; }

.gx-ca, .gx-copylink { position: relative; display: inline-flex; align-items: center; gap: 9px; max-width: 100%; background: none; border: 0; padding: 0; color: var(--txt-dim); font-family: var(--mono); font-size: 13px; cursor: pointer; text-align: left; }
.gx-ca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-ca:hover, .gx-copylink:hover { color: var(--gold); }
.gx-ca em, .gx-copylink em { font-style: normal; color: var(--up); opacity: 0; transition: opacity .2s; }
.gx-ca.is-done em, .gx-copylink.is-done em { opacity: 1; }

/* ── rejilla principal ───────────────────────────────── */

.gx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 22px; align-items: start; }
.gx-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.gx-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); overflow: hidden; }
.gx-hero-peak, .gx-hero-now { padding: 28px 30px; display: flex; flex-direction: column; gap: 8px; }
.gx-hero-peak { background: radial-gradient(420px 240px at 20% 0%, rgba(233, 182, 79, .14), transparent 70%); }
.gx-hero-now { border-left: 1px solid var(--line); }
.gx-big { font-weight: 800; font-size: clamp(64px, 8vw, 96px); line-height: .9; letter-spacing: -.05em; color: #f0c262; }
.gx-mid { font-weight: 800; font-size: 56px; line-height: .95; letter-spacing: -.04em; }
.gx-sub { font-size: 16px; color: var(--txt-dim); }
.gx-note { font-size: 14px; line-height: 1.5; color: #7d778a; text-wrap: pretty; }

.gx-route { padding: 24px 26px 18px; }
.gx-route-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.gx-route-head span { font-size: 12.5px; color: #7d778a; }
.gx-chart-box { width: 100%; }
.gx-chart { display: block; width: 100%; height: auto; }

/* escala de profundidad: sustituye a la gráfica en pantallas estrechas */
.gx-ladder { display: none; list-style: none; margin: 14px 0 0; padding: 0 0 0 26px; position: relative; }
.gx-ladder::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, #3a3342, var(--gold-dim) 55%, #f0c262); }
.gx-ladder li { position: relative; display: grid; grid-template-columns: 58px auto 1fr; gap: 10px; align-items: baseline; padding: 9px 0; }
.gx-ladder li::before { content: ""; position: absolute; left: -24px; top: 13px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--gold-dim); box-sizing: border-box; }
.gx-ladder li:first-child::before { border-color: #4a4454; }
.gx-ladder li.is-peak::before { left: -27px; top: 10px; width: 18px; height: 18px; background: #f0c262; border: 0; box-shadow: 0 0 0 5px rgba(240, 194, 98, .16), 0 0 20px rgba(240, 194, 98, .5); }
.gx-ladder-min { font-family: var(--mono); font-size: 13px; color: var(--txt-dim); }
.gx-ladder-x { font-weight: 600; font-size: 15px; }
.gx-ladder-mc { font-family: var(--mono); font-size: 13px; color: #7d778a; text-align: right; }
.gx-ladder li.is-peak .gx-ladder-min, .gx-ladder li.is-peak .gx-ladder-x { color: var(--gold-hi); font-weight: 800; }

/* ── tablas ──────────────────────────────────────────── */

.gx-table { background: #0e0d12; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.gx-ms { padding: 0 26px; }
.gx-ms .gx-tr { display: grid; grid-template-columns: 90px 110px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-family: var(--mono); font-size: 15px; }
.gx-ms .gx-tr:last-child { border-bottom: 0; }
.gx-tr.is-peak { color: var(--gold-hi); }
.gx-th { font-family: var(--mono) !important; font-size: 10.5px !important; letter-spacing: .14em; text-transform: uppercase; color: #7d778a; }

/* ── la prueba ───────────────────────────────────────── */

.gx-proof { padding: 22px 24px 8px; }
.gx-proof h2 svg { color: var(--up); }
.gx-proof dl { margin: 6px 0 0; }
.gx-proof dl > div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.gx-proof dl > div:last-child { border-bottom: 0; }
.gx-proof dt { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #7d778a; }
.gx-proof dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.gx-proof dd small { display: block; font-size: 12px; color: #7d778a; margin-top: 2px; }
.gx-proof dd a { color: var(--gold); }
.gx-entry { color: var(--txt-dim); line-height: 1.65; font-size: 13.5px !important; }
.gx-entry b { color: var(--txt); font-weight: 500; }

.gx-share { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.gx-share-img { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.gx-share-img img { display: block; width: 100%; height: auto; }
.gx-share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gx-share-actions .btn { text-align: center; }
.gx-copylink { justify-content: center; font-size: 12.5px; }

/* ── track record ────────────────────────────────────── */

.gx-record { gap: 40px; padding-top: 56px; }
.gx-rec-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 60px; align-items: end; }
.gx-rec-head > div:first-child { display: flex; flex-direction: column; gap: 18px; }
.gx-rec-head h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.gx-rec-head p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--txt-dim); max-width: 48ch; text-wrap: pretty; }

.gx-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.gx-kpis > div { background: #111016; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.gx-kpis b { font-size: 34px; font-weight: 700; }
.gx-kpis small { font-size: 17px; color: #7d778a; font-weight: 400; }

.gx-dist { padding: 26px 30px; display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 46px; align-items: center; }
.gx-dist p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--txt-dim); text-wrap: pretty; }
.gx-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; align-items: end; height: 190px; }
.gx-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 9px; height: 100%; }
.gx-bar-n { font-family: var(--mono); font-size: 15px; color: var(--txt-dim); }
.gx-bar-fill { width: 100%; background: #3a3444; border-radius: 6px 6px 2px 2px; }
.gx-bar-k { font-family: var(--mono); font-size: 12px; color: #7d778a; white-space: nowrap; }
.gx-bar.b0 .gx-bar-fill { background: #2a2631; }
.gx-bar.b2 .gx-bar-fill { background: #4a4454; }
.gx-bar.b3 .gx-bar-fill { background: #b58c3a; }
.gx-bar.b3 .gx-bar-n { color: var(--gold); }
.gx-bar.b4 .gx-bar-fill { background: var(--gold); }
.gx-bar.b4 .gx-bar-n { color: var(--gold-hi); }
.gx-bar.b5 .gx-bar-fill { background: var(--gold-hi); box-shadow: 0 0 20px rgba(255, 217, 135, .55); }
.gx-bar.b5 .gx-bar-n, .gx-bar.b5 .gx-bar-k { color: var(--gold-hi); font-weight: 700; }

.gx-list { display: flex; flex-direction: column; gap: 16px; }
.gx-list-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.gx-list .tab { text-decoration: none; }

.gx-row { display: grid; grid-template-columns: 50px minmax(0, 1.4fr) 120px 90px 90px 50px 130px 80px; gap: 14px; align-items: center; padding: 15px 22px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
a.gx-row:hover { background: rgba(255, 255, 255, .025); }
.gx-row:last-child { border-bottom: 0; }
.gx-row.gx-th { background: var(--panel); }
.gx-row-token { display: flex; align-items: center; gap: 9px; font-weight: 600; min-width: 0; }
.gx-row-proof { text-align: right; color: var(--gold); }
.gx-empty { padding: 40px; text-align: center; color: var(--txt-dim); }

.gx-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }

.gx-404 { align-items: flex-start; padding-top: 90px; }
.gx-404 h1 { font-size: 64px; }
.gx-404 p { color: var(--txt-dim); margin: 0 0 12px; }

.gx-foot { max-width: 1180px; margin: 30px auto 0; padding: 26px clamp(16px, 4vw, 44px) 46px; border-top: 1px solid var(--line-soft); }
.gx-foot p { margin: 0; font-size: 12px; line-height: 1.7; color: #6c6779; max-width: 80ch; }

/* ── pantallas estrechas ─────────────────────────────── */

@media (max-width: 980px) {
  .gx-grid, .gx-rec-head, .gx-dist { grid-template-columns: 1fr; gap: 22px; }
  .gx-head-actions { width: 100%; }
  .gx-head-actions .btn { flex: 1; text-align: center; }
}

@media (max-width: 640px) {
  .gx-wrap { padding-top: 22px; gap: 18px; }
  .gx-titlerow h1 { font-size: 24px; }
  .gx-avatar { width: 48px; height: 48px; font-size: 20px; border-radius: 12px; }
  .gx-hero { grid-template-columns: 1fr; }
  .gx-hero-now { border-left: 0; border-top: 1px solid var(--line); }
  .gx-hero-peak, .gx-hero-now { padding: 22px 20px; }
  .gx-mid { font-size: 44px; }
  .gx-route { padding: 18px 20px; }
  .gx-chart-box { display: none; }
  .gx-ladder { display: block; }
  .gx-proof dl > div { grid-template-columns: 1fr; gap: 4px; }
  .gx-share-actions .btn, .gx-head-actions .btn { min-height: 46px; display: flex; align-items: center; justify-content: center; }
  .gx-row { grid-template-columns: 34px minmax(0, 1fr) 66px 66px 58px; gap: 10px; padding: 14px 14px; font-size: 13px; }
  .gx-hide-sm { display: none; }
  .gx-kpis b { font-size: 26px; }
  .gx-bars { gap: 8px; height: 160px; }
  .gx-bar-k { font-size: 10px; }
}

/* ── rediseño 17-sep: escaparate en positivo ─────────────── */

.gx-chip.is-live { color: var(--up); border-color: rgba(62, 224, 138, .4); }
.gx-chip.is-gold { color: #1a1204; background: var(--gold-hi); border-color: transparent; font-weight: 700; }
.gx-mid.up { color: var(--up); }
.gx-joincard { padding: 24px; border-color: rgba(233, 182, 79, .45); background: radial-gradient(120% 80% at 50% 0%, rgba(233, 182, 79, .2), transparent 60%), linear-gradient(180deg, var(--panel), #0c0b10); }
.gx-joincard h2 { margin: 0 0 8px; font-size: 20px; }
.gx-joincard p { margin: 0 0 16px; color: var(--txt-dim); font-size: 14px; }
.join-page { padding-top: 40px; }

.hof-head { text-align: center; padding: 30px 0 10px; }
.hof-head h1 { margin: 16px 0 0; font-size: clamp(38px, 6vw, 76px); line-height: 1; letter-spacing: -.045em; }
.hof-head p { margin: 16px auto 0; max-width: 600px; color: var(--txt-dim); font-size: 16px; }
.hof-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; text-align: left; }
.hof-kpis div { padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg-2)); }
.hof-kpis b { display: block; font-size: clamp(26px, 3vw, 38px); line-height: 1; }
.hof-kpis span { display: block; margin-top: 8px; color: var(--txt-dim); font-size: 13px; }

.hof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.hof {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px;
  border-radius: 20px; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), #0c0b10);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.hof:hover { transform: translateY(-4px); border-color: rgba(233, 182, 79, .5); box-shadow: 0 24px 60px -30px rgba(233, 182, 79, .5); }
.hof-rank { position: absolute; top: 16px; right: 18px; font: 700 12px var(--mono); color: var(--txt-faint); }
.hof-x { font: 800 44px/1 var(--mono); letter-spacing: -.04em; color: var(--up); }
.hof.gold .hof-x, .hof.veta .hof-x { color: var(--gold-hi); text-shadow: 0 0 26px rgba(240, 194, 98, .45); }
.hof.veta { border-color: rgba(233, 182, 79, .55); background: radial-gradient(120% 80% at 100% 0%, rgba(233, 182, 79, .25), transparent 55%), linear-gradient(180deg, #16131b, #0c0b10); }
.hof.veta::after { content: 'VETA MADRE'; position: absolute; top: 16px; right: 18px; font: 700 10px var(--mono); letter-spacing: .14em; color: #1a1204; background: var(--gold-hi); padding: 4px 8px; border-radius: 999px; }
.hof.veta .hof-rank { top: 44px; }
.hof-token { font-weight: 800; font-size: 20px; margin-top: 4px; }
.hof-meta { color: var(--txt-dim); font-size: 12.5px; }
.hof-mc { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line-soft); font: 600 13px var(--mono); color: var(--txt-dim); }
.hof-mc b { color: var(--gold-hi); }
.hof-mc i { font-style: normal; color: var(--gold); }
.hof-date { font: 500 11px var(--mono); color: var(--txt-faint); }

@media (max-width: 760px) {
  .hof-kpis { grid-template-columns: repeat(2, 1fr); }
}