/* Reset y estilos base. Carga después de tokens.css */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html, body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-feature-settings: 'ss01', 'cv11', 'tnum';
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body {
  background:
    radial-gradient(ellipse at top left, rgba(201,162,107,0.08) 0%, transparent 45%),
    radial-gradient(ellipse at bottom right, rgba(106,169,255,0.05) 0%, transparent 50%),
    linear-gradient(180deg, #07090C 0%, #0A0E14 100%);
  background-attachment: fixed;
}

.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad) 80px;
}

@media (max-width: 599px) {
  .shell {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Numbers tabulares en todo lo que sea cifra */
.numeric {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Ambient orbs detrás del shell */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  will-change: transform;
  transition: transform 1.6s var(--ease-out);
}

.orb-gold {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(201,162,107,0.5) 0%, transparent 70%);
  top: -120px; left: -160px;
}
.orb-gold-2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(229,195,138,0.4) 0%, transparent 70%);
  bottom: -100px; right: 10%;
}
.orb-blue {
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(106,169,255,0.35) 0%, transparent 70%);
  top: 40%; right: -120px;
}