/* ============================================================
   Brainr — site tokens & base styles
   Implements BRAND_OS-v2 (D-019, D-032.3, D-033).
   Tier 1 primitives live here only. Components consume Tier 2
   semantic aliases — never raw hex.
   ============================================================ */

:root{
  /* ── Tier 1: primitives (theme-invariant) ─────────────────── */
  --blue:#4E71F7; --blue-700:#3E5FE0; --blue-300:#8AA0FB;
  --blue-400:#6E8BFF; --blue-900:#34409E;
  --cyan:#57E2EE; --slate:#263238;
  --grad:linear-gradient(68deg,#4E71F7 0%,#57E2EE 100%);
  --n50:#F4F6F7; --n100:#E9EDEF; --n200:#D3DADD; --n300:#B0BBBF;
  --n400:#8A979C; --n500:#67757B; --n600:#4E5C62; --n700:#3B474C;
  --n800:#2E383D; --n900:#263238; --d950:#1C2529; --d975:#141B1F;

  /* ── Tier 2: semantic aliases (light mapping) ─────────────── */
  --bg:var(--n50);
  --surface:#FFFFFF;
  --surface-2:var(--n100);
  --ink:var(--n900);
  --ink-muted:var(--n600);
  --ink-faint:var(--n400);
  --border:var(--n200);
  --border-strong:var(--n300);
  --interactive:var(--blue);
  --interactive-hover:var(--blue-700);
  --focus-ring:rgba(78,113,247,.18);
  --logo-wordmark:var(--slate);

  /* States */
  --won:#10B981;     --won-bg:#E7F8F1;     --won-ink:#05704F;
  --lost:#E5484D;    --lost-bg:#FCEBEC;    --lost-ink:#A31D22;
  --review:#F5A524;  --review-bg:#FDF3E2;  --review-ink:#92590A;
  --discard:#5B6B72; --discard-bg:#EBEEF0; --discard-ink:#3B474C;

  /* Actor triad */
  --human:#4E71F7;  --human-bg:#EAEEFE;  --human-ink:#2C3FA8;
  --agent:#10AEC9;  --agent-bg:#E2F6FA;  --agent-ink:#0A6F80;
  --system:#67757B; --system-bg:#EDF0F1; --system-ink:#3B474C;

  /* Pipeline blocks */
  --block-1:var(--blue-300); --block-2:var(--blue); --block-3:var(--blue-900);

  /* Shape / elevation / type */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --shadow-card:0 1px 2px rgba(38,50,56,.07),0 4px 12px rgba(38,50,56,.05);
  --shadow-lift:0 8px 28px rgba(38,50,56,.12);
  --font-display:'Rubik',ui-rounded,system-ui,sans-serif;
  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --t-xs:12px; --t-sm:13px; --t-base:14px; --t-md:16px;
  --t-lg:20px; --t-xl:24px; --t-2xl:32px; --t-3xl:40px;

  /* Site-only layout tokens */
  --maxw:1120px;
  --gutter:24px;
}

[data-theme="dark"]{
  --bg:var(--d975);
  --surface:var(--d950);
  --surface-2:#232E34;
  --ink:var(--n100);
  --ink-muted:#9AA7AD;
  --ink-faint:var(--n500);
  --border:#354248;
  --border-strong:var(--n600);
  --interactive:var(--blue-400);
  --interactive-hover:var(--blue-300);
  --focus-ring:rgba(110,139,255,.28);
  --logo-wordmark:var(--n50);

  --won-bg:#0E2F22;     --won-ink:#57D9A3;
  --lost-bg:#3A1B1D;    --lost-ink:#F2969A;
  --review-bg:#38290F;  --review-ink:#F5BE62;
  --discard-bg:#2A343A; --discard-ink:#B0BBBF;

  --human-bg:#1D2A4D;   --human-ink:#A7B8FC;
  --agent-bg:#0D2F37;   --agent-ink:#5FD6EA;
  --system-bg:#28323A;  --system-ink:#AEB9BE;

  --block-2:var(--blue-400); --block-3:var(--blue);

  --shadow-card:0 1px 2px rgba(0,0,0,.35);
  --shadow-lift:0 8px 28px rgba(0,0,0,.5);
}

/* ── Reset & base ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--t-md);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:background-color .12s linear,color .12s linear;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.18;margin:0;letter-spacing:-.015em;}
p{margin:0;}
a{color:var(--interactive);text-decoration:none;}
a:hover{color:var(--interactive-hover);}
img,svg{display:block;max-width:100%;}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px;}
.num{font-variant-numeric:tabular-nums;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── Layout ───────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
section{padding:96px 0;}
@media (max-width:760px){section{padding:64px 0;}}

.eyebrow{
  font-size:var(--t-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:16px;
}
.lead{color:var(--ink-muted);font-size:var(--t-lg);line-height:1.6;}
@media (max-width:760px){.lead{font-size:var(--t-md);}}

/* ── Buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-ui);font-size:var(--t-base);font-weight:600;
  padding:12px 22px;border-radius:var(--r-pill);border:1px solid transparent;
  cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,transform .15s;
  white-space:nowrap;
}
.btn-primary{background:var(--interactive);color:#FFFFFF;}
.btn-primary:hover{background:var(--interactive-hover);color:#FFFFFF;}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--border-strong);}
.btn-secondary:hover{background:var(--surface-2);color:var(--ink);}

/* ── Header ───────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--border);
}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:68px;}
/* El lockup es SVG inline: el wordmark hereda `currentColor` del contenedor,
   el cerebro conserva SIEMPRE su gradiente (BRAND_OS §2). */
.brand{display:flex;align-items:center;color:var(--logo-wordmark);}
.brand .logo{height:28px;width:auto;aspect-ratio:936/263;}
.brand .logo-sm{height:24px;width:auto;aspect-ratio:936/263;}
@media (max-width:480px){.brand .logo{height:24px;}}
.nav{display:flex;align-items:center;gap:28px;}
.nav a{color:var(--ink-muted);font-size:var(--t-base);font-weight:500;}
.nav a:hover{color:var(--ink);}
@media (max-width:860px){.nav .nav-link{display:none;}}

.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--r-pill);
  background:transparent;border:1px solid var(--border);color:var(--ink-muted);
  cursor:pointer;transition:background-color .15s,color .15s;
}
.theme-toggle:hover{background:var(--surface-2);color:var(--ink);}
.theme-toggle svg{width:18px;height:18px;}
[data-theme="light"] .icon-moon{display:none;}
[data-theme="dark"] .icon-sun{display:none;}

