/* Estilos de las páginas de texto. Mismos tokens que el metrónomo. */
:root{
  --bg:#eceef1; --panel:#ffffff; --fg:#191d22; --muted:#5b6470; --line:#d3d8de; --accent:#b84f12;
  --display:"Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#14171b; --panel:#1d2127; --fg:#eef1f4; --muted:#9aa3ae; --line:#2f353d; --accent:#ff8a3d; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#14171b; --panel:#1d2127; --fg:#eef1f4; --muted:#9aa3ae; --line:#2f353d; --accent:#ff8a3d; color-scheme:dark}

body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.6;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:16px 40px}
main,.top,footer{max-width:640px;margin:0 auto}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.top a{font-family:var(--display);font-weight:900;font-size:20px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg);text-decoration:none}
.top .cta{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;background:var(--accent);color:var(--bg);padding:8px 12px;border-radius:8px;white-space:nowrap}
h1{font-family:var(--display);font-weight:900;font-size:40px;line-height:1.05;letter-spacing:.01em;text-transform:uppercase;margin:28px 0 8px}
h2{font-family:var(--display);font-weight:900;font-size:26px;letter-spacing:.02em;text-transform:uppercase;margin:32px 0 6px}
.lead{font-size:19px;color:var(--muted);margin-top:0}
a{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
ol,ul{padding-left:1.3em}
li{margin:4px 0}
.box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:18px 0}
.box strong{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:4px}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
.ad{min-height:120px;margin:28px 0}
.ad:empty{display:none}
footer{margin-top:36px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 16px}