/* ============================================================
   BASE — reset, tokens, tipografía, fondo, cursor, partículas
   ============================================================ */

:root {
  /* Estos valores se sobrescriben desde config.js en runtime */
  --accent: #2f9bff;
  --accent-deep: #0a3d8f;
  --accent-rgb: 47, 155, 255;

  --bg-0: #05070d;
  --bg-1: #090c15;
  --bg-2: #0e1320;

  --text-0: #f4f7ff;
  --text-1: #b7c0d6;
  --text-2: #7c88a3;

  --glass: rgba(20, 26, 40, 0.45);
  --glass-strong: rgba(16, 21, 34, 0.72);
  --stroke: rgba(255, 255, 255, 0.08);
  --stroke-strong: rgba(255, 255, 255, 0.16);

  --radius: 18px;
  --radius-lg: 26px;

  --ease-os: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --shadow-soft: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 42px -6px rgba(var(--accent-rgb), 0.55);

  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --topbar-h: 62px;
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body { position: relative; }

img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(var(--accent-rgb), 0.35); color: #fff; }

/* Scrollbars discretos */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 8px; }

/* ---------------- Fondo dinámico ---------------- */
.dynamic-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, var(--bg-2), var(--bg-0) 70%);
}
.dynamic-bg__layer {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: blur(60px) saturate(1.25) brightness(0.7);
  transform: scale(1.15);
  transition: opacity 1.1s var(--ease-soft);
  will-change: opacity, transform;
  animation: bgDrift 32s ease-in-out infinite alternate;
}
.dynamic-bg__layer[data-layer="a"] { animation-delay: -6s; }
.dynamic-bg__vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 90% at 50% 15%, transparent 30%, rgba(0,0,0,0.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.35), transparent 30%, rgba(0,0,0,0.6));
}
.dynamic-bg__grain {
  position: absolute; inset: 0;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes bgDrift {
  from { transform: scale(1.15) translate3d(-1.5%, -1%, 0); }
  to   { transform: scale(1.22) translate3d(1.5%, 1.5%, 0); }
}

/* ---------------- Partículas ---------------- */
.particles {
  position: fixed; inset: 0;
  z-index: 1; pointer-events: none;
  opacity: 0.6;
}

/* ---------------- Cursor personalizado ---------------- */
/* Oculto por defecto; solo visible cuando se activa (body.custom-cursor) */
.cursor { display: none; position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; mix-blend-mode: screen; }
body.custom-cursor .cursor { display: block; }
.cursor__dot {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); transform: translate(-50%, -50%);
  box-shadow: 0 0 12px 2px rgba(var(--accent-rgb), 0.8);
}
.cursor__ring {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(var(--accent-rgb), 0.55);
  transform: translate(-50%, -50%);
  transition: width .25s var(--ease-os), height .25s var(--ease-os), border-color .25s;
}
.cursor.is-hot .cursor__ring { width: 54px; height: 54px; border-color: rgba(var(--accent-rgb), 0.9); }
.cursor.is-down .cursor__ring { width: 26px; height: 26px; }
body.custom-cursor, body.custom-cursor * { cursor: none !important; }

/* ---------------- Loader ---------------- */
.loader {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column; gap: 22px;
  align-items: center; justify-content: center;
  background: rgba(5, 7, 13, 0.8); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease-soft);
}
.loader.is-visible { opacity: 1; pointer-events: auto; }
.loader__ring {
  width: 56px; height: 56px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
  box-shadow: var(--shadow-glow);
}
.loader__text { color: var(--text-1); letter-spacing: .12em; font-size: .82rem; text-transform: uppercase; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- Utilidades ---------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}