/* Varve — diseño «Terminal». Interfaz de mercado: cifras en vivo, paneles con líneas finas, cinta superior
   con las reglas del protocolo. Tema oscuro y claro (data-theme en <html>, lo pone marco.js antes de pintar).
   Ocre: bitcoin y reserva. Arcilla: acciones. Geologica para el texto; IBM Plex Mono para las cifras. */

@font-face { font-family: "Geologica"; src: url("fonts/geologica-latin-full-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geologica"; src: url("fonts/geologica-latin-ext-full-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geologica"; src: url("fonts/geologica-cyrillic-full-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Mono"; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ───────── Temas ───────── */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0e10; --bg-2: #0e1416; --card: #10171a; --field: #0b1113; --raise: #151d20;
  --text: #e9e6df; --muted: #9a9b94; --line: rgba(233, 230, 218, 0.10); --line-2: rgba(233, 230, 218, 0.18); --track: rgba(233, 230, 218, 0.07);
  --ochre: #e3ac45; --ochre-fill: #e3ac45; --clay: #b9532a; --clay-up: #c9612f; --on-clay: #fff8f0; --link: #e07a4e;
  --up: #7fdcae; --down: #f1a092; --solid: #e9e6df; --on-solid: #0a0e10;
  --glow: 0 0 0 1px rgba(227, 172, 69, 0.06), 0 30px 80px -30px rgba(227, 172, 69, 0.22);
  --halo: rgba(227, 172, 69, 0.12);
  --sk-a: #151d20; --sk-b: #1d272b; --sweep: rgba(227, 172, 69, 0.16);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f3ef; --bg-2: #eae8e1; --card: #ffffff; --field: #f6f5f1; --raise: #f0eee8;
  --text: #121719; --muted: #555a57; --line: rgba(18, 23, 25, 0.11); --line-2: rgba(18, 23, 25, 0.2); --track: rgba(18, 23, 25, 0.06);
  --ochre: #7d560a; --ochre-fill: #d69a2b; --clay: #b14f27; --clay-up: #9c4420; --on-clay: #fff8f0; --link: #a3471f;
  --up: #1d7a52; --down: #9b2c1f; --solid: #121719; --on-solid: #f4f3ef;
  --glow: 0 30px 60px -30px rgba(18, 23, 25, 0.22);
  --halo: rgba(214, 162, 62, 0.16);
  --sk-a: #ebe8e0; --sk-b: #f6f4ef; --sweep: rgba(255, 255, 255, 0.7);
}
:root {
  --ui: "Geologica", "Segoe UI", system-ui, sans-serif;
  --num: "Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --mono: var(--num);
  --display: var(--ui);
  --maxw: 1320px; --r: 16px; --r-sm: 11px;
  /* Nombres heredados que usan piezas generadas por los scripts. */
  --seal: var(--ochre); --ink: var(--text); --paper: var(--bg); --sheet: var(--card);
}
:lang(zh) { --ui: "Geologica", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif; }
:lang(ja) { --ui: "Geologica", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif; }
:lang(ko) { --ui: "Geologica", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", system-ui, sans-serif; }
:lang(hi) { --ui: "Geologica", "Noto Sans Devanagari", "Kohinoor Devanagari", "Nirmala UI", "Mangal", system-ui, sans-serif; }
:lang(bn) { --ui: "Geologica", "Noto Sans Bengali", "Kohinoor Bangla", "Nirmala UI", "Vrinda", system-ui, sans-serif; }
:lang(ar) { --ui: "Geologica", "Noto Sans Arabic", "Segoe UI", "Geeza Pro", Tahoma, system-ui, sans-serif; }

/* ───────── Base ───────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--ui); -webkit-font-smoothing: antialiased; transition: background 0.2s, color 0.2s; }
main { flex: 1 0 auto; overflow-x: clip; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: 40px; padding-right: 40px; }
section[id] { scroll-margin-top: 120px; }
:focus-visible { outline: 2px solid var(--ochre-fill); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h1 { font-weight: 600; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.03; letter-spacing: -0.04em; text-wrap: balance; }
h2 { font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }
h3 { font-weight: 600; font-size: 1.06rem; line-height: 1.35; letter-spacing: -0.01em; }
.page-title { font-weight: 600; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; }

/* ───────── Cabecera: cinta + barra ───────── */
.top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(8px)) { .top { backdrop-filter: blur(14px) saturate(1.3); } }
.ticker { height: 34px; overflow: hidden; background: var(--bg-2); border-bottom: 1px solid var(--line); font-family: var(--num); font-size: 0.75rem; color: var(--muted); display: flex; align-items: center; }
.ticker-track { display: flex; width: max-content; animation: cinta 60s linear infinite; }
.tk-set { display: flex; }
.tk { white-space: nowrap; padding: 0 28px; position: relative; }
.tk::after { content: ""; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--line-2); }
.tk b { color: var(--ochre); font-weight: 500; }
@keyframes cinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }
.top-in { display: flex; align-items: center; gap: 40px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.mark { width: 24px; height: 24px; color: var(--text); flex: none; }
.word { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.03em; }
.links { display: flex; gap: 26px; }
.links a { text-decoration: none; font-size: 0.93rem; color: var(--muted); white-space: nowrap; padding: 6px 0; }
.links a:hover { color: var(--text); }
.links a[aria-current] { color: var(--text); font-weight: 500; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.net { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--muted); padding: 0 8px; white-space: nowrap; }
.net::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.themebtn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.themebtn:hover { background: var(--raise); }
.themebtn .ico { grid-area: 1 / 1; }
[data-theme="dark"] .themebtn .ico:first-of-type, [data-theme="light"] .themebtn .ico:last-of-type { display: none; }
.langmenu { position: relative; }
.langmenu summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; font-size: 0.85rem; font-weight: 500; color: var(--muted); cursor: pointer; user-select: none; border-radius: 10px; }
.langmenu summary::-webkit-details-marker { display: none; }
.langmenu summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.langmenu summary:hover, .langmenu[open] summary { color: var(--text); background: var(--raise); }
.langlist { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 190px; max-height: min(70vh, 540px); overflow-y: auto; display: grid; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--glow); }
.langlist button { text-align: start; background: none; border: 0; padding: 9px 12px; font: 500 0.93rem/1.3 var(--ui); cursor: pointer; border-radius: 8px; color: var(--text); }
.langlist button:hover, .langlist button[aria-current] { background: var(--raise); }
.langlist button[aria-current] { font-weight: 700; }
.tabbar { display: none; }

