/* ===========================
   LUTI — VAPORWAVE · Y2K · CYBERCORE · FRUTIGER AERO
   Listo para Neocities (sin dependencias, solo Google Fonts)
   =========================== */

:root{
  /* Paleta neon + aero glass */
  --ink:#0b0b10;
  --fg:#e9f1ff;
  --magenta:#ff2bd6;
  --violet:#6a00ff;
  --cyan:#00ecff;
  --lime:#b0ff3b;
  --sun:#ffd166;
  --shadow: 0 12px 40px rgba(0,0,0,.35);

  --grid: 32px;         /* tamaño del tablero */
  --speed: 18s;         /* velocidad del scroll de fondo */
  --radius: 18px;
}

/* Reset simple */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  color:var(--fg);
  background:#0b0720;
  font-family: "Orbitron", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

/* ===========================
   FONDO ANIMADO
   =========================== */
.bg{
  position:fixed; inset:0; z-index:-2;
  /* capas: 1) tablero Y2K 2) gradiente vaporwave 3) brillo */
  background:
    /* tablero */
    conic-gradient(from 90deg at 25% 25%, #0000 90deg, #000 0) 0 0/var(--grid) var(--grid),
    conic-gradient(from 90deg at 75% 75%, #0000 90deg, #000 0) 0 0/var(--grid) var(--grid),
    /* gradiente vaporwave */
    radial-gradient(1200px 600px at 20% -10%, rgba(255,43,214,.45), transparent 60%),
    radial-gradient(900px 500px at 120% 110%, rgba(0,236,255,.35), transparent 60%),
    linear-gradient(135deg, #160033 0%, #28003f 50%, #0b0720 100%);
  animation: scroll-bg var(--speed) linear infinite;
  filter: contrast(1.1) saturate(1.25);
}
@keyframes scroll-bg{
  to{ background-position:
      var(--grid) 0, 0 var(--grid),
      30% 0%, 70% 100%, 0 0;
  }
}

/* scanlines + noise (capas encima) */
.fx-scan::after{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.04), rgba(0,0,0,0) 2px);
  background-size:100% 2px;
  mix-blend-mode:soft-light;
  pointer-events:none;
}
.fx-noise::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  opacity:.08; pointer-events:none;
  background:
    url('data:image/svg+xml;utf8,\
      <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160">\
        <filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter>\
        <rect width="100%" height="100%" filter="url(%23n)" opacity="0.4"/>\
      </svg>') repeat;
  animation: noise 1.8s steps(8) infinite;
}
@keyframes noise{to{transform:translate3d(0,0,0)}}

/* ===========================
   LAYOUT
   =========================== */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px;
  backdrop-filter:saturate(1.4) blur(12px);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border-bottom:1px solid rgba(255,255,255,.15);
}
.brand{
  font-family:"VT323", monospace;
  font-size:28px; letter-spacing:.02em;
  text-transform:lowercase;
}
.brand .blink{animation:blink 1.2s steps(2,start) infinite}
@keyframes blink{to{opacity:0}}

.nav a{
  display:inline-block; padding:8px 12px; margin-left:8px;
  border-radius:999px; font-size:12px; text-transform:uppercase; letter-spacing:.12em;
  border:1px solid rgba(255,255,255,.3);
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.03));
}
.nav a:hover{transform:trans