*,*::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:#444;
  --line:#1e1e1e;
  --r:4px;

  /* 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 (Antes 12px) */
  --f-sm: 1rem;    /* 16px (Antes 14px) */
  --f-md: 1.125rem; /* 18px (Antes 16px) */
  --f-lg: 1.375rem; /* 22px (Antes 20px) */
}

/* 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;}
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;}

/* ── CURSOR CÍRCULO DINÁMICO (INVERSIÓN) ── */
#cur {
  position: fixed;
  width: 16px;
  height: 16px;
  background: #fff; /* Base blanca para inversión total */
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s, width 0.2s, height 0.2s;
  mix-blend-mode: difference; /* Invierte colores respecto al fondo */
}
#cur::after {
  content: "";
  width: 4px;
  height: 4px;
  background: #fff; /* Blanco también aquí para que al mezclarse con el círculo blanco se vea negro */
  border-radius: 50%;
  mix-blend-mode: difference; /* Doble inversión para el punto central */
}

/* Estado Hover: El círculo crece */
body.ha #cur {
  width: 32px;
  height: 32px;
}
body.ha #cur::after {
  width: 6px;
  height: 6px;
}

::-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;}
img{display:block;}

/* 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; } /* Visible por defecto */