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

:root {
  /* Colores - Dark Mode (Default) */
  --bg:    #0a0a0a;
  --bg2:   #141414;
  --bg3:   #1c1c1c;
  --bg4:   #242424;
  --text:  #f9f9f9;
  --text2: #e8e8e8;
  --text3: #c8c8c8;
  --m:     #888;
  --dim:   #767676;
  --line:  #1e1e1e;
  --r:     4px;
  --r-lg:  10px;

  /* Accent (stock / estado activo) */
  --accent: #4ade80;

  /* Easing signature del proyecto */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Espaciado (Escala de 8px) */
  --s-xs:  0.25rem; /* 4px */
  --s-sm:  0.5rem;  /* 8px */
  --s-md:  1rem;    /* 16px */
  --s-lg:  1.5rem;  /* 24px */
  --s-xl:  2rem;    /* 32px */
  --s-2xl: 3rem;    /* 48px */
  --s-3xl: 4rem;    /* 64px */

  /* Tipografía */
  --sans:    'Instrument Sans', sans-serif;
  --display: 'Syne', sans-serif;
  --mono:    'JetBrains Mono', monospace;

  --f-xs: 0.875rem; /* 14px */
  --f-sm: 1rem;     /* 16px */
  --f-md: 1.125rem; /* 18px */
  --f-lg: 1.375rem; /* 22px */
}

/* Colores - Light Mode */
body.light-mode {
  --bg:    #ffffff;
  --bg2:   #f5f5f5;
  --bg3:   #e5e5e5;
  --bg4:   #d5d5d5;
  --text:  #0a0a0a;
  --text2: #1c1c1c;
  --text3: #444444;
  --m:     #666;
  --dim:   #888;
  --line:  #e0e0e0;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

#pgbar {
  position: fixed;
  top: 0; left: 0;
  height: 1px;
  width: 100%;
  background: var(--text3);
  z-index: 10001;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  overflow-x: hidden;
  cursor: none;
  transition: background 0.3s, color 0.3s;
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 2px; }

a { text-decoration: none; color: inherit; cursor: none; }
button { font-family: inherit; cursor: none; }
input, select, textarea, label, summary, details { cursor: none; }
img { display: block; max-width: 100%; }

/* ── CURSOR BULLSEYE ── */

/* Círculo exterior: sólido, invierte colores */
#cur-dot {
  position: fixed;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100000;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  mix-blend-mode: difference;
  transition: opacity 0.2s, width 0.15s ease, height 0.15s ease;
}

/* Punto interior: color del fondo (negro en dark, blanco en light) */
#cur-ring {
  position: fixed;
  width: 5px;
  height: 5px;
  background: var(--bg);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100001;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s;
}

/* Hover sobre interactivos: crece */
body.ha #cur-dot  { width: 24px; height: 24px; }
body.ha #cur-ring { width: 7px;  height: 7px; }

/* Touch / móvil: desactivar */
@media (hover: none) and (pointer: coarse) {
  body, a, button, input, select, textarea, label { cursor: auto !important; }
  a, button { cursor: pointer !important; }
  #cur-dot, #cur-ring { display: none !important; }
}




/* Utility Classes */
.flex-center  { display: flex; align-items: center; justify-content: center; }
.text-mono    { font-family: var(--mono); }
.text-display { font-family: var(--display); }
.upper        { text-transform: uppercase; letter-spacing: 0.05em; }

.reveal { opacity: 1; }
.hide-on-mobile  { display: block; }
.mobile-only-link { display: none; }