@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,400;12..60,700;12..60,800&family=Public+Sans:wght@400;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

    :root {
      --tinta:  #0F0A0D;
      --hueso:  #F2E8D5;
      --rojo:   #B21E35;
      --oro:    #E8A33D;
      --jade:   #1F7A5C;
      --humo:   #6B6259;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; background: var(--tinta); overflow-x: hidden; }
    body { background: var(--tinta); color: #fff; font-family: 'Public Sans', system-ui, sans-serif; }

    .font-display { font-family: 'Bricolage Grotesque', system-ui, sans-serif; }
    .font-mono    { font-family: 'IBM Plex Mono', monospace; }

    .glass-panel {
      background: rgba(15,10,13,.68);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 1rem;
    }
    .info-card {
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
      border-radius: .75rem; padding: 20px;
    }