/* ---------- fonts ---------- */
  @font-face{ font-family:'General Sans'; font-weight:600; font-style:normal; font-display:swap;
    src:url('../fonts/general-sans-600.woff2') format('woff2'); }
  @font-face{ font-family:'General Sans'; font-weight:700; font-style:normal; font-display:swap;
    src:url('../fonts/general-sans-700.woff2') format('woff2'); }
  @font-face{ font-family:'IBM Plex Sans'; font-weight:400 700; font-style:normal; font-display:swap;
    src:url('../fonts/plex-sans-variable.woff2') format('woff2'); }
  @font-face{ font-family:'IBM Plex Mono'; font-weight:400; font-style:normal; font-display:swap;
    src:url('../fonts/plex-mono-400.woff2') format('woff2'); }
  @font-face{ font-family:'IBM Plex Mono'; font-weight:500; font-style:normal; font-display:swap;
    src:url('../fonts/plex-mono-500.woff2') format('woff2'); }

  :root{
    --ink:        #070B14;
    --charcoal:   #0E1526;
    --charcoal-2: #141D34;
    --charcoal-3: #1C2742;
    --green:      #25D366;
    --green-deep: #128C4A;
    --warn:       #F5C065;
    --warn-bg:    rgba(240,169,59,.1);
    --text:       #F3F5F9;
    --mist:       #93A0BD;
    --mist-dim:   #6B7690;
    --line:       rgba(210,220,240,.10);
    --line-soft:  rgba(210,220,240,.06);
    --glass:      rgba(20,29,52,.66);
    --font-display:'Segoe UI', 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, Ubuntu, Cantarell, 'Fira Sans', sans-serif;
    --font-body:'Segoe UI', 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, Ubuntu, Cantarell, 'Fira Sans', sans-serif;
    --font-mono:'Segoe UI', 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, Ubuntu, Cantarell, 'Fira Sans', sans-serif;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0; background:var(--ink); color:var(--text); font-family:var(--font-body);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  a{ color:var(--green); text-decoration:none; }
  a:hover{ text-decoration:underline; }
  ::selection{ background:var(--green); color:var(--ink); }

  .topbar{
    position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px;
    padding:16px 24px; border-bottom:1px solid var(--line);
    background:rgba(17,24,39,.75); backdrop-filter:blur(14px);
  }
  .topbar .mark{
    width:30px; height:30px; border-radius:9px; flex:none;
    background:linear-gradient(145deg, var(--charcoal-3), var(--charcoal-2));
    border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  }
  .topbar .wordmark{ font-family:var(--font-display); font-weight:700; font-size:.92rem; letter-spacing:.03em; }
  .topbar .wordmark b{ color:var(--green); }
  .topbar__spacer{ flex:1; }
  .back-link{ display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--mist); font-weight:500; }
  .back-link:hover{ color:var(--text); text-decoration:none; }
  .back-link svg{ width:14px; height:14px; }

  .doc{ max-width:920px; margin:0 auto; padding:48px 24px 90px; }
  .doc__eyebrow{
    font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.12em;
    color:var(--mist-dim); margin-bottom:10px;
  }
  .doc__title{ font-family:var(--font-display); font-weight:700; font-size:1.8rem; letter-spacing:-.01em; margin:0 0 8px; }
  .doc__meta{ font-family:var(--font-mono); font-size:.78rem; color:var(--mist-dim); margin-bottom:28px; }

  .pending-banner{
    display:flex; gap:11px; align-items:flex-start;
    background:var(--warn-bg); border:1px solid rgba(240,169,59,.28); border-radius:var(--radius-md);
    padding:14px 16px; margin-bottom:36px; font-size:.85rem; line-height:1.55; color:#F3E7CE;
  }
  .pending-banner svg{ width:18px; height:18px; flex:none; color:var(--warn); margin-top:1px; }
  .pending-banner b{ color:var(--warn); }

  .doc section{ margin-bottom:30px; }
  .doc h2{
    font-family:var(--font-display); font-weight:700; font-size:1.08rem;
    display:flex; align-items:baseline; gap:10px; margin:0 0 10px;
  }
  .doc h2 .num{ font-family:var(--font-mono); font-size:.8rem; color:var(--mist-dim); font-weight:500; }
  .doc p{ font-size:.9rem; line-height:1.7; color:var(--mist); margin:0 0 10px; max-width:88ch; }
  .doc ul{ margin:0 0 10px; padding-left:20px; max-width:88ch; }
  .doc ul li{ font-size:.9rem; line-height:1.7; color:var(--mist); margin:0 0 6px; }
  .doc ul li::marker{ color:var(--mist-dim); }

  .placeholder{
    border:1px dashed var(--line); border-radius:var(--radius-sm);
    padding:12px 14px; font-size:.82rem; color:var(--mist-dim); font-style:italic;
    background:rgba(255,255,255,.02);
  }

  .doc__footer{
    margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
    font-size:.82rem; color:var(--mist-dim); line-height:1.7;
  }
  .doc__footer a{ font-weight:500; }

  @media (max-width:600px){
    .doc{ padding:32px 18px 70px; }
    .doc__title{ font-size:1.5rem; }
  }


/* ---------- Connect One logo (reemplaza el wordmark de texto) ---------- */
.brand__logo{ height:60px; width:auto; max-width:100%; object-fit:contain; display:block; }