/* Bitna — identidad: papel moneda. Tinta verde sobre papel pálido, sello naranja para el suelo. */

@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Cirílico: las dos tipografías de la identidad no lo incluyen. Estas lo cubren con un carácter parecido
   y el navegador solo las descarga si la página tiene texto en cirílico. */
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display-cyrillic-wght-normal.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  src: url("fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --paper: #edf0e8;
  --sheet: #f8faf5;
  --ink: #11231c;
  --green: #1e5a45;
  --deep: #0e2a20;
  --seal: #e07f10;
  --seal-ink: #a85600;
  --line: #c3cdbf;
  --muted: #55665d;
  --bad: #9b2c1f;
  --display: "Bodoni Moda", "Playfair Display", "Bodoni 72", Didot, "Times New Roman", serif;
  --ui: "Instrument Sans", "Onest", "Segoe UI", system-ui, sans-serif;
  --maxw: 1140px;
}
/* Chino, japonés y coreano: las letras latinas siguen con la identidad; los caracteres propios usan las
   tipografías del sistema (una con remates para los títulos, como la Bodoni, y una de palo seco para el resto). */
:lang(zh) {
  --display: "Bodoni Moda", "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", SimSun, serif;
  --ui: "Instrument Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
}
:lang(ja) {
  --display: "Bodoni Moda", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --ui: "Instrument Sans", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
}
:lang(ko) {
  --display: "Bodoni Moda", "AppleMyungjo", "Nanum Myeongjo", "Noto Serif KR", "Noto Serif CJK KR", Batang, serif;
  --ui: "Instrument Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased;
}
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; }
main { overflow-x: clip; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: 28px; padding-right: 28px; }
section[id] { scroll-margin-top: 84px; }

:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }

/* ───────── Cabecera ───────── */
.top { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 20; }
.top-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mark { width: 30px; height: 30px; color: var(--ink); }
.word { font: 600 1.6rem/1 var(--display); font-variation-settings: "opsz" 28; letter-spacing: -0.01em; }
.links { display: flex; gap: 26px; margin-left: 10px; }
.links a { text-decoration: none; font-size: 0.95rem; color: var(--muted); }
.links a:hover { color: var(--ink); }
.links a[aria-current] { color: var(--ink); font-weight: 600; box-shadow: 0 2px 0 var(--seal); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.net { font-size: 0.82rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.langmenu { position: relative; }
.langmenu summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 4px; font-size: 0.88rem; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; }
.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(--ink); }
.langlist { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; min-width: 172px; display: grid; padding: 6px; background: var(--sheet); border: 1px solid var(--ink); }
.langlist button { text-align: left; background: none; border: 0; padding: 8px 12px; font: 500 0.95rem/1.3 var(--ui); cursor: pointer; }
.langlist button:hover { background: #e3e8dc; }
.langlist button[aria-current] { font-weight: 700; box-shadow: inset 2px 0 0 var(--seal); }

/* ───────── Botones ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: 3px;
  padding: 13px 22px; font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn:hover:not(:disabled) { background: var(--green); border-color: var(--green); }
.btn:disabled { background: transparent; color: var(--muted); border-color: var(--line); cursor: not-allowed; }
.btn.small { padding: 8px 14px; font-size: 0.9rem; }
.btn.wide { width: 100%; }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn.ghost:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.seal { background: var(--seal); border-color: var(--seal); color: #1d1002; }
.btn.seal:hover:not(:disabled) { background: #f09326; border-color: #f09326; }
.btn.seal:disabled { background: transparent; color: #8fa89b; border-color: #35594a; }
.linklike { background: none; border: 0; padding: 0; color: var(--seal-ink); font-size: 0.85rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linklike:empty { display: none; }

/* ───────── Portada ───────── */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; padding-top: 64px; padding-bottom: 72px; align-items: start; }
.hero h1 {
  font: 500 clamp(2.7rem, 6.2vw, 5rem)/1.02 var(--display);
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.022em;
  max-width: 11.5em;
  text-wrap: balance;
}
.lead { margin-top: 26px; max-width: 34em; font-size: 1.12rem; color: #2b3d35; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Título de las páginas interiores: la misma letra que la portada, un punto más contenida. */
.page-title, .hero.page .page-title { font: 500 clamp(2.3rem, 4.6vw, 3.6rem)/1.04 var(--display); font-variation-settings: "opsz" 72; letter-spacing: -0.02em; text-wrap: balance; max-width: 12em; }
.hero.page { padding-top: 56px; }
.hero.page .backing { margin-top: 40px; }
.hero.page .faq-more { margin-top: 26px; }

.backing { margin-top: 44px; max-width: 560px; }
.backing-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.backing-title { font-weight: 600; }
.backing-pct { font: 500 2.1rem/1 var(--display); font-variation-settings: "opsz" 40; font-feature-settings: "lnum", "tnum"; }
.meter { margin-top: 12px; height: 22px; border: 1px solid var(--ink); background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(17, 35, 28, 0.12) 9px 10px); position: relative; }
.meter-fill { height: 100%; width: 0%; background: var(--seal); border-right: 1px solid var(--ink); transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.backing-legend { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 12px; font-size: 0.93rem; color: var(--muted); }
.backing-legend b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border: 1px solid var(--ink); vertical-align: -1px; }
.dot-floor { background: var(--seal); }
.dot-price { background: transparent; }
.backing-note { margin-top: 12px; font-size: 0.93rem; color: var(--muted); max-width: 44em; }