/* ── Badge (pre-launch pill) ──────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px 6px 10px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  font-size:var(--t-sm);font-weight:500;color:var(--ink-muted);
}
.badge .dot{
  width:7px;height:7px;border-radius:var(--r-pill);
  background:var(--grad);flex:none;
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{padding:104px 0 88px;position:relative;overflow:hidden;}
@media (max-width:760px){.hero{padding:64px 0 56px;}}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--border);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr;gap:48px;}}
.hero h1{font-size:56px;margin:24px 0 20px;}
@media (max-width:940px){.hero h1{font-size:42px;}}
@media (max-width:480px){.hero h1{font-size:34px;}}
.hero h1 .grad{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;}
.hero-note{margin-top:16px;font-size:var(--t-sm);color:var(--ink-faint);}

/* ── Board visual (abstract, not a fake screenshot) ───────── */
.board{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lift);
  padding:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.col{display:flex;flex-direction:column;gap:10px;}
.col-head{
  border-top:3px solid var(--border);padding-top:10px;
  font-size:var(--t-xs);font-weight:600;color:var(--ink-muted);
  text-transform:uppercase;letter-spacing:.08em;
}
.col:nth-child(1) .col-head{border-top-color:var(--block-1);}
.col:nth-child(2) .col-head{border-top-color:var(--block-2);}
.col:nth-child(3) .col-head{border-top-color:var(--block-3);}
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);box-shadow:var(--shadow-card);
  padding:10px 12px;display:flex;flex-direction:column;gap:8px;
}
.card .line{height:7px;border-radius:var(--r-pill);background:var(--surface-2);}
.card .line.w70{width:70%;} .card .line.w45{width:45%;} .card .line.w85{width:85%;}
.card .line.w60{width:60%;} .card .line.w35{width:35%;}
.card-meta{display:flex;align-items:center;gap:6px;}
.pip{width:6px;height:6px;border-radius:var(--r-pill);flex:none;}
.pip-human{background:var(--human);}
.pip-agent{background:var(--agent);}
.pip-review{background:var(--review);}
.pip-won{background:var(--won);}
.chip{
  font-size:10px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);
  letter-spacing:.02em;
}
.chip-agent{background:var(--agent-bg);color:var(--agent-ink);}
.chip-won{background:var(--won-bg);color:var(--won-ink);}
.chip-review{background:var(--review-bg);color:var(--review-ink);}
.card.is-agent{border-color:var(--agent);position:relative;}
.card.is-agent::before{
  content:"";position:absolute;inset:-1px;border-radius:var(--r-sm);
  padding:1px;background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}

