/* Skopos -- tokens y componentes compartidos entre index.html, lista-nominal.html,
   backtesting.html y glosario.html. Un solo lugar para paleta/tipografia/nav/
   botones -- evita que cada pagina cargue su propia copia y se desincronicen. */

:root{
  --bg: #F3F4EF;
  --bg-raised: #FFFFFF;
  --bg-sunken: #EAEBE3;
  --ink: #14191B;
  --ink-muted: #52605F;
  --ink-faint: #8B968F;
  --line: #D6DAD1;
  --line-strong: #B9C0B4;
  --accent: #0E7C78;
  --accent-strong: #0A5B58;
  --accent-soft: #DCEEEC;
  --brass: #B07C34;
  --brass-soft: #F0E3CC;
  --on-accent: #F3F4EF;
  --shadow: rgba(20,25,27,0.10);
  --font-display: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #10161A; --bg-raised: #161D22; --bg-sunken: #0B1013;
    --ink: #ECEEE8; --ink-muted: #9AA6A4; --ink-faint: #5E6B69;
    --line: #263035; --line-strong: #34423F;
    --accent: #3FD1C9; --accent-strong: #7EE9E1; --accent-soft: #163634;
    --brass: #E0AE5C; --brass-soft: #2A2213;
    --on-accent: #06201F; --shadow: rgba(0,0,0,0.45);
  }
}
:root[data-theme="dark"]{
  --bg: #10161A; --bg-raised: #161D22; --bg-sunken: #0B1013;
  --ink: #ECEEE8; --ink-muted: #9AA6A4; --ink-faint: #5E6B69;
  --line: #263035; --line-strong: #34423F;
  --accent: #3FD1C9; --accent-strong: #7EE9E1; --accent-soft: #163634;
  --brass: #E0AE5C; --brass-soft: #2A2213;
  --on-accent: #06201F; --shadow: rgba(0,0,0,0.45);
}

/* ---------- Reset-ish ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
img,svg,canvas{display:block;max-width:100%;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-display);font-weight:500;margin:0;text-wrap:balance;}
p{margin:0;}
::selection{background:var(--accent);color:var(--on-accent);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.wrap{max-width:1160px;margin:0 auto;padding-inline:32px;}
@media (max-width:640px){ .wrap{padding-inline:20px;} }

.eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent-strong);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent-strong);}

/* ---------- Nav (identica en las 4 paginas) ---------- */
header.site{
  position:sticky;top:0;z-index:40;background:var(--bg);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding-block:16px;gap:16px;flex-wrap:wrap;}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;}
.wordmark .mark{width:26px;height:26px;flex:none;}
.wordmark .mark circle:first-child{stroke:var(--accent);fill:none;stroke-width:7;}
.wordmark .mark circle:last-child{fill:var(--accent);}
.wordmark .text{font-family:var(--font-display);font-size:19px;letter-spacing:0.01em;color:var(--ink);}
.wordmark .tag{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);letter-spacing:0.05em;margin-left:4px;}
@media (max-width:420px){ .wordmark .tag{display:none;} }
.nav-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end;}
.nav a.nav-link{font-family:var(--font-mono);font-size:13px;letter-spacing:0.03em;text-decoration:none;color:var(--ink-muted);}
.nav a.nav-link:hover{color:var(--accent-strong);}
.nav a.cta-link{
  font-family:var(--font-mono);font-size:13px;letter-spacing:0.04em;text-decoration:none;color:var(--ink);
  border:1px solid var(--line-strong);border-radius:2px;padding:8px 14px;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.nav a.cta-link:hover{border-color:var(--accent);color:var(--accent-strong);background:var(--accent-soft);}

/* ---------- Sections / headings ---------- */
section{padding-block:88px;}
section.raised{background:var(--bg-raised);border-block:1px solid var(--line);}
@media (max-width:640px){ section{padding-block:60px;} }

.section-head{max-width:680px;}
.section-head .numeral{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);letter-spacing:0.08em;text-transform:uppercase;}
.section-head h2{font-size:clamp(24px,3.2vw,34px);margin-top:14px;line-height:1.18;}
.section-head .sub{margin-top:12px;color:var(--ink-muted);font-size:15px;max-width:62ch;}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-mono);font-size:13.5px;letter-spacing:0.03em;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:2px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary{background:var(--accent);color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-strong);transform:translateY(-1px);}
.btn-ghost{border:1px solid var(--line-strong);color:var(--ink);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-strong);}

/* ---------- Stat cards (usadas en lista-nominal / backtesting / glosario) --- */
.stats-combo{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.stats-combo .stat{background:var(--bg-raised);padding:26px 22px;}
.stats-combo .stat .num{font-family:var(--font-mono);font-size:26px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;}
.stats-combo .stat .lbl{margin-top:6px;font-size:12.5px;color:var(--ink-muted);line-height:1.4;}
@media (max-width:820px){ .stats-combo{grid-template-columns:1fr 1fr;} }

/* ---------- CTA band de cierre (lista-nominal / backtesting / glosario) --- */
.cta-box{background:var(--accent-soft);border-top:1px solid var(--line-strong);padding-block:44px;}
.cta-box .inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.cta-box p{font-family:var(--font-display);font-style:italic;font-size:18px;color:var(--ink);max-width:52ch;}

footer{padding-block:28px;border-top:1px solid var(--line);}
footer .meta{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);}

/* ---------- Reveal-on-scroll (ver assets/skopos.js) ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none;} }

/* ---------- Pill / badge generico (usado en tablas de casos) ---------- */
.pill{display:inline-block;font-family:var(--font-mono);font-size:10.5px;padding:2px 8px;border-radius:10px;}
.pill.bien{background:var(--accent-soft);color:var(--accent-strong);}
.pill.regular{background:var(--brass-soft);color:var(--brass);}