/* ───────── Compra y venta ───────── */
.trade-zone { position: relative; }
.rosette { position: absolute; width: 150%; left: -25%; top: -90px; color: var(--line); pointer-events: none; z-index: 0; }
.rosette path { fill: none; stroke: currentColor; stroke-width: 0.6; }

.trade {
  position: relative; z-index: 1;
  background: var(--sheet);
  border: 1px solid var(--ink);
  outline: 1px solid var(--ink); outline-offset: 4px;
  border-radius: 2px;
  padding: 22px;
  margin: 5px;
}
/* Tarjeta de la portada: la reserva y el respaldo, enmarcados como el formulario de compra. */
.seal-card { padding: 28px 26px 24px; }
.seal-label { font-weight: 600; }
.seal-big { margin-top: 10px; font: 500 clamp(2.4rem, 4.6vw, 3.4rem)/1 var(--display); font-variation-settings: "opsz" 72; font-feature-settings: "lnum"; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.seal-unit { font: 600 1.05rem var(--ui); letter-spacing: 0; color: var(--seal-ink); }
.seal-sub { margin-top: 8px; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.5em; }
.seal-card .backing { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); max-width: none; }

.tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); margin-bottom: 18px; }
.tabs button { background: transparent; border: 0; padding: 11px; font-weight: 600; cursor: pointer; color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }

