/* TEKNIUM — Estilos base compartidos (single source, usada por todas las páginas)
   Color de acento controlado por variables CSS. Default = neon cyan.
   Páginas con acento propio (SKOLARIA, NLAB, LEGALIX) sobreescriben :root
   en un <style> corto DESPUÉS de este archivo. */

:root {
  --accent: #00d4ff;
  --accent-dark: #0099cc;
  --accent-rgb: 0,212,255;
}

* { font-family: 'Outfit', sans-serif; }
body { background: #030712; color: #fff; }

.glass {
  background: rgba(10,15,26,0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--accent-rgb),0.1);
}

.glass-card {
  background: rgba(10,15,26,0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--accent-rgb),0.12);
  transition: all 0.4s cubic-bezier(.4,0,.2,1);
}
.glass-card:hover {
  border-color: rgba(var(--accent-rgb),0.4);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(var(--accent-rgb),0.12);
}

.btn-neon, .btn-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn-neon:hover, .btn-accent:hover {
  box-shadow: 0 0 40px rgba(var(--accent-rgb),0.5);
  transform: translateY(-2px);
}
.btn-neon::after, .btn-accent::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,transparent,rgba(255,255,255,0.2),transparent);
  transform:translateX(-100%);
  transition:0.5s;
}
.btn-neon:hover::after, .btn-accent:hover::after { transform:translateX(100%); }

.btn-outline, .btn-outline-neon {
  border: 1px solid var(--accent);
  color: var(--accent);
  transition: all 0.3s ease;
}
.btn-outline:hover, .btn-outline-neon:hover {
  background: rgba(var(--accent-rgb),0.1);
  box-shadow: 0 0 20px rgba(var(--accent-rgb),0.3);
}

.line-glow { height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); }

.animate-on-scroll { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(.4,0,.2,1); }
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }

.feature-icon {
  width:56px; height:56px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition: all 0.4s;
}

.pulse-ring { animation: pulseRing 2s ease-out infinite; }
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.4); }
  70%  { box-shadow: 0 0 0 15px rgba(var(--accent-rgb),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #030712; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent), var(--accent-dark)); border-radius: 4px; }

.modal-overlay { opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
.modal-overlay.active { opacity:1; pointer-events:all; }

.tilt-card { transform-style: preserve-3d; }
.tilt-hologram { transform: translateZ(60px); display: inline-block; filter: drop-shadow(0 15px 15px rgba(var(--accent-rgb),0.4)); }
.tilt-hologram-alt { transform: translateZ(30px); display: inline-block; }

.particle { position: absolute; width: 3px; height: 3px; background: var(--accent); border-radius: 50%; opacity: 0.4; animation: float 8s infinite; }

.neon-border { border: 1px solid rgba(var(--accent-rgb),0.3); }
.neon-glow { box-shadow: 0 0 30px rgba(var(--accent-rgb),0.3), inset 0 0 30px rgba(var(--accent-rgb),0.05); }
.neon-text { text-shadow: 0 0 20px rgba(var(--accent-rgb),0.5); }
.hero-gradient { background: linear-gradient(135deg, rgba(3,7,18,0.9) 0%, rgba(3,7,18,0.6) 50%, rgba(var(--accent-rgb),0.05) 100%); }
.section-gradient { background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb),0.02), transparent); }

.count-up { font-variant-numeric: tabular-nums; }