*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    /* ── Superficies (paleta PICKCR) ── */
    --bg:           #0a0e16;
    --bg-soft:      #0d1320;
    --card:         #111726;
    --card-soft:    #141b2c;
    --border:       #232b3d;
    --border-soft:  #1a2132;

    /* ── Texto ── */
    --text:         #f4f6fa;
    --muted:        #8c93a6;
    --text-faint:   #5c6478;

    /* ── Acento primario (lima) ── */
    --lime:         #c8f51d;
    --lime-dark:    #9bc212;
    --lime-bg:      #1b2310;

    /* ── Acentos de estado ── */
    --green:        #36d97a;
    --green-bg:     #11301f;
    --orange:       #f5a623;
    --orange-bg:    #332210;
    --red:          #ff6b7a;
    --red-bg:       #331319;
    --sky:          #5b9bf5;
    --sky-bg:       #121f33;
    --purple:       #b57bf5;
    --purple-bg:    #241a33;

    /* ── Alias heredados (mantienen compatibilidad con el CSS/JS existente) ── */
    --blue:         var(--lime);
    --blue-dark:    var(--text);
    --blue-light:   var(--card-soft);
    --yellow:       var(--orange);
    --yellow-dark:  var(--orange);
    --yellow-light: var(--orange-bg);

    --hero-gradient:
      radial-gradient(65% 100% at 82% 15%, rgba(200,245,29,0.14) 0%, rgba(200,245,29,0) 60%),
      linear-gradient(180deg, #0b0f1a 0%, #0a0e16 100%);

    --shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
    --shadow-md: 0 10px 30px -10px rgba(0,0,0,0.6);
    --radius: 16px;
    --radius-sm: 10px;
    --header-h: 62px;
    --bottom-nav-h: 64px;
  }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    min-height: 100vh;
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    -webkit-font-smoothing: antialiased;
  }
  .app-shell { max-width: 960px; margin: 0 auto; }
  :focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }