/* ===== VERSIÓN TECH — llamativa, estética de IA ===== */

html { scroll-behavior: auto; }

#fx-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 2000;
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
  background: linear-gradient(90deg, var(--violet), var(--cyan), var(--gold));
  box-shadow: 0 0 12px rgba(0,212,255,.8);
}

/* red neuronal interactiva (reemplaza las partículas originales) */
#fx-net { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* halo que sigue al cursor */
#fx-cursor {
  position: fixed; top: 0; left: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px;
  border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(0,212,255,.10), rgba(123,47,190,.07) 40%, transparent 70%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .4s;
}
#fx-cursor.on { opacity: 1; }

/* nav */
nav { transition: transform 0.45s cubic-bezier(.22,1,.36,1), background 0.3s; }
nav.fx-hide { transform: translateY(-100%); }

/* hero: grilla + barrido de escáner */
.hero-bg { opacity: 0.32; }
#inicio::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,212,255,.035) 0 1px, transparent 1px 4px);
}
#inicio::before {
  content: ''; position: absolute; left: 0; right: 0; height: 160px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0,212,255,.07), transparent);
  animation: fxSweep 7s linear infinite;
}
@keyframes fxSweep { from { top: -160px; } to { top: 100%; } }

@keyframes fxUp {
  from { opacity: 0; transform: translateY(28px); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.hero-label   { animation: fxUp .9s cubic-bezier(.22,1,.36,1) .05s both; }
.hero-title .line1 { animation: fxUp .6s ease .15s both; }
.hero-title .line2 { animation: fxUp .6s ease .25s both, gradShift 4s ease infinite; }
.hero-tagline { animation: fxUp 1s cubic-bezier(.22,1,.36,1) 1.0s both; }
.hero-actions { animation: fxUp 1s cubic-bezier(.22,1,.36,1) 1.2s both; }
.hero-title, .section-title { font-variant-ligatures: none; }

/* cursor parpadeante tras el título (decoración) */
.hero-title .line2::after {
  content: '_'; -webkit-text-fill-color: var(--cyan); color: var(--cyan);
  margin-left: .08em; animation: fxBlink 1s steps(1) infinite;
}
@keyframes fxBlink { 50% { opacity: 0; } }

/* ticker de servicios */
.fx-marquee {
  position: relative; z-index: 1; overflow: hidden; padding: 1.1rem 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: rgba(13,13,26,.7);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.fx-track { display: flex; width: max-content; animation: fxMarquee 32s linear infinite; }
.fx-marquee:hover .fx-track { animation-play-state: paused; }
.fx-track span {
  font-family: 'Orbitron', monospace; font-weight: 700; font-size: .85rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-muted); padding: 0 1.6rem; white-space: nowrap;
}
.fx-track span:nth-child(odd)  { color: var(--cyan); }
.fx-track i { color: var(--gold); font-style: normal; padding: 0 .4rem; }
@keyframes fxMarquee { to { transform: translateX(-50%); } }

/* revelados más dramáticos */
.reveal, .reveal-left, .reveal-scale {
  filter: blur(8px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1);
}
.reveal { transform: translateY(52px); }
.reveal-left { transform: translateX(-70px); }
.reveal.visible, .reveal-left.visible, .reveal-scale.visible { filter: none; }
.service-card.reveal, .value-item.reveal-scale {
  transition: opacity .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1),
              transform .35s ease-out, box-shadow .3s, border-color .3s, background .3s;
}

/* tarjetas: tilt 3D + spotlight + borde que brilla */
.service-card, .value-item { transform-style: preserve-3d; will-change: transform; }
.service-card {
  background: radial-gradient(circle 280px at var(--mx, -400px) var(--my, -400px), rgba(0,212,255,.16), rgba(123,47,190,.08) 45%, transparent 70%), var(--surface);
}
.service-card:hover { border-color: rgba(0,212,255,.45); box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 40px rgba(0,212,255,.15); }
.value-item {
  background: radial-gradient(circle 160px at var(--mx, -400px) var(--my, -400px), rgba(212,175,55,.14), transparent 70%), rgba(123,47,190,.07);
}
.service-icon { transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .3s; }
.service-card:hover .service-icon { transform: translateZ(30px) scale(1.12) rotate(-6deg); }

/* imagen de nosotros: parallax + halo pulsante */
.img-glow-wrapper { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }
@keyframes fxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.nosotros-frame { animation: fxFloat 6s ease-in-out infinite; }
@keyframes fxHalo {
  0%,100% { box-shadow: 0 0 30px rgba(0,212,255,.3), 0 0 50px rgba(212,175,55,.15); }
  50%     { box-shadow: 0 0 55px rgba(0,212,255,.55), 0 0 90px rgba(123,47,190,.35); }
}
.nosotros-frame { animation: fxFloat 6s ease-in-out infinite, fxHalo 4s ease-in-out infinite; }

/* proceso: la línea se dibuja y los pasos se "encienden" */
.proceso-steps::before { transform: scaleX(var(--p, 0)); transform-origin: left center; height: 2px; box-shadow: 0 0 12px rgba(0,212,255,.6); }
.step-num { transition: border-color .5s, box-shadow .5s, color .5s, background .5s, transform .5s; }
.step.on .step-num {
  border-color: var(--cyan); background: rgba(0,212,255,.1); color: #fff; transform: scale(1.12);
  box-shadow: 0 0 28px rgba(0,212,255,.55), inset 0 0 12px rgba(0,212,255,.25);
}

/* botones magnéticos */
.btn-primary, .btn-secondary, .nav-cta, .btn-submit { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .hero-label, .hero-title .line1, .hero-tagline, .hero-actions { animation: none; }
  .hero-title .line2 { animation: gradShift 4s ease infinite; }
  .nosotros-frame, .fx-track, #inicio::before, .hero-title .line2::after { animation: none; }
  .reveal, .reveal-left, .reveal-scale { filter: none; }
}
@media (hover: none) { #fx-cursor { display: none; } }