/* ───────── Botones y enlaces ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 20px; border-radius: 10px; border: 1px solid var(--clay); background: var(--clay); color: var(--on-clay); font-weight: 600; font-size: 0.95rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.btn:hover:not(:disabled) { background: var(--clay-up); border-color: var(--clay-up); }
.btn:disabled { background: var(--track); border-color: transparent; color: var(--muted); cursor: not-allowed; }
.btn.small { min-height: 38px; padding: 8px 16px; font-size: 0.88rem; }
.top-right > .btn { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.top-right > .btn:hover:not(:disabled) { background: var(--muted); border-color: var(--muted); }
.btn.wide { width: 100%; }
.btn.ghost { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn.ghost:hover:not(:disabled) { background: var(--raise); }
.btn.seal { background: var(--ochre-fill); border-color: var(--ochre-fill); color: #14100a; }
.btn.seal:hover:not(:disabled) { filter: brightness(1.08); }
.linklike { background: none; border: 0; padding: 0; color: var(--link); font-size: 0.84rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linklike:empty { display: none; }
.faq-more { margin-top: 22px; font-weight: 500; }
.faq-more a { color: var(--link); text-underline-offset: 4px; }
.faq-more a:hover { color: var(--text); }

/* ───────── Paneles ───────── */
.panel, .trade, form.redeem, .redeem.recent, .res-card, .board, .stake-figs, .hw-card, .hw-sim, .hw-keys, .cg-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.panel { padding: 24px; }
.panel-title, .table-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.k { font-size: 0.82rem; color: var(--muted); }
.v { font-family: var(--num); font-weight: 500; font-size: 1.45rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.2; }
.s { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.25em; }
.u { font-family: var(--ui); font-size: 0.6em; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.u.btc { color: var(--ochre); }

/* ───────── Portada ───────── */
.hero.home { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; padding-top: 72px; padding-bottom: 48px; align-items: center; }
.hero.home h1 { max-width: 12em; }
.lead { margin-top: 18px; max-width: 40em; font-size: 1.02rem; line-height: 1.65; color: var(--muted); }
.board { margin-top: 36px; overflow: hidden; }
.board-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.board-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.board-backing { padding: 20px 22px 22px; border-top: 1px solid var(--line); max-width: none; }
.trade-zone { position: relative; }
/* Portada: botones y tarjeta de cifras con los estratos de fondo */
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-art { position: relative; align-self: stretch; display: flex; align-items: center; min-height: 360px; }
.hero-art .rosette { left: -40px; right: -40px; top: -20px; width: calc(100% + 80px); height: calc(100% + 40px); }
.hero-card { position: relative; z-index: 1; width: 100%; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; box-shadow: var(--glow); }
.hc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--line); font-family: var(--num); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.hc-live { display: inline-flex; align-items: center; gap: 8px; color: var(--up); }
.hc-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); animation: hc-pulse 2.4s ease-out infinite; }
@keyframes hc-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.hc-reserve { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 6px; align-items: end; padding: 22px 22px 20px; color: inherit; text-decoration: none; background: linear-gradient(180deg, var(--halo), transparent 70%); transition: background-color 0.12s; }
.hc-reserve:hover { background-color: var(--raise); }
.hc-reserve .k, .hc-reserve .hc-big, .hc-reserve .s { grid-column: 1; }
.hc-big { font-family: var(--num); font-weight: 500; font-size: 2.3rem; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hc-strata { grid-column: 2; grid-row: 1 / span 3; width: 58px; height: 58px; fill: var(--line-2); }
.hc-strata .hc-base { fill: var(--clay); }
.hc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.hc-pair .stat { padding: 18px 22px; }
.hc-pair .v { font-size: 1.25rem; }
.hc-backing { padding: 16px 22px 18px; border-top: 1px solid var(--line); }
.hc-foot { display: flex; align-items: center; justify-content: space-between; padding: 13px 22px; border-top: 1px solid var(--line); background: var(--bg-2); color: var(--text); font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: background 0.12s; }
.hc-foot:hover { background: var(--raise); }
.hc-arrow { color: var(--ochre); transition: transform 0.15s; }
.hc-foot:hover .hc-arrow { transform: translateX(4px); }
[dir="rtl"] .hc-arrow { transform: scaleX(-1); }
[dir="rtl"] .hc-foot:hover .hc-arrow { transform: scaleX(-1) translateX(4px); }
.rosette { position: absolute; left: -90px; right: -90px; top: -70px; height: calc(100% + 140px); width: calc(100% + 180px); color: var(--line); pointer-events: none; z-index: 0; opacity: 0.9;
  -webkit-mask: radial-gradient(closest-side, #000 40%, transparent); mask: radial-gradient(closest-side, #000 40%, transparent); }
.rosette path { fill: none; stroke: currentColor; stroke-width: 1; }
.rosette path.capa { stroke-width: 3; }
.rosette path.veta { stroke: var(--ochre-fill); stroke-width: 1.6; opacity: 0.5; }

/* Respaldo */
.backing-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.backing-title { font-size: 0.85rem; color: var(--muted); }
.backing-pct { font-family: var(--num); font-weight: 500; font-size: 1.45rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.meter { position: relative; margin-top: 12px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--track); }
.meter-fill { height: 100%; width: 0%; background: var(--ochre-fill); border-radius: 4px; box-shadow: 0 0 14px var(--halo); transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.backing-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; font-size: 0.85rem; color: var(--muted); }
.backing-legend b { color: var(--text); font-family: var(--num); font-weight: 500; font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 2px; vertical-align: 0; }
.dot-floor { background: var(--ochre-fill); }
.dot-price { box-shadow: inset 0 0 0 1.5px var(--muted); }
.backing-note { margin-top: 10px; font-size: 0.85rem; color: var(--muted); max-width: 52em; }

/* En vivo: próxima compra y últimas compras */
.live { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: 16px; padding-top: 16px; padding-bottom: 8px; align-items: start; }
.fees-big { margin-top: 14px; font-family: var(--num); font-weight: 500; font-size: 2rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fees-of { font-family: var(--ui); font-size: 0.9rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.fees-meter { height: 10px; margin-top: 16px; }
.fees-status { margin-top: 12px; font-size: 0.88rem; color: var(--ochre); min-height: 1.4em; }
.fees-note { margin-top: 8px; font-size: 0.85rem; color: var(--muted); }
.act-panel { padding: 0; overflow: hidden; }
.act-panel .panel-title, .res-table .table-title { padding: 20px 22px 6px; }
.table-scroll { overflow-x: auto; }
.activity { width: 100%; border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.activity th { text-align: start; font-weight: 400; font-size: 0.78rem; color: var(--muted); padding: 10px 22px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.activity td { padding: 12px 22px; border-bottom: 1px solid var(--line); white-space: nowrap; font-family: var(--num); }
.activity tr:last-child td { border-bottom: 0; }
.activity .num { text-align: end; }
.activity .plus { color: var(--ochre); }
.activity a { text-decoration: none; }
.activity tr.link { cursor: pointer; }
.activity tr.link:hover td, .activity tr.link:focus-within td { background: var(--raise); }
.activity tr.link:hover a, .activity a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.activity .who { color: var(--muted); margin-left: 8px; font-size: 0.8rem; font-family: var(--ui); }
.table-empty { padding: 4px 22px 22px; color: var(--muted); font-size: 0.9rem; }

/* Cómo funciona (resumen) */
.how { padding-top: 88px; }
.steps { counter-reset: paso; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.steps li { counter-increment: paso; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); position: relative; overflow: hidden; }
.steps li::before { content: counter(paso, decimal-leading-zero); display: block; font-family: var(--num); font-size: 0.85rem; color: var(--ochre); margin-bottom: 18px; }
.steps li:last-child { box-shadow: inset 0 0 0 1px var(--halo); }
.steps h3 { font-size: 1.05rem; }
.steps p { margin-top: 8px; color: var(--muted); font-size: 0.92rem; }
.how .faq-more { margin-top: 26px; }

/* Ventajas y preguntas */
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding-top: 88px; padding-bottom: 104px; }
.why-lead { margin-top: 12px; color: var(--muted); max-width: 32em; }
.why-list { margin-top: 26px; border-top: 1px solid var(--line); }
.why-list li { padding: 16px 0 16px 28px; border-bottom: 1px solid var(--line); position: relative; }
.why-list li::before { content: ""; position: absolute; left: 2px; top: 1.45em; width: 10px; height: 10px; border-radius: 3px; background: var(--ochre-fill); box-shadow: 0 0 10px var(--halo); }
.why-list h3 { font-size: 1rem; }
.why-list p { margin-top: 4px; color: var(--muted); font-size: 0.93rem; }
.faq-col h2 { margin-bottom: 22px; }
.faq-col details { border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin-top: 8px; }
.faq-col summary { cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 500; list-style: none; position: relative; }
.faq-col summary::-webkit-details-marker { display: none; }
.faq-col summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); transition: transform 0.2s; }
.faq-col details[open] summary::after { transform: rotate(-135deg); margin-top: -1px; }
.faq-col details p { padding: 0 18px 18px; color: var(--muted); font-size: 0.93rem; }

/* Antes del lanzamiento: titular grande y, al lado, el suelo subiendo por escalones. */
.empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); column-gap: 56px; padding-top: 96px; padding-bottom: 32px; align-items: center; }
.empty > * { grid-column: 1; }
.empty h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); max-width: 11em; }
.empty p { margin: 20px 0 28px; color: var(--muted); font-size: 1.06rem; max-width: 34em; }
.empty .btn { justify-self: start; }
.empty::after { content: ""; grid-column: 2; grid-row: 1 / span 3; align-self: stretch; min-height: 300px; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--glow);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e3ac45' stop-opacity='.35'/%3E%3Cstop offset='1' stop-color='%23e3ac45' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 216H44V204H86V196H118V184H162V176H184V160H228V150H262V132H300V122H330V100H364V82H400V240H0Z' fill='url(%23g)'/%3E%3Cpath d='M0 216H44V204H86V196H118V184H162V176H184V160H228V150H262V132H300V122H330V100H364V82H400' fill='none' stroke='%23e3ac45' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center 70% / 86% 62% no-repeat,
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 48px),
    var(--card); }