.field { display: block; border: 1px solid var(--line); background: #fff; padding: 12px 14px; }
.field + .field { margin-top: 10px; }
.field.out { background: transparent; border-style: dashed; }
.field:focus-within { border-color: var(--ink); }
.field-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; color: var(--muted); }
.field-row { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; }
.field input, .field output {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 0;
  font-size: 1.7rem; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.field input:focus { outline: none; }
.field input::placeholder { color: #a9b5ab; }
.unit { font-weight: 600; color: var(--muted); white-space: nowrap; }
.cursel {
  appearance: none; -webkit-appearance: none; border: 1px solid var(--line); border-radius: 0; cursor: pointer;
  padding: 5px 28px 5px 10px; font-weight: 600; color: var(--ink);
  background: var(--sheet) 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='%2311231c' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 6px;
}
.cursel:hover { border-color: var(--ink); }
.cursel:disabled { border-color: transparent; background: none; padding: 0; color: var(--muted); opacity: 1; cursor: default; }

.quote { margin-top: 16px; font-size: 0.92rem; }
.quote > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-top: 1px solid var(--line); }
.quote > div:first-child { border-top: 0; }
.quote dt { color: var(--muted); }
.quote dd { font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.seg { display: inline-flex; border: 1px solid var(--line); }
.seg button { background: transparent; border: 0; padding: 3px 9px; font-size: 0.84rem; cursor: pointer; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.trade .btn.wide { margin-top: 16px; }
.msg { margin-top: 10px; font-size: 0.9rem; color: var(--muted); min-height: 1.4em; }
.msg.inline { margin: 0; min-height: 0; }
.msg.ok { color: var(--green); font-weight: 600; }
.msg.bad { color: var(--bad); }

/* ───────── Cifras ───────── */
.ledger { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding-top: 0; padding-bottom: 0; }
.ledger.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Cuando las cifras cierran la página, dejan aire antes del pie. */
#app > .ledger:last-child { margin-bottom: 72px; }
.ledger .cell { padding: 22px 18px 20px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ledger .cell:first-child { border-left: 0; padding-left: 0; }
.ledger .k { font-size: 0.88rem; color: var(--muted); }
.ledger .v { font-size: 1.32rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.25; }
.ledger .s { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.3em; }

/* ───────── Las tres puertas de la portada ───────── */
.doors { background: var(--deep); color: #e6ece3; margin-top: 72px; }
.doors-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doors article { display: flex; flex-direction: column; align-items: flex-start; padding: 56px 32px 60px 0; }
.doors article + article { padding-left: 32px; border-left: 1px solid #1f4335; }
.doors h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); color: #f4f7f0; }
.doors p { margin: 14px 0 26px; color: #b7c7bc; max-width: 30em; }
.doors .btn { margin-top: auto; }

/* ───────── Cómo funciona ───────── */
.how { padding-top: 84px; padding-bottom: 92px; }
h2 { font: 500 clamp(1.9rem, 3.4vw, 2.6rem)/1.1 var(--display); font-variation-settings: "opsz" 48; letter-spacing: -0.015em; }
.steps { counter-reset: paso; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 38px; border-top: 1px solid var(--ink); }
.steps li { counter-increment: paso; padding: 22px 22px 0 0; position: relative; }
.steps li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.steps li::before { content: counter(paso); display: block; font: 600 2.6rem/1 var(--display); font-variation-settings: "opsz" 60; color: var(--seal-ink); margin-bottom: 14px; }
.steps h3 { font-size: 1.08rem; font-weight: 600; }
.steps p { margin-top: 8px; color: #33453d; font-size: 0.98rem; }

/* ───────── Reserva ───────── */
.reserve { background: var(--deep); color: #e6ece3; padding: 84px 0 92px; }
.reserve-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 56px; align-items: start; }
.reserve h2, .reserve .page-title { color: #f4f7f0; }
.reserve.page { padding-top: 64px; }
.reserve-lead { margin-top: 14px; max-width: 34em; color: #b7c7bc; }
.reserve-big { margin-top: 34px; font: 500 clamp(2.6rem, 6.5vw, 4.8rem)/1 var(--display); font-variation-settings: "opsz" 96; font-feature-settings: "lnum"; letter-spacing: -0.02em; color: #fbfcf8; overflow-wrap: anywhere; }
.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: 600 1.15rem var(--ui); letter-spacing: 0; color: var(--seal); }
.reserve-sub { margin-top: 12px; color: #b7c7bc; font-variant-numeric: tabular-nums; min-height: 1.5em; }

.table-title { margin-top: 48px; font: 600 1.05rem/1.3 var(--ui); letter-spacing: 0; color: #f4f7f0; }
.table-scroll { overflow-x: auto; margin-top: 12px; }
.activity { width: 100%; border-collapse: collapse; font-size: 0.93rem; font-variant-numeric: tabular-nums; }
.activity th { text-align: left; font-weight: 500; color: #9fb3a7; padding: 9px 12px 9px 0; border-bottom: 1px solid #35594a; white-space: nowrap; }
.activity td { padding: 11px 12px 11px 0; border-bottom: 1px solid #1f4335; white-space: nowrap; }
.activity .num { text-align: right; padding-right: 0; padding-left: 12px; }
.activity .plus { color: #f2a653; }
.activity a { text-decoration: none; }
.activity tr.link { cursor: pointer; }
.activity tr.link:hover td, .activity tr.link:focus-within td { background: #14372b; }
.activity tr.link:hover a, .activity a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.activity .who { color: #9fb3a7; margin-left: 8px; font-size: 0.85rem; }
.table-empty { margin-top: 14px; color: #9fb3a7; }

.redeem { border: 1px solid #35594a; padding: 24px; background: #123327; }
.redeem h2 { font: 500 1.6rem/1.1 var(--display); font-variation-settings: "opsz" 32; color: #f4f7f0; }
.redeem-lead { margin-top: 8px; margin-bottom: 18px; color: #b7c7bc; font-size: 0.96rem; }
.field.dark { background: #0e2a20; border-color: #35594a; }
.field.dark:focus-within { border-color: var(--seal); }
.field.dark .field-top, .field.dark .unit { color: #9fb3a7; }
.field.dark input { color: #fbfcf8; }
.field.dark input::placeholder { color: #55776a; }
.field.dark .linklike { color: #f2a653; }
.quote.dark > div { border-top-color: #1f4335; }
.quote.dark dt { color: #9fb3a7; }
.hint { margin-top: 12px; font-size: 0.9rem; color: #b7c7bc; min-height: 1.4em; }
.redeem .btn.wide { margin-top: 14px; }
.redeem .msg { color: #b7c7bc; }
.redeem .msg.ok { color: #8fd6b3; }
.redeem .msg.bad { color: #f1a092; }

/* ───────── Riesgos y preguntas ───────── */
/* ───────── Staking ───────── */
.stake.page { padding-top: 56px; padding-bottom: 88px; }
.stake .faq-more { margin-top: 22px; }
.stake { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: start; padding-top: 88px; padding-bottom: 8px; }
.stake-lead { margin-top: 14px; max-width: 34em; color: #33453d; }
.stake-figs { margin-top: 30px; border-top: 1px solid var(--ink); }
.stake-figs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.stake-figs dt { color: var(--muted); }
.stake-figs dd { font-size: 1.32rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.stake-wait { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--seal); background: var(--sheet); max-width: 36em; }
.stake-wait[hidden] { display: none; }
.pending { margin-top: 14px; font-size: 0.92rem; max-width: 36em; }
.pending[hidden] { display: none; }
.pending.dark { color: #b7c7bc; }
.pending .msg.inline { display: block; margin-top: 4px; }
.stake-note { margin-top: 12px; font-size: 0.9rem; color: var(--muted); max-width: 36em; }
.stakeform .quote { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--ink); }
.stake-actions { display: flex; gap: 10px; margin-top: 12px; }
.stake-actions .btn { flex: 1; }
.stake-actions[hidden] { display: none; }
/* Interruptor de reinversión automática */
.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: 42px; height: 24px; margin-top: 2px; border: 1px solid var(--ink); border-radius: 12px; background: transparent; transition: background 0.12s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: transform 0.12s, background 0.12s; }
.switch input:checked + .switch-track { background: var(--green); border-color: var(--green); }
.switch input:checked + .switch-track::after { transform: translateX(18px); background: var(--sheet); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--seal); outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: 0.45; }
.switch-text { display: grid; gap: 2px; font-size: 0.9rem; }
.switch-text strong { font-weight: 600; }
.switch-text span { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .switch-track, .switch-track::after { transition: none; } }

.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding-top: 88px; padding-bottom: 80px; }
.why-lead { margin-top: 14px; color: #33453d; max-width: 30em; }
.why-list { margin-top: 24px; border-top: 1px solid var(--ink); }
.why-list li { padding: 16px 0 16px 26px; border-bottom: 1px solid var(--line); position: relative; max-width: 38em; }
.why-list li::before { content: ""; position: absolute; left: 0; top: 1.55em; width: 12px; height: 12px; background: var(--seal); border: 1px solid var(--ink); }
.why-list h3 { font-size: 1.05rem; font-weight: 600; }
.why-list p { margin-top: 4px; color: #33453d; }
.faq-more { margin-top: 20px; font-weight: 600; }
.faq-more a { color: var(--seal-ink); text-underline-offset: 3px; }
.localhint { margin-top: 8px; font-size: 0.9rem; color: var(--muted); }
.faq-col details { border-bottom: 1px solid var(--line); }
.faq-col h2 { margin-bottom: 24px; padding-bottom: 0; }
.faq-col details:first-of-type { border-top: 1px solid var(--ink); }
.faq-col summary { cursor: pointer; padding: 15px 28px 15px 0; font-weight: 600; list-style: none; position: relative; }
.faq-col summary::-webkit-details-marker { display: none; }
.faq-col summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 1.3rem; font-weight: 400; color: var(--muted); }
.faq-col details[open] summary::after { content: "−"; }
.faq-col details p { padding: 0 0 18px; color: #33453d; max-width: 36em; }

/* ───────── Tabla de contratos (documentación) ───────── */
.addr { width: 100%; border-collapse: collapse; margin-top: 22px; border-top: 1px solid var(--ink); font-size: 0.95rem; }
.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-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.addr td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }

/* ───────── Pie ───────── */
.foot { border-top: 1px solid var(--ink); padding: 26px 0 40px; }
.foot-in { display: flex; flex-direction: column; gap: 16px; }
.local { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 0.92rem; padding: 12px 14px; border: 1px dashed var(--muted); }
.foot-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; }
.foot-links { display: flex; gap: 24px; font-size: 0.92rem; }
.foot-links a { color: var(--ink); text-underline-offset: 3px; }
.legal { font-size: 0.88rem; color: var(--muted); }

/* ───────── Vacío y diálogo ───────── */
.empty { padding-top: 110px; padding-bottom: 140px; max-width: 760px; }
.empty h1 { font: 500 clamp(2.2rem, 5vw, 3.4rem)/1.05 var(--display); font-variation-settings: "opsz" 72; letter-spacing: -0.02em; }
.empty p { margin: 20px 0 28px; color: #33453d; }

.dialog { border: 1px solid var(--ink); border-radius: 2px; background: var(--sheet); color: var(--ink); padding: 26px; width: min(92vw, 380px); }
.dialog::backdrop { background: rgba(14, 42, 32, 0.55); }
.dialog h3 { font: 500 1.5rem/1.1 var(--display); font-variation-settings: "opsz" 32; 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: left; background: #fff; border: 1px solid var(--line); padding: 12px 14px; font-weight: 600; cursor: pointer; }
.wallet-list button:hover { border-color: var(--ink); }
.wallet-list img { width: 26px; height: 26px; }

/* ───────── Adaptación ───────── */
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 44px; padding-bottom: 56px; }
  .rosette { width: 110%; left: -5%; top: -40px; }
  .reserve-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .why { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  /* En la página de operar, con una sola columna, el formulario va justo después del título. */
  .hero.page { gap: 0; }
  .hero.page .hero-text { display: contents; }
  .hero.page .page-title { order: 1; }
  .hero.page .lead { order: 2; margin-top: 18px; }
  .hero.page .trade-zone { order: 3; margin-top: 34px; }
  .hero.page .backing { order: 4; margin-top: 44px; }
  .hero.page .faq-more { order: 5; }
  .doors-in { grid-template-columns: minmax(0, 1fr); }
  .doors article, .doors article + article { padding: 36px 0; border-left: 0; }
  .doors article + article { border-top: 1px solid #1f4335; }
  .stake { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 64px; }
  .ledger, .ledger.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger .cell { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .ledger .cell:nth-child(-n + 2) { border-top: 0; }
  .ledger .cell:nth-child(even) { border-left: 1px solid var(--line); padding-left: 18px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .steps li:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 22px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding-left: 18px; padding-right: 18px; }
  /* En pantallas estrechas el menú baja a una segunda línea, deslizable si no cabe. */
  .top-in { flex-wrap: wrap; gap: 0 12px; height: auto; padding-top: 12px; }
  .links { order: 3; width: 100%; margin: 10px 0 0; gap: 22px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line); }
  .links::-webkit-scrollbar { display: none; }
  .links a { padding: 11px 0; white-space: nowrap; }
  .links a[aria-current] { box-shadow: inset 0 -2px 0 var(--seal); }
  .doors { margin-top: 48px; }
  .hero-cta .btn { flex: 1 1 auto; }
  .net { display: none; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li, .steps li + li { padding-left: 0; border-left: 0; }
  .steps li + li { border-top: 1px solid var(--line); margin-top: 22px; }
  .how, .why { padding-top: 60px; padding-bottom: 60px; }
  .reserve { padding: 60px 0 64px; }
  .trade { padding: 16px; }
  .addr td:first-child { width: auto; display: block; padding-bottom: 0; border-bottom: 0; }
  .addr td { display: block; padding-right: 0; }
  .addr td:last-child { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .meter-fill, .btn { transition: none; }
}

/* ───────── Documentación ───────── */
.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; padding-top: 56px; padding-bottom: 96px; align-items: start; }
.docs-nav { position: sticky; top: 96px; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.docs-nav a { text-decoration: none; color: var(--muted); font-size: 0.95rem; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; }
.docs-nav a:hover { color: var(--ink); }
.docs-nav a.on { color: var(--ink); font-weight: 600; border-left-color: var(--seal); }
.docs-body { max-width: 44em; }
.docs-body h1 { font: 500 clamp(2.4rem, 5vw, 3.6rem)/1.04 var(--display); font-variation-settings: "opsz" 72; letter-spacing: -0.02em; }
.docs-body .intro { margin-top: 18px; font-size: 1.12rem; color: #2b3d35; }
.docs-body section { padding-top: 52px; }
.docs-body h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.docs-body h3 { font-size: 1.05rem; font-weight: 600; 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: square; }
.docs-body ol { list-style: decimal; }
.docs-body li { margin-top: 7px; padding-left: 4px; }
.docs-body li::marker { color: var(--seal-ink); }
.docs-body code { font: 0.9em ui-monospace, "Cascadia Mono", Consolas, monospace; background: #e1e6db; padding: 1px 5px; }
.docs-body pre { margin-top: 16px; background: var(--deep); color: #e6ece3; padding: 16px 18px; overflow-x: auto; font: 0.9rem/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; }
.docs-body pre code { background: none; padding: 0; font: inherit; }
.docs-body .key { margin-top: 18px; padding: 14px 18px; border: 1px solid var(--ink); background: var(--sheet); }
.docs-body table { width: 100%; border-collapse: collapse; margin-top: 18px; border-top: 1px solid var(--ink); font-size: 0.95rem; }
.docs-body th { text-align: left; font-weight: 600; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.docs-body td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.docs-body td.hex { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.docs-body .num { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 960px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 36px; }
  .docs-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 16px; border-left: 0; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
  .docs-nav a { padding: 3px 0; margin: 0; border-left: 0; }
  .docs-nav a.on { border-left: 0; }
}

/* ───────── Ajustes por idioma ───────── */
/* Los caracteres chinos, japoneses y coreanos son más densos que las letras latinas: sin apretar el
   espaciado, con más aire entre líneas y un punto menos de tamaño en los títulos grandes. */
:lang(zh) :is(h1, h2), :lang(ja) :is(h1, h2), :lang(ko) :is(h1, h2) { letter-spacing: 0; line-height: 1.25; font-weight: 600; }
:lang(zh) .hero h1, :lang(ja) .hero h1, :lang(ko) .hero h1 { font-size: clamp(2.2rem, 4.8vw, 3.9rem); max-width: 13em; }
:lang(zh) .docs-body h1, :lang(ja) .docs-body h1, :lang(ko) .docs-body h1 { font-size: clamp(2.1rem, 4.2vw, 3rem); }
html:lang(zh), html:lang(ja) { line-break: strict; }
/* El título de portada en chino y japonés solo se parte donde el texto lo indica (espacios de ancho cero),
   para no cortar una palabra por la mitad. */
:lang(zh) .hero h1, :lang(ja) .hero h1 { word-break: keep-all; text-wrap: wrap; }
html:lang(ko) { word-break: keep-all; }
html:lang(zh) body, html:lang(ja) body, html:lang(ko) body { line-height: 1.7; }
/* El cirílico de la Playfair es más ancho que la Bodoni. */
:lang(ru) .hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); letter-spacing: -0.01em; line-height: 1.08; max-width: 13em; }
:lang(ru) :is(h2, .docs-body h1) { letter-spacing: -0.005em; }

/* ───────── Comisiones acumuladas (reserva) y nota de la comisión (operar) ───────── */
.reserve-figs { margin-top: 22px; max-width: 34em; }
.reserve-figs dd { color: #f4f7f0; overflow-wrap: anywhere; }
.fees-big { margin-top: 12px; font: 500 clamp(1.8rem, 3.6vw, 2.4rem)/1.1 var(--display); font-variation-settings: "opsz" 40; font-feature-settings: "lnum", "tnum"; color: #fbfcf8; }
.fees-of { font: 400 0.95rem var(--ui); color: #9fb3a7; }
.fees-meter { max-width: 34em; border-color: #35594a; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(230, 236, 227, 0.08) 9px 10px); }
.fees-meter .meter-fill { border-right-color: #35594a; }
.fees-status { margin-top: 12px; font-size: 0.93rem; color: #f2a653; min-height: 1.4em; max-width: 36em; }
.fees-note { margin-top: 8px; font-size: 0.9rem; color: #9fb3a7; max-width: 36em; }
.fee-note { margin-top: 8px; font-size: 0.85rem; color: var(--muted); }

/* ───────── Cifras en vivo: esqueletos, brillo de actualización y cambios ───────── */
/* Colores del esqueleto y del brillo: tinta sobre papel en las zonas claras, y sobre verde en las oscuras. */
:root { --sk-a: #dde3d6; --sk-b: #eef2ea; --sweep: rgba(255, 255, 255, 0.75); --up: #1d7a52; --down: var(--bad); }
.reserve, .doors { --sk-a: #17392d; --sk-b: #22493b; --sweep: rgba(242, 166, 83, 0.16); --up: #7fdcae; --down: #f1a092; }
.sk {
  color: transparent !important;
  border-radius: 3px;
  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: bitna-sk 1.4s ease-in-out infinite;
  user-select: none;
  text-decoration: none !important;
}
.sk > * { visibility: hidden; }
/* Tamaño de cada esqueleto: el de la cifra que va a ocupar su sitio. */
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; }
.ledger .v.sk { align-self: flex-start; width: 8em; }
.ledger .s.sk { align-self: flex-start; width: 6.5em; }
#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%); }
.seal-sub.sk, .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; }
.activity tr.sk-row td { border-bottom-color: #1f4335; }
/* Al llegar el dato, aparece suavemente. */
.sk-in { animation: bitna-in 0.4s ease-out; }
/* Franja de brillo que pasa sobre una cifra mientras se actualiza. */
.upd { position: relative; }
.upd::after {
  content: ""; position: absolute; inset: -2px -3px; pointer-events: none; border-radius: 3px;
  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;
}
/* La cifra que cambia se ilumina un instante: verde si sube, rojo si baja. */
.up { animation: bitna-up 1.6s ease-out; }
.down { animation: bitna-down 1.6s ease-out; }
@keyframes bitna-sk { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes bitna-in { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes bitna-sweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes bitna-up { 0%, 35% { color: var(--up); } }
@keyframes bitna-down { 0%, 35% { color: var(--down); } }
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; background: var(--sk-a) !important; }
  .sk-in, .up, .down { animation: none; }
  .upd::after { display: none; }
}

/* ───────── Idiomas nuevos: hindi, bengalí y árabe ───────── */
/* Las letras latinas y las cifras siguen con la identidad; los caracteres propios de cada escritura usan las
   tipografías del sistema. Estas escrituras unen o apilan sus letras: sin apretar el espaciado y con más
   aire entre líneas. */
:lang(hi) {
  --display: "Bodoni Moda", "Noto Serif Devanagari", "Kohinoor Devanagari", "Nirmala UI", "Mangal", serif;
  --ui: "Instrument Sans", "Noto Sans Devanagari", "Kohinoor Devanagari", "Nirmala UI", "Mangal", system-ui, sans-serif;
}
:lang(bn) {
  --display: "Bodoni Moda", "Noto Serif Bengali", "Kohinoor Bangla", "Nirmala UI", "Vrinda", serif;
  --ui: "Instrument Sans", "Noto Sans Bengali", "Kohinoor Bangla", "Nirmala UI", "Vrinda", system-ui, sans-serif;
}
:lang(ar) {
  --display: "Bodoni Moda", "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", "Segoe UI", serif;
  --ui: "Instrument Sans", "Noto Sans Arabic", "Segoe UI", "Geeza Pro", Tahoma, system-ui, sans-serif;
}
: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; font-weight: 600; }
:lang(hi) .hero h1, :lang(bn) .hero h1, :lang(ar) .hero h1 { font-size: clamp(2.2rem, 4.8vw, 3.8rem); max-width: 14em; }
:lang(hi) .page-title, :lang(bn) .page-title, :lang(ar) .page-title, :lang(hi) .docs-body h1, :lang(bn) .docs-body h1, :lang(ar) .docs-body h1 { font-size: clamp(2.05rem, 4.2vw, 3rem); line-height: 1.3; }
/* La lista de idiomas cabe en pantallas bajas. */
.langlist { max-height: min(70vh, 560px); overflow-y: auto; }

/* ───────── Derecha a izquierda (árabe) ───────── */
/* La página se muestra en espejo. Las cifras, direcciones y cantidades se leen siempre de izquierda a derecha. */
[dir="rtl"] .links { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .top-right { margin-left: 0; margin-right: auto; }
[dir="rtl"] .langlist { right: auto; left: 0; }
[dir="rtl"] .langlist button { text-align: right; }
[dir="rtl"] .langlist button[aria-current] { box-shadow: inset -2px 0 0 var(--seal); }
[dir="rtl"] .meter-fill { border-right: 0; border-left: 1px solid var(--ink); }
[dir="rtl"] .fees-meter .meter-fill { border-left-color: #35594a; }
[dir="rtl"] .dot { margin-right: 0; margin-left: 7px; }
[dir="rtl"] .cursel { padding: 5px 10px 5px 28px; background-position: left 10px center; }
[dir="rtl"] .quote dd, [dir="rtl"] .stake-figs dd { text-align: left; }
[dir="rtl"] .seg button + button { border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .ledger .cell { border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .ledger .cell:first-child { border-right: 0; padding-left: 18px; padding-right: 0; }
[dir="rtl"] .doors article { padding: 56px 0 60px 32px; }
[dir="rtl"] .doors article + article { padding-left: 32px; padding-right: 32px; border-left: 0; border-right: 1px solid #1f4335; }
[dir="rtl"] .steps li { padding: 22px 0 0 22px; }
[dir="rtl"] .steps li + li { padding-left: 22px; padding-right: 22px; border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .activity th { text-align: right; padding: 9px 0 9px 12px; }
[dir="rtl"] .activity td { padding: 11px 0 11px 12px; }
[dir="rtl"] .activity .num { text-align: left; padding-left: 0; padding-right: 12px; }
[dir="rtl"] .activity .who { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .stake-wait { border-left: 0; border-right: 3px solid var(--seal); }
[dir="rtl"] .switch-track::after { left: auto; right: 3px; }
[dir="rtl"] .switch input:checked + .switch-track::after { transform: translateX(-18px); }
[dir="rtl"] .why-list li { padding: 16px 26px 16px 0; }
[dir="rtl"] .why-list li::before { left: auto; right: 0; }
[dir="rtl"] .faq-col summary { padding: 15px 0 15px 28px; }
[dir="rtl"] .faq-col summary::after { right: auto; left: 4px; }
[dir="rtl"] .addr td { padding: 12px 0 12px 12px; }
[dir="rtl"] .addr td:last-child { text-align: left; padding-left: 0; }
[dir="rtl"] .wallet-list button { text-align: right; }
[dir="rtl"] .docs-nav { border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .docs-nav a { padding: 7px 16px 7px 0; margin-left: 0; margin-right: -1px; border-left: 0; border-right: 2px solid transparent; }
[dir="rtl"] .docs-nav a.on { border-right-color: var(--seal); }
[dir="rtl"] .docs-body ul, [dir="rtl"] .docs-body ol { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .docs-body li { padding-left: 0; padding-right: 4px; }
[dir="rtl"] .docs-body th { text-align: right; padding: 10px 0 10px 12px; }
[dir="rtl"] .docs-body td { padding: 10px 0 10px 12px; }
[dir="rtl"] .docs-body .num { text-align: left; padding-left: 0; }
/* Cantidades, cifras, direcciones y código: siempre de izquierda a derecha. */
[dir="rtl"] .field input, [dir="rtl"] .field output { direction: ltr; text-align: right; }
[dir="rtl"] :is(.v, .s, dd, .seal-big, .seal-sub, .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; }
/* Las cifras, aunque se lean de izquierda a derecha, se alinean a la derecha como el resto de la página. */
[dir="rtl"] :is(.ledger .v, .ledger .s, .seal-big, .seal-sub, .reserve-big, .reserve-sub, .fees-big, .backing-legend b) { text-align: right; }
@media (max-width: 960px) {
  [dir="rtl"] .doors article, [dir="rtl"] .doors article + article { padding: 36px 0; border-right: 0; }
  [dir="rtl"] .ledger .cell, [dir="rtl"] .ledger .cell:first-child { border-right: 0; padding-right: 0; padding-left: 0; }
  [dir="rtl"] .ledger .cell:nth-child(even) { border-left: 0; border-right: 1px solid var(--line); padding-left: 0; padding-right: 18px; }
  [dir="rtl"] .steps li:nth-child(odd) { padding-right: 0; border-right: 0; }
  [dir="rtl"] .docs-nav { border-right: 0; }
  [dir="rtl"] .docs-nav a { padding: 3px 0; margin: 0; border-right: 0; }
}
@media (max-width: 640px) {
  [dir="rtl"] .steps li, [dir="rtl"] .steps li + li { padding-right: 0; padding-left: 0; border-right: 0; }
  [dir="rtl"] .addr td, [dir="rtl"] .addr td:last-child { padding-left: 0; text-align: right; }
}