/* ── Feature grid ─────────────────────────────────────────── */
.section-head{max-width:680px;margin-bottom:56px;}
.section-head h2{font-size:var(--t-2xl);margin-bottom:16px;}
@media (max-width:760px){.section-head h2{font-size:26px;}}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:940px){.grid-3{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr;}}
.feature{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--shadow-card);
  padding:26px 24px;
}
.feature .ico{
  width:38px;height:38px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  background:var(--human-bg);color:var(--human-ink);
}
.feature.ai .ico{background:var(--agent-bg);color:var(--agent-ink);}
.feature .ico svg{width:19px;height:19px;}
.feature h3{font-size:var(--t-md);margin-bottom:8px;}
.feature p{color:var(--ink-muted);font-size:var(--t-base);line-height:1.6;}

/* ── Cómo funciona (3 pasos) ──────────────────────────────── */
.how{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step;}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:16px;}}
.step{position:relative;padding:28px 24px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);}
.step .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:var(--r-pill);margin-bottom:16px;
  font-family:var(--font-display);font-weight:600;font-size:var(--t-sm);
  background:var(--surface-2);color:var(--ink-muted);
  font-variant-numeric:tabular-nums;
}
/* El paso donde actúa la IA: el gradiente es la inteligencia (BRAND_OS §1.3) */
.step.is-agent .n{background:var(--grad);color:#FFFFFF;}
.step.is-agent{border-color:var(--agent);}
.step h3{font-size:var(--t-md);margin-bottom:8px;}
.step p{color:var(--ink-muted);font-size:var(--t-base);line-height:1.6;}

/* ── Split (integraciones) ────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
@media (max-width:940px){.split{grid-template-columns:1fr;gap:36px;}}
.panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:28px;
}
.panel h3{font-size:var(--t-md);margin-bottom:14px;}
.list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;}
.list li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-muted);font-size:var(--t-base);}
.list li .tick{
  width:16px;height:16px;border-radius:var(--r-pill);flex:none;margin-top:4px;
  background:var(--won-bg);color:var(--won-ink);
  display:flex;align-items:center;justify-content:center;
}
.list li .tick svg{width:9px;height:9px;}
.list.no li .tick{background:var(--lost-bg);color:var(--lost-ink);}
.note{
  margin-top:20px;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--ink-muted);font-size:var(--t-sm);line-height:1.55;
}

/* ── Waitlist ─────────────────────────────────────────────── */
.waitlist{border-top:1px solid var(--border);background:var(--surface);}
.waitlist-inner{max-width:620px;margin:0 auto;text-align:center;}
.waitlist h2{font-size:var(--t-2xl);margin-bottom:14px;}
@media (max-width:760px){.waitlist h2{font-size:26px;}}
form.wl{margin-top:32px;display:flex;flex-direction:column;gap:14px;text-align:left;}
.field label{
  display:block;font-size:var(--t-sm);font-weight:600;color:var(--ink);margin-bottom:6px;
}
.field input,.field select{
  width:100%;font-family:var(--font-ui);font-size:var(--t-base);color:var(--ink);
  background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--r-sm);
  padding:11px 13px;transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder{color:var(--ink-faint);}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--focus-ring);
}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:560px){.row-2{grid-template-columns:1fr;}}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm);color:var(--ink-muted);}
.consent input{margin-top:3px;accent-color:var(--blue);flex:none;}
form.wl .btn{width:100%;padding:14px 22px;}
.form-msg{
  display:none;margin-top:14px;padding:12px 14px;border-radius:var(--r-sm);
  font-size:var(--t-base);text-align:center;
}
.form-msg.ok{display:block;background:var(--won-bg);color:var(--won-ink);}
.form-msg.err{display:block;background:var(--lost-bg);color:var(--lost-ink);}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--border);padding:48px 0 40px;background:var(--bg);}
.footer-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start;}
.site-footer p,.site-footer a{font-size:var(--t-sm);}
.site-footer p{color:var(--ink-faint);}
.footer-links{display:flex;gap:22px;flex-wrap:wrap;}
.footer-links a{color:var(--ink-muted);}
.footer-links a:hover{color:var(--ink);}
.footer-bottom{
  margin-top:32px;padding-top:24px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

/* ── Legal pages ────────────────────