:root{
  --ink:#04060b; --ink2:#080d16; --steel:#121a26;
  --cy:#5ae2f0; --mg:#ec56be; --am:#ffba46;
  --txt:#dbe9f5; --dim:#7d93ab;
  --mono:'Share Tech Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink); color:var(--txt); font-family:var(--mono);
  font-size:16px; line-height:1.65; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* El lienzo del fondo: rejilla en fuga y motos dejando su muro. */
#bg{position:fixed; inset:0; z-index:0; display:block}
.veil{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(236,86,190,.16), transparent 70%),
    radial-gradient(900px 500px at 50% 110%, rgba(90,226,240,.12), transparent 70%);
}
/* Barrido CRT, como en el juego. */
.veil::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.20) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply}
main{position:relative; z-index:2}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}

/* Piezas de chasis: ángulo recto y canto encendido, como la interfaz. */
.panel{background:rgba(8,13,22,.82); border:1px solid rgba(90,226,240,.22); position:relative}
.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--cy); box-shadow:0 0 14px var(--cy)}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.22em;
  color:var(--cy);text-transform:uppercase}
.tag::before{content:"";width:3px;height:12px;background:currentColor;box-shadow:0 0 10px currentColor}

h1,h2,h3{font-weight:400;letter-spacing:.04em;line-height:1.15}
h1{font-size:clamp(38px,8vw,84px);color:#fff;
   text-shadow:0 0 18px rgba(90,226,240,.65), 3px 0 0 rgba(236,86,190,.55), -3px 0 0 rgba(255,186,70,.35)}
h2{font-size:clamp(24px,3.6vw,38px);color:#fff;text-shadow:0 0 16px rgba(90,226,240,.45)}
h3{font-size:18px;color:#fff}
p{color:var(--dim)}
a{color:var(--cy);text-decoration:none}
a:hover{text-shadow:0 0 12px var(--cy)}

/* Portada */
header.hero{min-height:92vh;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:120px 24px 80px}
.hero .lede{max-width:640px;margin:22px auto 0;font-size:17px}
.mark{width:96px;height:96px;margin-bottom:28px;position:relative}
.mark i{position:absolute;background:var(--cy);box-shadow:0 0 16px var(--cy);display:block}
.mark .a{left:20%;top:26%;width:8%;height:48%}
.mark .b{left:20%;top:26%;width:56%;height:8%}
.mark .h{left:70%;top:20%;width:14%;height:14%;background:#fff;box-shadow:0 0 22px #fff;
  animation:pulse 1.8s infinite}
.mark .box{inset:0;border:2px solid rgba(90,226,240,.5);background:rgba(8,13,22,.6);box-shadow:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.btn{padding:13px 26px;border:1px solid var(--cy);color:#fff;font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;background:rgba(90,226,240,.07);position:relative;transition:.18s}
.btn::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--cy);
  box-shadow:0 0 12px var(--cy)}
.btn:hover{background:rgba(90,226,240,.18);text-shadow:none;transform:translateY(-1px)}
.btn.ghost{border-color:rgba(236,86,190,.6)}
.btn.ghost::before{background:var(--mg);box-shadow:0 0 12px var(--mg)}

section{padding:84px 0}
.head{display:flex;flex-direction:column;gap:12px;margin-bottom:34px}

/* Vídeo */
.video{padding:14px;position:relative}
.video video{width:100%;display:block;background:#000}
.hint{margin-top:10px;font-size:12px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase}

/* Capturas */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.shot{padding:10px;position:relative;overflow:hidden}
.shot img{width:100%;display:block;image-rendering:pixelated}
.shot span{display:block;margin-top:10px;font-size:12px;color:var(--dim);letter-spacing:.1em}

/* Fichas */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.card{padding:22px}
.card h3{margin:10px 0 8px}
.card p{font-size:14px}

/* Sectores */
.sectors{display:flex;flex-wrap:wrap;gap:10px}
.sector{padding:9px 16px;border:1px solid currentColor;font-size:12px;letter-spacing:.18em;
  position:relative;background:rgba(0,0,0,.45)}
.sector::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:currentColor;box-shadow:0 0 12px currentColor}

footer{border-top:1px solid rgba(90,226,240,.18);padding:40px 0;position:relative;z-index:2}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
footer p{font-size:13px}
.links{display:flex;gap:20px;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.doc{max-width:760px;margin:0 auto;padding:120px 24px 80px;position:relative;z-index:2}
.doc h2{margin:30px 0 10px}
.doc p,.doc li{color:var(--dim);font-size:15px}
.doc ul{margin:10px 0 0 22px}
@media (max-width:640px){ section{padding:56px 0} header.hero{min-height:88vh} }