/* ============================================================
   SKYLIFE RP — Hoja de estilos de páginas internas
   (normativas, etc.)  ·  tokens + componentes + scroll activo
   ============================================================ */

:root {
  --color-bg: #0a0a0c;
  --color-surface: #131316;
  --color-surface-elev: #1a1a1f;
  --color-primary: #00e080;
  --color-primary-dim: rgba(0, 224, 128, 0.1);
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.6);
  --color-text-faint: rgba(255, 255, 255, 0.35);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.22);

  /* aliases usados por los estilos inline de las páginas */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --text: var(--color-text);
  --text-muted: var(--color-text-muted);
  --text-faint: var(--color-text-faint);
  --brand: var(--color-primary);
  --brand-dim: var(--color-primary-dim);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
}

/* ---------- Base: scroll SIEMPRE habilitado ---------- */
html {
  scroll-behavior: smooth;
}
html, body {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: var(--color-primary);
  color: #04140c;
}

/* ---------- Componentes ---------- */
.glass {
  background: rgba(19, 19, 22, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--color-border);
}
.glass-strong {
  background: rgba(12, 12, 14, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--color-border);
}
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 0.75rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  transition: all 0.2s ease;
  cursor: pointer;
}
.btn-primary {
  background: var(--color-primary);
  color: #04140c;
  border-color: transparent;
}
.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 24px var(--color-primary-dim);
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--color-border-strong);
}
.container-x { width: 100%; }
.menu-toggle { cursor: pointer; }

/* ---------- Animaciones ---------- */
@keyframes pulse-slow {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.06); }
}
.animate-pulse-slow { animation: pulse-slow 9s ease-in-out infinite; }

/* ---------- Enlaces ---------- */
a { text-decoration: none; color: inherit; }