/* ✏️ Vilonti Extra Black — sube la fuente a fonts/ y ajusta el nombre del archivo.
   Mientras no exista, cae en Archivo Black (fallback pesado similar). */
@font-face {
  font-family:'Vilonti';
  src:url('fonts/Vilonti-ExtraBlack.woff2') format('woff2'),
      url('fonts/Vilonti-ExtraBlack.woff') format('woff'),
      url('fonts/Vilonti-ExtraBlack.otf') format('opentype');
  font-weight:900; font-style:normal; font-display:swap;
}
/* ══════════════════════════════════════
   ✏️ VARIABLES — edita colores y fuentes
══════════════════════════════════════ */
:root {
  --black: #0E0E0C;
  --b2: #161614;
  --white: #F0EDE6;
  --w2: #E4E0D8;
  --klein: #002FA7;
  --serif: 'Playfair Display', Georgia, serif;   /* Títulos itálicos */
  --sans:  'Syne', system-ui, sans-serif;        /* Headings brutalist */
  --mono:  'Space Mono', monospace;              /* Labels / datos */
  --ease:  cubic-bezier(.16,1,.3,1);
  --snap:  cubic-bezier(.77,0,.18,1);

  /* Escala de espaciado (rem) */
  --space-2xs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;

  /* Radios */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  24px;
  --radius-pill: 50px;

  /* Tintes base (para usar con opacidad) */
  --rgb-black: 14, 14, 12;    /* var(--black) en RGB */
  --rgb-white: 240, 237, 230; /* var(--white) en RGB */

  /* Sombras reutilizables */
  --shadow-card:  0 45px 110px -35px rgba(0, 47, 167, .5);
  --shadow-frame: 0 30px 65px -28px rgba(14, 14, 12, .35);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html,body { height:100%; overflow:hidden }
body { background:var(--black); color:var(--white); font-family:var(--sans); cursor:none; -webkit-font-smoothing:antialiased }
img { display:block; max-width:100% }
a { color:inherit; text-decoration:none; cursor:none }
button { cursor:none; border:none; background:none; font-family:inherit; color:inherit; padding:0 }
input,textarea { font-family:inherit; background:none; border:none; outline:none; color:inherit }

/* ══════════════════════════════════════
   SISTEMA — grano, trail, cursor, overlay
══════════════════════════════════════ */
#grain {
  position:fixed; inset:-50%; width:200%; height:200%;
  z-index:9900; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-repeat:repeat; background-size:180px 180px;
  animation:gm .45s steps(2) infinite;
}
@keyframes gm {
  0%   { transform:translate(0,0) }
  20%  { transform:translate(-3%,-5%) }
  40%  { transform:translate(-6%,3%) }
  60%  { transform:translate(3%,-7%) }
  80%  { transform:translate(-2%,5%) }
  100% { transform:translate(0,0) }
}
#trail { position:fixed; inset:0; z-index:9895; pointer-events:none }
#cur {
  position:fixed; width:8px; height:8px; background:var(--white); border-radius:50%;
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  mix-blend-mode:difference; transition:width .3s var(--ease),height .3s var(--ease),border-radius .3s;
}
#cur.hov  { width:18px; height:18px }
#cur.pill { width:56px; height:28px; border-radius:32px }
#cur.drag { width:34px; height:34px; border-radius:52px }
#t-ov {
  position:fixed; inset:0; z-index:9950; background:var(--black);
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
#t-ov.on { opacity:1; pointer-events:all }
#sprog {
  position:fixed; top:0; left:0; height:2px; background:var(--klein);
  z-index:9800; width:0; transition:width .1s linear;
}

/* PÁGINAS */
.page {
  position:fixed; inset:0; overflow:hidden;
  visibility:hidden; opacity:0; z-index:1;
}
.page.pg-active { visibility:visible; opacity:1; z-index:10 }