/* ───────── Formularios: el panel de operar ───────── */
.trade, form.redeem { position: relative; z-index: 1; padding: 20px; box-shadow: var(--glow); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--track); border-radius: 12px; }
.tabs button { background: transparent; border: 0; padding: 10px; font-weight: 600; font-size: 0.92rem; cursor: pointer; color: var(--muted); border-radius: 9px; }
.tabs button[aria-selected="true"] { background: var(--solid); color: var(--on-solid); }
.field { display: block; background: var(--field); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.field + .field { margin-top: 6px; }
.field.out { background: var(--field); }
.field:focus-within { border-color: var(--line-2); box-shadow: 0 0 0 3px var(--halo); }
.field-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.82rem; color: var(--muted); }
.field-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.field input, .field output { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; font-family: var(--num); font-size: 1.75rem; font-weight: 400; line-height: 1.25; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field input:focus { outline: none; }
.field input::placeholder { color: var(--muted); opacity: 0.6; }
.unit:empty { display: none; }
.unit { flex: none; font-weight: 600; font-size: 0.88rem; padding: 6px 12px; border-radius: 999px; background: var(--track); color: var(--text); white-space: nowrap; }
.cursel { appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; cursor: pointer; padding: 6px 30px 6px 12px; font-weight: 600; font-size: 0.88rem; color: var(--text); background-color: var(--track);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a9b94' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 10px 6px; }
.cursel:disabled { padding: 6px 12px; background-image: none; cursor: default; opacity: 1; }
.cursel option { background: var(--card); color: var(--text); }
.quote { margin-top: 14px; font-size: 0.85rem; }
.quote > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px 2px; }
.quote dt { color: var(--muted); }
.quote dd { font-family: var(--num); font-variant-numeric: tabular-nums; text-align: end; }
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--track); border-radius: 8px; }
.seg button { background: transparent; border: 0; padding: 3px 9px; font-family: var(--num); font-size: 0.8rem; cursor: pointer; color: var(--muted); border-radius: 6px; }
.seg button[aria-pressed="true"] { background: var(--solid); color: var(--on-solid); }
.fee-note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }
.trade .btn.wide, form.redeem .btn.wide { margin-top: 16px; min-height: 52px; font-size: 1rem; border-radius: 12px; }
.msg { margin-top: 10px; font-size: 0.86rem; color: var(--muted); min-height: 1.4em; }
.msg.inline { margin: 0; min-height: 0; }
.msg.ok { color: var(--up); font-weight: 600; }
.msg.bad { color: var(--down); }
.localhint, .hint { margin-top: 10px; font-size: 0.86rem; color: var(--muted); min-height: 1.4em; }

