/* ============================================================
   TOKENS — un solo sistema, dos temas
   ============================================================ */
.ja{
  --paper:#ffffff;
  --ink:#0a0a0a;
  --muted:#6b6b6b;
  --faint:#a3a3a3;
  --hair:rgba(0,0,0,.09);
  --line:rgba(0,0,0,.14);
  --chip:rgba(0,0,0,.03);
  --btn-bg:#0a0a0a;
  --btn-ink:#ffffff;
  --field:#ffffff;
  --aurora-1:rgba(207,233,242,.95);
  --aurora-2:rgba(214,226,247,.55);
  --aurora-3:rgba(227,221,244,.22);
  --veil:#ffffff;

  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  letter-spacing:-.02em;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

@media (prefers-color-scheme:dark){
  .ja{
    --paper:#0b0b0d;
    --ink:#f4f4f2;
    --muted:#9d9d9a;
    --faint:#6e6e6b;
    --hair:rgba(255,255,255,.11);
    --line:rgba(255,255,255,.18);
    --chip:rgba(255,255,255,.045);
    --btn-bg:#f4f4f2;
    --btn-ink:#0b0b0d;
    --field:rgba(255,255,255,.03);
    --aurora-1:rgba(64,104,124,.55);
    --aurora-2:rgba(66,80,124,.34);
    --aurora-3:rgba(78,70,118,.16);
    --veil:#0b0b0d;
  }
}
:root[data-theme="dark"] .ja{
  --paper:#0b0b0d;
  --ink:#f4f4f2;
  --muted:#9d9d9a;
  --faint:#6e6e6b;
  --hair:rgba(255,255,255,.11);
  --line:rgba(255,255,255,.18);
  --chip:rgba(255,255,255,.045);
  --btn-bg:#f4f4f2;
  --btn-ink:#0b0b0d;
  --field:rgba(255,255,255,.03);
  --aurora-1:rgba(64,104,124,.55);
  --aurora-2:rgba(66,80,124,.34);
  --aurora-3:rgba(78,70,118,.16);
  --veil:#0b0b0d;
}
:root[data-theme="light"] .ja{
  --paper:#ffffff;
  --ink:#0a0a0a;
  --muted:#6b6b6b;
  --faint:#a3a3a3;
  --hair:rgba(0,0,0,.09);
  --line:rgba(0,0,0,.14);
  --chip:rgba(0,0,0,.03);
  --btn-bg:#0a0a0a;
  --btn-ink:#ffffff;
  --field:#ffffff;
  --aurora-1:rgba(207,233,242,.95);
  --aurora-2:rgba(214,226,247,.55);
  --aurora-3:rgba(227,221,244,.22);
  --veil:#ffffff;
}

/* ---------- reset acotado ---------- */
.ja *{box-sizing:border-box;}
.ja p{margin:0;}
.ja h1,.ja h2,.ja h3{margin:0;font-weight:600;}
.ja ul,.ja ol{margin:0;padding:0;list-style:none;}
.ja a{color:inherit;text-decoration:none;}
.ja a:focus-visible,.ja summary:focus-visible,.ja button:focus-visible,
.ja input:focus-visible,.ja select:focus-visible,.ja textarea:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:6px;
}

/* el acento de toda la página: una palabra por titular */
.ja .em{font-family:var(--serif);font-style:italic;font-weight:600;letter-spacing:-.045em;}

.ja .lb{
  font-family:var(--mono);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;color:var(--faint);display:block;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:absolute;top:0;left:0;right:0;z-index:20;}
.nav__in{
  max-width:1180px;margin:0 auto;padding:20px 36px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.mark{display:flex;flex-direction:column;gap:1px;min-width:0;}
.mark__n{font-size:19px;font-weight:600;letter-spacing:-.045em;line-height:1;}
.mark__d{font-size:12px;color:var(--muted);letter-spacing:-.005em;line-height:1;}
.ja .pill{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  background:var(--btn-bg);color:var(--btn-ink);
  font-size:13.5px;font-weight:600;letter-spacing:-.02em;
  padding:11px 19px;border-radius:9999px;white-space:nowrap;
  transition:transform .2s ease,box-shadow .2s ease;
}
.pill:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(0,0,0,.16);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;padding:172px 36px 88px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
}
.aurora{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 88% at 94% -10%, var(--aurora-1) 0%, var(--aurora-2) 34%, var(--aurora-3) 58%, transparent 78%),
    radial-gradient(78% 58% at 78% 0%, var(--aurora-3) 0%, transparent 70%);
}
.hero__veil{
  position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,var(--veil) 100%);
}
.hero__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;max-width:64ch;}

.h1{
  max-width:20ch;font-size:clamp(34px,5.2vw,58px);line-height:1.05;
  letter-spacing:-.05em;font-weight:600;text-wrap:balance;
}
.lede{
  max-width:56ch;font-size:16.5px;line-height:1.5;color:var(--muted);
  letter-spacing:-.012em;text-wrap:pretty;
}
.fine{font-size:13px;color:var(--faint);letter-spacing:-.01em;}

/* ============================================================
   SECCIONES
   ============================================================ */
.sec{max-width:820px;margin:0 auto;padding:64px 36px;}
.sec + .sec{border-top:1px solid var(--hair);}
.h2{font-size:clamp(24px,3vw,34px);line-height:1.12;letter-spacing:-.04em;font-weight:600;max-width:24ch;text-wrap:balance;}
.body{font-size:16px;line-height:1.6;color:var(--muted);max-width:64ch;letter-spacing:-.01em;text-wrap:pretty;}
.body strong{color:var(--ink);font-weight:600;}
.body a{text-decoration:underline;text-underline-offset:3px;color:var(--ink);}
.stack{display:flex;flex-direction:column;}
.g10{gap:10px;}.g16{gap:16px;}.g24{gap:24px;}

/* ---------- pie ---------- */
.foot{border-top:1px solid var(--hair);}
.foot__in{
  max-width:1180px;margin:0 auto;padding:34px 36px 48px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 32px;align-items:flex-end;
}
.foot__links{display:flex;gap:18px;flex-wrap:wrap;}
.foot__links a{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hero{padding:150px 30px 72px;}
  .nav__in,.foot__in{padding-left:30px;padding-right:30px;}
  .sec{padding:52px 30px;}
}
@media (max-width:820px){
  .hero{padding:132px 22px 60px;}
  .nav__in{padding:18px 22px;}
  .sec{padding:44px 22px;}
  .foot__in{padding:30px 22px 40px;}
}
@media (max-width:400px){
  .hero{padding:120px 18px 52px;}
  .sec{padding:36px 18px;}
}