/* ============================================
   OCINWEB · Base (reset, body, fondo ambiental)
   ============================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--mist);
  font-family:var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--blue);color:#04080b}

.wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 28px}

/* Fondo: grid + orbes de luz */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-fx .grid{
  position:absolute;inset:-2px;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 70% 0%,#000 0%,transparent 65%);
  -webkit-mask-image:radial-gradient(circle at 70% 0%,#000 0%,transparent 65%);
  opacity:.5;
}
.bg-fx .orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.orb.a{width:520px;height:520px;background:radial-gradient(circle,#2B8CBE,transparent 70%);top:-160px;right:-120px}
.orb.b{width:440px;height:440px;background:radial-gradient(circle,#3B4A5A,transparent 70%);top:40%;left:-180px;opacity:.6}

/* Rieles de neón laterales alimentados por el foco */
.rail{position:fixed;top:0;bottom:0;width:3px;z-index:0;pointer-events:none;opacity:0;
  animation:railOn 1s ease forwards 3.2s}
.rail.left{left:0;background:linear-gradient(180deg,transparent,var(--blue-bright),var(--blue-glow),var(--blue-bright),transparent)}
.rail.right{right:0;background:linear-gradient(180deg,transparent,var(--blue-bright),var(--blue-glow),var(--blue-bright),transparent)}
.rail::after{content:"";position:absolute;inset:-1px;filter:blur(9px);background:inherit;opacity:.9;
  animation:railPulse 3.4s ease-in-out infinite}
@keyframes railOn{to{opacity:1}}
@keyframes railPulse{0%,100%{opacity:.55}50%{opacity:1}}
.rail .spark{position:absolute;left:50%;transform:translateX(-50%);width:5px;height:70px;border-radius:5px;
  background:linear-gradient(180deg,transparent,#fff,transparent);filter:blur(1px);
  animation:travel 4.5s linear infinite}
.rail.right .spark{animation-delay:2.2s}
@keyframes travel{0%{top:-70px}100%{top:100%}}

/* Reveal al hacer scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* Accesibilidad: reducir movimiento */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .filament{stroke-dashoffset:0}.node,.ray{opacity:1}.rail{opacity:1}.spark{display:none}
  .reveal{opacity:1;transform:none}
}