/* ───────── Páginas de la app ───────── */
.hero.page { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; padding-top: 56px; padding-bottom: 96px; align-items: start; }
.hero.page .lead { margin-top: 14px; }
.hero.page .backing { margin-top: 32px; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.hero.page .backing-pct { font-size: 1.8rem; }

.stake { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: start; padding-top: 56px; padding-bottom: 96px; }
.stake-lead { margin-top: 14px; max-width: 40em; color: var(--muted); }
.stake-figs { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
.stake-figs > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 20px 22px; }
.stake-figs > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
.stake-figs > div:nth-child(even) { border-left: 1px solid var(--line); }
.stake-figs dt { font-size: 0.82rem; color: var(--muted); }
.stake-figs dd { font-family: var(--num); font-weight: 500; font-size: 1.45rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stake-wait { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--halo); max-width: 40em; }
.stake-note { margin-top: 14px; font-size: 0.86rem; color: var(--muted); max-width: 40em; }
.stakeform { padding: 20px; }
.stakeform .quote { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); }
.stake-actions { display: flex; gap: 8px; margin-top: 12px; }
.stake-actions .btn { flex: 1; }
.switch { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 40px; height: 22px; margin-top: 2px; border-radius: 11px; background: var(--line-2); transition: background 0.12s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.switch input:checked + .switch-track { background: var(--clay); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--ochre-fill); outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: 0.45; }
.switch-text { display: grid; gap: 2px; font-size: 0.86rem; }
.switch-text span { color: var(--muted); }
.stake.closed > .stake-main, .stake.closed > .stakeform { filter: blur(8px); opacity: 0.55; pointer-events: none; user-select: none; }
.stake-soon { position: absolute; inset: 0; z-index: 2; display: flex; justify-content: center; align-items: flex-start; padding: clamp(72px, 18vh, 160px) 16px 0; text-align: center; }
.soon-in { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 100%; padding: 40px clamp(32px, 6vw, 72px); background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--glow); }
.soon-mark { width: 48px; height: 48px; color: var(--text); }
.soon-text { font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; letter-spacing: -0.035em; }
.pending { margin-top: 14px; font-size: 0.88rem; max-width: 40em; }
.pending.dark { color: var(--muted); }
.pending .msg.inline { display: block; margin-top: 4px; }

.reserve.page { padding: 56px 0 96px; }
.reserve-in { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; align-items: start; }
.reserve-lead { margin-top: 14px; max-width: 40em; color: var(--muted); }
.res-card { position: relative; overflow: hidden; margin-top: 28px; padding: 30px; box-shadow: var(--glow); }
.res-card > :not(svg) { position: relative; z-index: 1; }
.res-card .rosette { left: 0; right: 0; top: 0; width: 100%; height: 100%; -webkit-mask: linear-gradient(90deg, transparent 20%, #000); mask: linear-gradient(90deg, transparent 20%, #000); }
.reserve-big { font-family: var(--num); font-weight: 500; font-size: clamp(2.6rem, 5.4vw, 4rem); line-height: 1; letter-spacing: -0.04em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.reserve-link { color: inherit; text-decoration: none; }
.reserve-link[href]:hover #rBig, .reserve-link[href]:focus-visible #rBig { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.reserve-unit { font-family: var(--ui); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; color: var(--ochre); }
.reserve-sub { margin-top: 10px; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.5em; }
.reserve-figs { margin-top: 18px; max-width: 30em; }
.reserve-main .fees { margin-top: 16px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.res-table { margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.res-table .table-scroll { margin-top: 0; }
.reserve-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; position: sticky; top: 124px; }
form.redeem h2 { font-size: 1.5rem; }
.redeem-lead { margin-top: 6px; margin-bottom: 16px; color: var(--muted); font-size: 0.9rem; }
.redeem.recent { padding: 0; overflow: hidden; }
.redeem.recent h2 { padding: 18px 20px 4px; font-size: 1rem; letter-spacing: -0.01em; }
.activity.compact { font-size: 0.82rem; }
.activity.compact th, .activity.compact td { padding-left: 20px; padding-right: 20px; }
.redeem.recent .table-empty { padding: 4px 20px 18px; }

/* ───────── Documentación ───────── */
.docs { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 64px; padding-top: 48px; padding-bottom: 104px; align-items: start; }
.docs-nav { position: sticky; top: 124px; display: flex; flex-direction: column; max-height: calc(100vh - 150px); overflow-y: auto; }
.docs-list { display: flex; flex-direction: column; gap: 2px; }
.docs-nav a { text-decoration: none; color: var(--muted); font-size: 0.9rem; padding: 7px 12px; border-radius: 8px; }
.docs-nav a:hover { color: var(--text); background: var(--raise); }
.docs-nav a.on { color: var(--text); font-weight: 600; background: var(--raise); }
.docs-toggle, .docs-n { display: none; }
.docs-body { max-width: 46em; }
.docs-body h1 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); }
.docs-body .intro { margin-top: 18px; font-size: 1.08rem; color: var(--muted); }
.docs-body section { padding-top: 52px; }
.docs-body h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.docs-body h3 { font-size: 1.05rem; margin-top: 26px; }
.docs-body p { margin-top: 14px; }
.docs-body ul, .docs-body ol { margin-top: 14px; padding-left: 22px; }
.docs-body ul { list-style: disc; }
.docs-body ol { list-style: decimal; }
.docs-body li { margin-top: 8px; padding-left: 4px; }
.docs-body li::marker { color: var(--ochre); }
.docs-body a { color: var(--link); text-underline-offset: 3px; }
.docs-body code { font: 0.86em var(--num); background: var(--raise); padding: 2px 6px; border-radius: 5px; }
.docs-body pre { margin-top: 16px; background: var(--card); padding: 18px 20px; overflow-x: auto; font: 0.86rem/1.6 var(--num); border-radius: 12px; border: 1px solid var(--line); }
.docs-body pre code { background: none; padding: 0; font: inherit; }
.docs-body .key { margin-top: 20px; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.docs-body table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 0.92rem; }
.docs-body th { text-align: start; font-weight: 600; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line-2); }
.docs-body td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.docs-body td.hex { overflow-wrap: anywhere; font-family: var(--num); font-size: 0.84rem; }
.docs-body .num { text-align: end; padding-right: 0; font-family: var(--num); }
.addr { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.92rem; }
.addr td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.addr td:first-child { color: var(--muted); width: 34%; }
.addr .hex { font-family: var(--num); overflow-wrap: anywhere; }

/* ───────── Pie ───────── */
.foot { margin-top: auto; border-top: 1px solid var(--line); background: var(--bg-2); padding: 28px 0 40px; }
.foot-in { display: flex; flex-direction: column; gap: 16px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.88rem; }
.foot-links a { color: var(--text); text-underline-offset: 3px; }
.foot-links .social { display: inline-flex; align-items: center; gap: 6px; align-self: center; }
.foot-links .xlogo { width: 0.95em; height: 0.95em; flex: none; }
.legal { font-size: 0.84rem; color: var(--muted); }
.local { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 0.88rem; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line-2); }
.crefield { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.crebox { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--field); padding: 6px 8px 6px 12px; border-radius: 10px; }
.crebox:focus-within { border-color: var(--line-2); }
.crebox input { width: 9em; border: 0; background: transparent; padding: 0; font-family: var(--num); }
.crebox input:focus { outline: none; }

