/* =========================================================
   PROSPECTOR · reset.css
   Modern reset, base typography, selection, scrollbar
   and fixed aurora + grid background layers.
   Load AFTER variables.css.
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
/* Cuando hay intel ticker, los anchor jumps aterrizan por debajo */
body.has-ticker { --scroll-offset: 124px; }
html:has(body.has-ticker) { scroll-padding-top: 124px; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* Headings: nunca hifenar palabras. Si una línea no cabe, la palabra entera
   salta a la siguiente línea. Sólo partimos cuando es literalmente imposible
   (palabra más larga que el contenedor, ej: URL enorme). */
h1, h2, h3, h4, h5 {
  overflow-wrap: break-word;   /* parte sólo si la palabra es mayor que el contenedor */
  hyphens: manual;             /* nunca automático: sólo con ­ explícito */
  word-break: normal;          /* flujo natural — nada agresivo */
  text-wrap: balance;          /* balancea las líneas para un wrap más armonioso */
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: rgba(139, 92, 246, 0.45); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #201a33; border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #2d2549; }

/* =========================================================
   Global background — aurora + grid + noise
   ========================================================= */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(ellipse 70% 50% at 15% -10%, rgba(139, 92, 246, 0.22), transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 5%, rgba(255, 107, 26, 0.14), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 120%, rgba(91, 33, 182, 0.28), transparent 60%);
}

/* Grid de líneas finas moradas — el "tejido" ambiental del sistema */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(168, 85, 247, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 40%, transparent 100%);
}

/* Scan lines muy sutiles — textura de CRT, refuerza vibe radar/intel */
.bg-scan {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(255, 255, 255, 0.012) 2px 3px);
}

/* Cursor halo — radial morado que sigue al ratón con lerp suave.
   Más saturado y más grande: se nota de verdad pero sin molestar la lectura. */
.cursor-halo {
  position: fixed;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle,
      rgba(168, 85, 247, 0.32) 0%,
      rgba(139, 92, 246, 0.20) 25%,
      rgba(139, 92, 246, 0.08) 50%,
      transparent 72%);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  will-change: transform;
  display: none;          /* se activa vía JS sólo en pointer fine */
}
@media (hover: hover) and (pointer: fine) {
  .cursor-halo { display: block; }
}