<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;0,9..144,800;1,9..144,300;1,9..144,400&family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">

:root {
  /* Azules */
  --navy:  #152E54;
  --navyd: #0D1E3A;
  --deep:  #07101f;
  --blue:  #2563A8;
  --bluec: #EEF4FB;

  /* Dorado */
  --gold:  #F0A800;
  --goldd: #D4920A;
  --goldc: #FFF8EC;

  /* Estado */
  --green: #15C76A; /* ok, confirmado */
  --red:   #C93030; /* alerta, alérgeno grave */

  /* Neutros */
  --gray:  #F0F2F7;
  --grayb: #E4E8F0;
  --muted: #8A95A3;
  --dark:  #5A6475;
  --text:  #0D1825;
  --border:#DDE3EC;
  --white: #ffffff;

  /* Tipografía */
  --ff-d: 'Fraunces', serif;
  --ff-b: 'Outfit', sans-serif;
  --ff-m: 'JetBrains Mono', monospace;

  /* Radios */
  --r:  14px;
  --r2: 22px;
  --r3: 32px;
}

* { cursor: none; }
/* Punto dorado */ #cursor {
  position:fixed; width:14px; height:14px;
  background:var(--gold); border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
}
/* Anillo retrasado */ #cursor-ring {
  position:fixed; width:36px; height:36px;
  border:1.5px solid rgba(240,168,0,.4);
  border-radius:50%; pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition:all .18s ease;
}
/* JS: laggy follow */
let rx=0, ry=0;
(function anim(){
  rx += (mx-rx)*.12; ry += (my-ry)*.12;
  ring.style.left = rx+'px'; ring.style.top = ry+'px';
  requestAnimationFrame(anim);
})();

<section id="nombre" style="background:var(--deep);">
  <div class="section">

    <div class="reveal">
      <div class="sec-label gold">Label en JetBrains Mono</div>
      <h2 class="dark-h">Título en Fraunces 800</h2>
      <p class="sub dark-sub">Descripción en Outfit 400</p>
    </div>

    <!-- Contenido con reveal y delays -->
    <div class="reveal d1">... (delay .1s)</div>
    <div class="reveal d2">... (delay .2s)</div>
    <div class="reveal d3">... (delay .3s)</div>

  </div>
</section>