/* ───────── Diálogo de la wallet ───────── */
.dialog { border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--text); padding: 26px; width: min(92vw, 400px); box-shadow: var(--glow); }
.dialog::backdrop { background: rgba(5, 8, 9, 0.6); backdrop-filter: blur(3px); }
.dialog h3 { font-size: 1.35rem; letter-spacing: -0.02em; margin-bottom: 16px; }
.wallet-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.wallet-list button { display: flex; align-items: center; gap: 12px; text-align: start; background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; font-weight: 600; cursor: pointer; }
.wallet-list button:hover { border-color: var(--line-2); background: var(--raise); }
.wallet-list img { width: 26px; height: 26px; }
.dialog .msg:empty { display: none; }
#walletClose { display: flex; min-width: 8.5em; margin: 20px auto 0; }

/* ───────── Cifras en vivo: esqueletos, brillo y cambios ───────── */
.sk { color: transparent !important; border-radius: 6px; background: linear-gradient(90deg, var(--sk-a) 0%, var(--sk-a) 30%, var(--sk-b) 50%, var(--sk-a) 70%, var(--sk-a) 100%) !important; background-size: 300% 100% !important; animation: v-sk 1.4s ease-in-out infinite; user-select: none; text-decoration: none !important; }
.sk > * { visibility: hidden; }
span.sk, b.sk, strong.sk, output.sk, dd.sk, button.sk { display: inline-block; min-width: 5.5em; max-width: 100%; vertical-align: middle; line-height: 1.15; }
dd.sk { min-width: 7em; }
.v.sk, .s.sk { align-self: flex-start; }
.v.sk { width: 7em; }
.s.sk { width: 6em; }
#rBig.sk { min-width: 4.6em; }
#feeEth.sk { min-width: 4.2em; }
#backingPct.sk { min-width: 3.6em; }
output.sk { flex: 0 1 auto; width: 7em; }
p.sk { display: block; width: min(30em, 92%); }
.reserve-sub.sk { width: 9em; }
.fees-status.sk { width: 14em; }
.linklike.sk { min-width: 7em; font-size: 0.8rem; }
.meter.sk > * { visibility: hidden; }
.activity .sk-line { display: inline-block; width: 7.5em; height: 0.95em; vertical-align: middle; }
.activity .num .sk-line { width: 6em; }
.sk-in { animation: v-in 0.4s ease-out; }
.upd { position: relative; }
.upd::after { content: ""; position: absolute; inset: -2px -3px; pointer-events: none; border-radius: 4px; background: linear-gradient(100deg, transparent 0%, transparent 35%, var(--sweep) 50%, transparent 65%, transparent 100%); background-size: 260% 100%; background-position: 130% 0; animation: bitna-sweep 1.1s ease-in-out 1; }
.up { animation: v-up 1.6s ease-out; }
.down { animation: v-down 1.6s ease-out; }
@keyframes v-sk { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes v-in { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes bitna-sweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes v-up { 0%, 35% { color: var(--up); } }
@keyframes v-down { 0%, 35% { color: var(--down); } }

/* ───────── Pantalla de carga ───────── */
.cg, html:not(.textos-ok) .links a, html:not(.textos-ok) .top-right > .btn { color: transparent !important; border-color: transparent; box-shadow: none; background: linear-gradient(90deg, var(--sk-a) 0%, var(--sk-a) 30%, var(--sk-b) 50%, var(--sk-a) 70%, var(--sk-a) 100%); background-size: 300% 100%; animation: v-sk 1.4s ease-in-out infinite; border-radius: 6px; pointer-events: none; }
html:not(.textos-ok) .links a { display: inline-block; width: 4.6em; height: 0.8em; padding: 0; }
html:not(.textos-ok) .top-right > .btn { width: 9.5em; height: 38px; }
html:not(.textos-ok) .langmenu, html:not(.textos-ok) .foot-in, html:not(.textos-ok) .ticker-track, html:not(.textos-ok) .tabbar span { visibility: hidden; }
main:has(> #app:not([hidden])) > .cargando, main:has(> .empty) > .cargando { display: none; }
.cargando { min-height: 72vh; }
.cg-in { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; padding-top: 64px; padding-bottom: 72px; align-items: start; }
.cg { display: block; height: 0.9rem; margin-top: 14px; width: 100%; }
.cg-h { height: clamp(2rem, 4vw, 3.2rem); width: 88%; margin-top: 0; }
.cg-h + .cg-h { margin-top: 12px; }
.cg-h.cg-end { width: 56%; }
.cg-h2 { height: 1.6rem; width: 45%; margin-top: 40px; }
.cg-lead { margin-top: 30px; max-width: 34em; }
.cg-p.cg-end { width: 64%; }
.cg-btns { display: flex; gap: 12px; margin-top: 30px; }
.cg-btn { width: 9.5em; height: 44px; margin-top: 0; }
.cg-card { padding: 22px; min-height: 380px; }
.cg-40 { width: 40%; margin-top: 0; }
.cg-box { height: 76px; margin-top: 14px; }
.cg-wide { height: 52px; margin-top: 22px; }
.cg-nav { padding: 0 12px; }
.cg-nav .cg { width: 78%; margin-top: 16px; }
.cg-nav .cg:first-child { margin-top: 4px; }
main > #app:not([hidden]), main > .empty, .docs-body > :not(.cg-doc) { animation: v-in 0.35s ease-out; }
.cg-doc { max-width: 40em; }

/* ───────── Página «Cómo funciona» ───────── */
html:not(.textos-ok) body[data-page="how"] main { visibility: hidden; }
.hw-n { font-family: var(--num); color: var(--ochre); font-variant-numeric: tabular-nums; }
.hw-sub { margin-top: 12px; max-width: 44em; color: var(--muted); }
.hw-hero { padding-top: 72px; }
.hw-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; align-items: center; }
.hw-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); max-width: 12em; }
.hw-lead { margin-top: 20px; max-width: 42em; font-size: 1.06rem; color: var(--muted); }
.hw-core { height: 300px; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; gap: 3px; padding: 10px; background: var(--card); box-shadow: var(--glow); }
.hw-core i { display: block; flex: 1 1 0; border-radius: 3px; background: var(--track); }
.hw-core i:nth-child(4), .hw-core i:nth-child(8), .hw-core i:nth-child(10) { background: var(--ochre-fill); box-shadow: 0 0 12px var(--halo); }
.hw-core i:nth-child(12) { flex-grow: 2.4; background: var(--clay); }
.hw-core i:nth-child(3), .hw-core i:nth-child(6) { flex-grow: 1.6; }
.hw-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; overflow: hidden; }
.hw-keys.wrap { width: calc(100% - 80px); max-width: calc(var(--maxw) - 80px); padding: 0; }
.hw-keys > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 22px 24px; }
.hw-keys > div + div { border-left: 1px solid var(--line); }
.hw-keys dd { margin: 0; font-family: var(--num); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.1; letter-spacing: -0.03em; }
.hw-keys dt { font-size: 0.85rem; color: var(--muted); }
.hw-cycle { margin-top: 88px; padding: 72px 0 80px; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hw-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.hw-flow li { padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.hw-flow .hw-n { font-size: 0.85rem; }
.hw-flow h3 { margin-top: 14px; font-size: 1.1rem; }
.hw-flow p { margin-top: 8px; color: var(--muted); font-size: 0.9rem; }
.hw-split-bar { display: flex; height: 6px; margin-top: 14px; gap: 3px; }
.hw-split-bar b { flex: 75; background: var(--ochre-fill); border-radius: 3px; }
.hw-split-bar i { flex: 25; background: var(--muted); border-radius: 3px; }
.hw-chapter { padding-top: 88px; }
.hw-ch-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.hw-ch-head .hw-n { font-size: 0.9rem; }
.hw-k { font-size: 0.9rem; color: var(--muted); }
.hw-ch-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; margin-top: 28px; align-items: start; }
.hw-ch-text h2 { max-width: 16em; }
.hw-ch-text p { margin-top: 16px; max-width: 40em; color: var(--muted); }
.hw-quiet { font-size: 0.9rem; }
.hw-card { padding: 24px; box-shadow: var(--glow); }
.hw-card-flush { padding: 0; overflow: hidden; }
.hw-card-k { font-size: 0.85rem; color: var(--muted); }
.hw-card-note { margin-top: 16px; font-size: 0.9rem; color: var(--muted); }
.hw-spec > div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.hw-spec > div:first-child { border-top: 0; padding-top: 0; }
.hw-spec > div:last-child { padding-bottom: 0; }
.hw-spec dt { font-size: 0.85rem; color: var(--muted); }
.hw-spec dd { margin: 0; font-weight: 500; }
.hw-fee-bar { display: flex; gap: 3px; height: 26px; margin-top: 14px; }
.hw-fee-bar b { flex: 96.7 1 0; background: var(--muted); opacity: 0.55; border-radius: 5px 0 0 5px; }
.hw-fee-bar i { flex: 2.3 0 14px; background: var(--clay); }
.hw-fee-bar u { flex: 1 0 9px; background: var(--ochre-fill); border-radius: 0 5px 5px 0; }
.hw-fee-legend { margin-top: 14px; display: grid; gap: 8px; font-size: 0.9rem; }
.hw-fee-legend li { display: flex; gap: 10px; align-items: baseline; }
.hw-sw { flex: none; width: 10px; height: 10px; display: inline-block; border-radius: 2px; }
.hw-sw-ink { background: var(--muted); opacity: 0.55; } .hw-sw-clay { background: var(--clay); } .hw-sw-silt { background: var(--ochre-fill); }
.hw-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.hw-table th { text-align: start; font-weight: 400; font-size: 0.8rem; color: var(--muted); padding: 14px 20px 10px; border-bottom: 1px solid var(--line); }
.hw-table td { padding: 14px 20px; border-top: 1px solid var(--line); vertical-align: top; }
.hw-table tbody tr:first-child td { border-top: 0; }
.hw-table .num { text-align: end; white-space: nowrap; font-family: var(--num); }
.hw-table td.hw-n, .hw-table th:first-child { width: 3em; }
.hw-table th.num { width: 7.5em; white-space: normal; }
.hw-hit td { background: var(--halo); }
.hw-formula { margin-top: 20px !important; padding: 14px 18px; background: var(--field); border: 1px solid var(--line); color: var(--ochre) !important; font-family: var(--num); font-size: 0.92rem; border-radius: 10px; max-width: none !important; overflow-wrap: anywhere; }
.hw-card .hw-formula { margin-top: 0 !important; }
.hw-pct { display: flex; align-items: center; gap: 18px; }
.hw-pct b { font-family: var(--num); font-weight: 500; font-size: 2.8rem; line-height: 1; letter-spacing: -0.04em; color: var(--ochre); }
.hw-pct-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; }
.hw-pct-bar i { display: block; height: 100%; width: 5%; min-width: 10px; background: var(--ochre-fill); border-radius: 5px; }
.hw-sim { padding: 24px; box-shadow: var(--glow); display: flex; flex-direction: column; }
.hw-sim h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.hw-sim-lead { margin-top: 6px; color: var(--muted); font-size: 0.9rem; }
.hw-sim-figs { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr) minmax(0, 0.85fr); gap: 12px; margin-top: 20px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hw-sim-figs dt { font-size: 0.78rem; color: var(--muted); }
.hw-sim-figs dd { margin: 6px 0 0; font-family: var(--num); font-weight: 500; font-size: 1rem; white-space: nowrap; }
.hw-sim-figs small { font-family: var(--ui); font-size: 0.75rem; color: var(--muted); }
.hw-sim-floor dd { color: var(--ochre); }
.hw-sim-k { margin-top: 18px; font-size: 0.8rem; color: var(--muted); }
.hw-sim-chart { display: flex; align-items: flex-end; gap: 5px; height: 150px; margin-top: 10px; padding-top: 18px; border-bottom: 1px solid var(--line-2); }
.hw-bar { position: relative; flex: 0 0 calc((100% - 55px) / 12); min-width: 0; background: var(--muted); opacity: 0.6; border-radius: 3px 3px 0 0; transition: height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hw-bar small { position: absolute; bottom: calc(100% + 4px); left: -4px; right: -4px; text-align: center; font-family: var(--num); font-size: 0.6rem; color: var(--muted); white-space: nowrap; overflow: hidden; }
.hw-bar-buy { background: var(--ochre-fill); opacity: 1; box-shadow: 0 0 12px var(--halo); } .hw-bar-redeem { background: var(--muted); } .hw-bar-burn { background: var(--clay); opacity: 1; }
.hw-sim-msg { margin-top: 14px; min-height: 3em; font-size: 0.9rem; }
.hw-sim-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.hw-sim-btns .btn { flex: 1 1 auto; font-size: 0.86rem; min-height: 40px; padding: 9px 12px; }
.hw-trust { margin-top: 104px; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hw-trust .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding-top: 80px; padding-bottom: 88px; }
.hw-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hw-grid li { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.hw-grid h3 { position: relative; padding-left: 20px; font-size: 0.98rem; }
.hw-grid h3::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 9px; height: 9px; border-radius: 2px; background: var(--ochre-fill); }
.hw-risks .hw-grid h3::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--link); }
.hw-grid p { margin-top: 6px; padding-left: 20px; font-size: 0.88rem; color: var(--muted); }
.hw-cta { padding-top: 96px; padding-bottom: 104px; text-align: center; }
.hw-cta h2 { font-size: clamp(2rem, 4vw, 3rem); max-width: 16em; margin: 0 auto; }
.hw-cta > p { margin: 14px auto 0; max-width: 38em; color: var(--muted); }
.hw-cta .hw-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; margin-top: 30px; }

