/* ─── tokens.css ─── */
    :root {
      --wo-yellow-spark:  #FFCB00;
      --wo-blue-lab:      #5968EA;
      --wo-black-core:    #2a2a2f;
      --wo-white-focus:   #F7F7F7;
      --wo-gray-dark:     #333333;

      --wo-dark:          #1a1a1e;
      --wo-dark-elevated: #2a2a2f;
      --wo-dark-surface:  #333333;

      --wo-accent-dim:    rgba(89, 104, 234, 0.12);
      --wo-yellow-dim:    rgba(255, 203, 0, 0.15);

      --wo-text:          #ffffff;
      --wo-text-secondary:#dadada;
      --wo-text-muted:    #b4b6ba;

      --wo-success:       #10B981;
      --wo-danger:        #FF6B6B;

      --wo-accent-primary:   var(--wo-blue-lab);
      --wo-accent-secondary: var(--wo-yellow-spark);

      --font-heading:     'Space Grotesk', sans-serif;
      --font-body:        'Inter', sans-serif;
      --font-body-alt:    'Inter', sans-serif;
      --font-corporate:   'Space Grotesk', sans-serif;

      --space-xs: 0.25rem;
      --space-sm: 0.5rem;
      --space-md: 0.75rem;
      --space-lg: 1rem;
      --space-xl: 1.5rem;
      --gap-card: 1em;

      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-xl: 16px;
      --radius-full: 50px;

      --text-h1:    60px;
      --text-h2:    34px;
      --text-h3:    15px;
      --text-body:  13px;
      --text-small: 11px;
      --text-meta:  10px;

      --color-ink:     #0F0F0F;
      --color-lead:    #1A1A2E;
      --color-surface: #F7F7F8;
      --color-divider: #E4E4E7;
      --color-muted:   #71717A;

      --color-a: var(--wo-blue-lab);
      --color-b: var(--wo-success);
      --color-c: #8B5CF6;

      --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
      --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
    }

    [data-wo-theme="yellow"] {
      --wo-accent-primary:   var(--wo-yellow-spark);
      --wo-accent-secondary: var(--wo-blue-lab);
    }

    /* ─── globals.css ─── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: var(--font-body);
      color: var(--color-ink);
      background: #e8e8ea;
      -webkit-font-smoothing: antialiased;
      line-height: 1.5;
    }

    /* ─── print.css ─── */
    @media print {
      * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
      }
      html, body { background: #ffffff; }
      .page { page-break-after: always; box-shadow: none !important; border-radius: 0 !important; margin: 0 auto !important; }
      .page-dark { background: var(--wo-dark) !important; }
      .no-print { display: none !important; }
      @page { size: 1600px 900px; margin: 0; }
    }

    /* ─── PageFrame · 16:9 (1600 × 900) ─── */
    .page {
      width: 1600px;
      height: 900px;
      margin: 0 auto var(--space-xl);
      padding: 72px 112px 84px;
      position: relative;
      background: #ffffff;
      box-shadow: var(--shadow-md);
      border-radius: var(--radius-md);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    /* Distribuye el cuerpo en el alto disponible (entre header y footer) */
    .page__body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
    .page__body--center { justify-content: center; }
    .page__body--between { justify-content: space-between; }
    .page-dark { background: var(--wo-dark); color: var(--wo-text); }

    /* ─── Layouts ─── */
    .layout-40-60  { display: grid; grid-template-columns: 40% 60%;   gap: var(--space-xl); }
    .layout-55-45  { display: grid; grid-template-columns: 55% 45%;   gap: var(--space-xl); }
    .layout-2col   { display: grid; grid-template-columns: 1fr 1fr;   gap: var(--space-xl); }
    .layout-3col   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-lg); }