/* ============================================
   Design tokens — colores, tipografía, reset
   ============================================ */
  :root{
    --navy-1:#06122B;
    --navy-2:#0B1A3A;
    --navy-3:#0E1F45;
    --line:#1B2D52;
    --line-soft:#E5E9F2;
    --white:#FFFFFF;
    --paper:#F4F6FB;
    --paper-2:#ECEFF6;
    --ink:#0B1A3A;
    --ink-2:#3C4A66;
    --ink-3:#6A7691;
    --blue:#3B7BFF;
    --blue-2:#2E62E0;
    --cyan:#5BE2FF;
    --rad:14px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    font-feature-settings:"ss01","cv11";
    line-height:1.55;
  }
  .mono{font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.02em}

/* Common section base + wrap + eyebrow */
  /* ---------- COMMON SECTION ---------- */
  section{padding:120px 40px;position:relative}
  .wrap{max-width:1280px;margin:0 auto;position:relative}
  .eyebrow{
    font-family:"IBM Plex Mono",monospace;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--blue);font-weight:500;
    display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;
  }
  .eyebrow::before{content:"";width:28px;height:1px;background:var(--blue)}
  .eyebrow.on-dark{color:var(--cyan)}
  .eyebrow.on-dark::before{background:var(--cyan)}
  h1,h2,h3,h4{font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0}
  h2{font-size:54px;letter-spacing:-.025em;max-width:18ch}
  h3{font-size:22px;letter-spacing:-.015em}
  p{margin:0}

  /* Section ID badge — reused across sections */
  .sec-id{
    position:absolute;top:-60px;right:0;
    font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);
    letter-spacing:.16em;text-transform:uppercase;
  }
  .sec-id.on-dark{color:rgba(255,255,255,.45)}

  /* Subtle entrance — used by cover */
  @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}