/* ───────── Ajustes por idioma ───────── */
:lang(zh) :is(h1, h2), :lang(ja) :is(h1, h2), :lang(ko) :is(h1, h2) { letter-spacing: 0; line-height: 1.25; }
:lang(zh) :is(.hero h1, .empty h1, .hw-hero h1), :lang(ja) :is(.hero h1, .empty h1, .hw-hero h1), :lang(ko) :is(.hero h1, .empty h1, .hw-hero h1) { font-size: clamp(2.1rem, 4vw, 3.4rem); }
:lang(zh) .hero h1, :lang(ja) .hero h1 { word-break: keep-all; }
html:lang(zh), html:lang(ja) { line-break: strict; }
html:lang(ko) { word-break: keep-all; }
html:lang(zh) body, html:lang(ja) body, html:lang(ko) body { line-height: 1.75; }
:lang(ru) :is(.hero h1, .empty h1, .hw-hero h1) { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
:lang(hi) *, :lang(bn) *, :lang(ar) * { letter-spacing: 0 !important; }
html:lang(hi) body, html:lang(bn) body, html:lang(ar) body { line-height: 1.75; }
:lang(hi) :is(h1, h2), :lang(bn) :is(h1, h2), :lang(ar) :is(h1, h2) { line-height: 1.35; }
:lang(hi) :is(.hero h1, .empty h1, .hw-hero h1), :lang(bn) :is(.hero h1, .empty h1, .hw-hero h1), :lang(ar) :is(.hero h1, .empty h1, .hw-hero h1) { font-size: clamp(2.1rem, 4vw, 3.3rem); }

/* ───────── Derecha a izquierda (árabe) ───────── */
[dir="rtl"] .top-right { margin-left: 0; margin-right: auto; }
[dir="rtl"] .langlist { right: auto; left: 0; }
[dir="rtl"] .ticker-track { animation-direction: reverse; }
[dir="rtl"] .dot { margin-right: 0; margin-left: 7px; }
[dir="rtl"] .cursel { padding: 6px 12px 6px 30px; background-position: left 11px center; }
[dir="rtl"] .stat + .stat, [dir="rtl"] .stake-figs > div:nth-child(even), [dir="rtl"] .hw-keys > div + div { border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .why-list li { padding: 16px 28px 16px 0; }
[dir="rtl"] .why-list li::before { left: auto; right: 2px; }
[dir="rtl"] .faq-col summary { padding: 16px 18px 16px 48px; }
[dir="rtl"] .faq-col summary::after { right: auto; left: 20px; }
[dir="rtl"] .switch-track::after { left: auto; right: 3px; }
[dir="rtl"] .switch input:checked + .switch-track::after { transform: translateX(-18px); }
[dir="rtl"] .docs-body ul, [dir="rtl"] .docs-body ol { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .docs-body th, [dir="rtl"] .docs-body td { padding-right: 0; padding-left: 14px; }
[dir="rtl"] .addr td { padding: 12px 0 12px 12px; }
[dir="rtl"] .hw-grid h3 { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .hw-grid h3::before { left: auto; right: 0; }
[dir="rtl"] .hw-grid p { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .field input, [dir="rtl"] .field output, [dir="rtl"] .crebox input { direction: ltr; text-align: right; }
[dir="rtl"] :is(.v, .s, dd, .reserve-big, .reserve-sub, .fees-big, .backing-pct, .backing-legend b, .activity td, .hex, .linklike, code, pre, .net, #btnWallet) { unicode-bidi: plaintext; }
[dir="rtl"] .docs-body pre, [dir="rtl"] .addr .hex { direction: ltr; text-align: left; }

/* ───────── Pantallas medianas ───────── */
@media (max-width: 1180px) {
  .wrap { padding-left: 28px; padding-right: 28px; }
  .hw-keys.wrap { width: calc(100% - 56px); }
  .top-in { gap: 24px; }
  .links { gap: 18px; }
  .net { display: none; }
  .hero.home, .hero.page, .stake, .reserve-in, .cg-in { grid-template-columns: minmax(0, 1fr) 420px; gap: 36px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .links { display: none; }
  .hero.home, .hero.page, .stake, .reserve-in, .cg-in, .live, .why, .empty, .hw-ch-body, .hw-trust .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero.home .trade-zone, .hero.page .trade-zone, .stakeform { max-width: 560px; width: 100%; }
  .hero-art { min-height: 0; max-width: 560px; width: 100%; }
  .hero.page .trade-zone { order: -1; }
  .hero.page .hero-text { display: contents; }
  .hero.page .page-title { order: -3; }
  .hero.page .lead { order: -2; margin-bottom: 8px; }
  .reserve-side { position: static; }
  .empty { padding-top: 64px; }
  .empty::after { grid-column: 1; grid-row: auto; min-height: 220px; margin-top: 36px; }
  .why { gap: 64px; }
  .hw-hero-in { grid-template-columns: minmax(0, 1fr); }
  .hw-core { height: 70px; flex-direction: row; margin-top: 32px; }
  .hw-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-keys > div:nth-child(3) { border-left: 0; }
  .hw-keys > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  [dir="rtl"] .hw-keys > div:nth-child(3) { border-right: 0; }
  .docs { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .docs-nav { position: sticky; top: 98px; z-index: 15; display: block; max-height: none; overflow: visible; margin: 0 -28px; padding: 0 28px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .docs-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 0; border: 0; background: none; cursor: pointer; text-align: start; }
  .docs-toggle-k { flex: none; font-size: 0.8rem; color: var(--ochre); padding-inline-end: 10px; border-inline-end: 1px solid var(--line); }
  .docs-toggle-v { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .docs-toggle-chev { flex: none; width: 8px; height: 8px; margin: 0 4px 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; }
  .docs-nav.open .docs-toggle-chev { transform: rotate(-135deg); margin-bottom: -3px; }
  .docs-list { display: none; max-height: min(62vh, 500px); overflow-y: auto; padding-bottom: 10px; }
  .docs-nav.open .docs-list { display: flex; }
  .docs-nav .docs-list a { display: flex; align-items: baseline; gap: 14px; padding: 11px 8px; color: var(--text); font-size: 0.98rem; }
  .docs-n { display: inline; flex: none; width: 1.6em; font-family: var(--num); font-size: 0.8rem; color: var(--muted); }
  .docs-nav .docs-list a.on .docs-n { color: var(--ochre); }
  .docs-body { padding-top: 32px; }
  .docs-body section[id], .docs-body h3[id] { scroll-margin-top: 160px; }
  .cg-nav { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 0; }
  .cg-nav .cg, .cg-nav .cg:first-child { width: 6em; margin: 0; }
  /* Sin el menú de arriba, las páginas van en una barra fija abajo. */
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg-2) 94%, transparent); border-top: 1px solid var(--line); }
  @supports (backdrop-filter: blur(8px)) { .tabbar { backdrop-filter: blur(14px) saturate(1.3); } }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 4px; min-height: 52px; text-decoration: none; color: var(--muted); }
  .tabbar .ico { width: 21px; height: 21px; }
  .tabbar span { font-size: 0.66rem; font-weight: 500; line-height: 1.15; text-align: center; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
  .tabbar a[aria-current] { color: var(--text); }
  .tabbar a[aria-current] .ico { color: var(--ochre); }
  .tabbar a[aria-current]::before { content: ""; position: absolute; top: -7px; left: 32%; right: 32%; height: 2px; border-radius: 0 0 2px 2px; background: var(--ochre-fill); }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .wrap { padding-left: 16px; padding-right: 16px; }
  .hw-keys.wrap { width: calc(100% - 32px); }
  .ticker { height: 30px; font-size: 0.7rem; }
  .top-in { height: 58px; gap: 10px; }
  .word { font-size: 1.1rem; }
  .top-right { gap: 4px; }
  .themebtn { width: 36px; height: 36px; }
  .langmenu summary { height: 36px; padding: 0 8px; }
  .top-right > .btn { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; padding: 8px 12px; min-height: 0; font-size: 0.84rem; }
  .hero.home, .hero.page, .stake { padding-top: 32px; gap: 28px; }
  .hero.home { padding-bottom: 16px; }
  h1, .empty h1, .hw-hero h1 { font-size: clamp(2.1rem, 9vw, 2.7rem); }
  .board-row { grid-template-columns: minmax(0, 1fr); }
  .board-row .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
  [dir="rtl"] .board-row .stat + .stat { border-right: 0; }
  .stat { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 14px 16px; }
  .stat .s { flex-basis: 100%; text-align: end; }
  .stat .v { font-size: 1.2rem; }
  .board-row.two { grid-template-columns: minmax(0, 1fr); }
  .board-backing { padding: 16px; }
  .hc-pair { grid-template-columns: minmax(0, 1fr); }
  .hc-pair .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
  [dir="rtl"] .hc-pair .stat + .stat { border-right: 0; }
  .hc-big { font-size: 1.9rem; }
  .hc-reserve, .hc-pair .stat, .hc-backing, .hc-foot, .hc-head { padding-left: 16px; padding-right: 16px; }
  .field input, .field output { font-size: 1.5rem; }
  .trade, form.redeem, .stakeform { padding: 14px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .how, .why { padding-top: 64px; }
  .why { padding-bottom: 72px; }
  .empty { padding-top: 40px; }
  .stake-figs > div { padding: 16px; }
  .stake-figs dd { font-size: 1.15rem; }
  .res-card { padding: 22px; }
  .activity th, .activity td { padding-left: 14px; padding-right: 14px; }
  .addr td:first-child { width: auto; display: block; padding-bottom: 0; border-bottom: 0; }
  .addr td { display: block; padding-right: 0; }
  .docs-nav { margin: 0 -16px; padding: 0 16px; top: 88px; }
  .hw-hero { padding-top: 40px; }
  .hw-keys > div { padding: 16px; }
  .hw-flow { grid-template-columns: minmax(0, 1fr); }
  .hw-cycle { margin-top: 64px; padding: 56px 0; }
  .hw-chapter { padding-top: 64px; }
  .hw-card, .hw-sim { padding: 18px; }
  .hw-card-flush { padding: 0; }
  .hw-table th, .hw-table td { padding-left: 12px; padding-right: 12px; }
  .hw-sim-figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hw-sim-floor { grid-column: 1 / -1; }
  .hw-sim-btns .btn { flex-basis: 100%; }
  .hw-grid { grid-template-columns: minmax(0, 1fr); }
  .hw-trust { margin-top: 72px; }
  .hw-trust .wrap { padding-top: 56px; padding-bottom: 64px; }
  .hw-cta { padding-top: 64px; padding-bottom: 72px; }
}
@media (max-width: 380px) {
  .word { display: none; }
  .tabbar span { font-size: 0.62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-live i { animation: none; }
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .sk, .cg { background: var(--sk-a) !important; }
  .upd::after { display: none; }
}