/* ============================================================
   datchecker · pages.css — shared sheet for content pages
   (before-you-buy · anatomy · hall · credits · 404)
   Self-contained: token names/values mirror desktop.css where they
   overlap. --faint is the WCAG-AA-corrected token — never lower it.
   ============================================================ */
:root{
  --orange:#f7931a; --orange-2:#ffb454;
  --bg:#12100b; --panel:#1a1712; --line:#322c1e;
  --text:#efe6d4; --dim:#a89b81; --faint:#8b8757;
  --ok:#5bd179; --bad:#ef6a58;
  --mono:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* ---------- base ---------- */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  font:14.5px/1.5 var(--sans);color:var(--text);
  background:radial-gradient(800px 420px at 80% -60px,#f7931a12,transparent 60%),var(--bg);
  padding:0 18px 80px;
}
a{color:var(--orange-2);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:#f7931a55}
.dim{color:var(--dim)} .faint{color:var(--faint)}
/* a11y: keyboard focus always gets the 2px Bitcoin-orange ring;
   default outline removed only for mouse/touch focus */
button:focus:not(:focus-visible),a:focus:not(:focus-visible),input:focus:not(:focus-visible),
select:focus:not(:focus-visible),[tabindex]:focus:not(:focus-visible){outline:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #f7931a;outline-offset:2px}
/* ---------- top bar (before-you-buy · anatomy) ---------- */
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;height:44px;
  background:#0e0c07ee;backdrop-filter:blur(10px);border-bottom:1px solid #2c261a;padding:0 16px;font-size:13px;
}
.topbar .brand{display:flex;align-items:center;gap:8px;font-weight:800;cursor:default}
a.brand{color:var(--text);text-decoration:none}
a.brand:hover .coin{filter:brightness(1.1)}
.brand .coin{color:var(--orange)}
.topbar .menu{color:var(--dim);cursor:pointer;padding:3px 8px;border-radius:6px}
.topbar .menu:hover{background:#ffffff0d;color:var(--text)}
.topbar .menu a{color:var(--dim);text-decoration:none;display:block;padding:3px 8px;border-radius:6px}
.topbar .menu:hover a{color:var(--text)}
.topbar .menu.cur a{color:var(--orange);font-weight:700}
.clock{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1}
.clock b{color:var(--orange-2);font-weight:600}
.langs{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;font-size:11.5px}
.langs button{border:0;background:transparent;color:var(--faint);padding:3px 10px;cursor:pointer;font:inherit}
.langs button.on{background:var(--orange);color:#2c1e08;font-weight:700}
/* ---------- plain nav (hall · credits · 404) ---------- */
.top{
  max-width:980px;margin:0 auto;padding:16px 0 26px;
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  font-size:13px;color:var(--dim);border-bottom:1px solid var(--line);
}
.top .brand{color:var(--text);letter-spacing:.02em}
/* ---------- layout ---------- */
.wrap{max-width:880px;margin:0 auto;padding:30px 0 40px}
section.block{margin:38px 0;scroll-margin-top:60px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px}
/* ---------- headings ---------- */
h1{font-size:clamp(26px,4.8vw,39px);line-height:1.16;letter-spacing:-.02em;font-weight:800;margin:14px 0 10px}
h1 .o{color:var(--orange)}
h2{font-size:20px;letter-spacing:-.01em;font-weight:700;margin:0 0 6px}
h3{font-size:14.5px;line-height:1.35;margin:0 0 6px}
.sub{color:var(--dim);max-width:680px}
.hsub{color:var(--dim);font-size:14px;margin-bottom:14px}
.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.42em;color:var(--orange);
  text-transform:uppercase;margin-bottom:16px;
}
.kick{font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--orange);
display:inline-block;border:1px solid #f7931a45;background:#f7931a12;border-radius:99px;padding:6px 12px}
/* ---------- content typography ---------- */
p.body,ul.body{color:var(--dim);font-size:13.8px;margin-top:9px}
ul.body{padding-left:20px} ul.body li{margin:6px 0}
code{font:12px var(--mono);background:#f7931a14;border:1px solid #f7931a26;border-radius:5px;padding:0 5px;color:var(--orange-2)}
pre.code{background:#0d0b07;border:1px solid var(--line);border-radius:10px;padding:15px 17px;overflow-x:auto;
font:12.4px/1.75 var(--mono);color:var(--dim);margin:14px 0}
pre.code b{color:var(--text)} pre.code .g{color:var(--ok)} pre.code .r{color:var(--bad)}
.callout{border:1px solid #8a6a2f;background:#f7931a0d;border-radius:10px;padding:13px 15px;font-size:13px;color:var(--dim);margin-top:13px}
.callout b{color:var(--orange-2)}
.sample{font:12px var(--mono);color:var(--faint);margin-top:10px}
.sample a{color:var(--orange-2);text-decoration:none} .sample a:hover{text-decoration:underline}
blockquote{font-size:16.5px;line-height:1.55;color:var(--text);quotes:"«" "»";
padding-left:16px;border-left:3px solid var(--orange);margin-bottom:14px;white-space:pre-line}
.en-note{display:none;color:var(--faint);font-size:11.5px;font-style:italic}
body[data-lang=es] .en-note,body[data-lang=ru] .en-note{display:inline}
/* ---------- components ---------- */
.hero{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:30px 28px 26px;margin:24px 0;
box-shadow:0 24px 70px -34px #000}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.chip{font:12px var(--mono);color:var(--dim);border:1px solid var(--line);background:#ffffff05;border-radius:99px;padding:4px 11px}
.pill{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11px;border:1px solid var(--faint);color:var(--dim)}
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);
border-radius:10px;overflow:hidden;font-size:13px}
table.cmp{margin-top:14px}
th{text-align:left;padding:9px 13px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
color:var(--faint);border-bottom:1px solid var(--line)}
td{padding:9px 13px;border-bottom:1px solid #262117;color:var(--dim);vertical-align:top}
tr:last-child td{border-bottom:none}
td.m{font-family:var(--mono);font-size:12px}
td.ok{color:var(--ok)} td.bad{color:var(--bad)}
.btn{display:inline-block;padding:12px 20px;border-radius:9px;border:1px solid #b96e0f;
background:linear-gradient(#ffa733,#ef8f13);color:#2c1e08;font-weight:800;text-decoration:none;font-size:14px}
.btn:hover{text-decoration:none;filter:brightness(1.06)}
.btn.ghost{background:#181510;border-color:var(--line);color:var(--text);font-weight:600}
.btn small{display:block;font-weight:400;font-size:11.5px;opacity:.8}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.cta .btn{width:auto;flex:1 1 200px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:13px 18px}
.foot-note{color:var(--dim);font-size:13px;margin-top:16px}
.foot-note a{color:var(--orange-2)}
a.raw{margin-top:auto;font-family:var(--mono);font-size:12px;color:var(--orange-2);text-decoration:none}
a.raw::before{content:"⇢ ";color:var(--faint)}
a.raw:hover{text-decoration:underline}
footer{border-top:1px solid var(--line);margin-top:46px;padding-top:16px;color:var(--faint);font-size:12.5px;
display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer a{color:var(--dim)}
.foot{max-width:980px;margin:46px auto 0;padding-top:18px;border-top:1px solid var(--line);
color:var(--faint);font-size:12.5px;line-height:1.7}
.foot a{color:inherit;text-decoration:underline}
/* ---------- responsive ---------- */
@media (max-width:840px){
  /* tablas comparativas: scroll horizontal propio en vez de romper el viewport */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .wrap{padding:20px 0 30px}
  .topbar{flex-wrap:wrap;height:auto;padding:8px 10px;gap:6px 10px}
  .topbar .menu{display:inline-block}
  .topbar .menu a{padding:3px 6px;font-size:12px}
  .clock{display:none}
  .hero{padding:22px 16px}
  .cta .btn{flex:1 1 100%}
  pre.code{font-size:11px;padding:12px}
}
/* a11y: reduced motion — cancels transitions and animations */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}