/* ============================================================
   SERVCAL · Capa de efectos 3D / interactividad
   Archivo independiente: se puede quitar sin romper el sitio.
   ============================================================ */

/* ---------- 1. Lienzos de fondo (partículas / red celular) ---------- */
.fx-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  z-index:1;
}
.hero .fx-canvas{opacity:.95}
.hero .container,
.hero .scroll-cue{position:relative;z-index:3}
.telecom-grid,
.contact-grid,
.section-dark .container{position:relative;z-index:2}
.section-dark,.telecom-section,.contact-section,
.section-light,.plep-section{overflow:hidden;isolation:isolate}

/* Fondos claros: la red se dibuja más tenue para no competir con el texto */
.section-light .fx-canvas,.plep-section .fx-canvas{opacity:.62}
.section-light .container,.plep-section .container{position:relative;z-index:2}

/* Halos suaves para secciones claras */
.fx-orb.light{background:radial-gradient(circle,rgba(9,47,137,.16),transparent 68%);filter:blur(55px)}
.fx-orb.light.warm{background:radial-gradient(circle,rgba(255,132,0,.16),transparent 68%)}

/* ---------- 2. Barra de progreso de scroll ---------- */
.fx-progress{
  position:fixed;left:0;top:0;height:3px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--orange),#ffd08a 45%,var(--blue2));
  z-index:2000;pointer-events:none;
  box-shadow:0 0 18px rgba(255,132,0,.55);
}

/* ---------- 3. Cursor personalizado (solo puntero fino) ---------- */
.fx-cursor,.fx-cursor-dot{
  position:fixed;top:0;left:0;z-index:3000;pointer-events:none;
  border-radius:50%;opacity:0;
  transition:opacity .3s ease,width .25s ease,height .25s ease,
             background .25s ease,border-color .25s ease;
}
.fx-cursor{
  width:38px;height:38px;margin:-19px 0 0 -19px;
  border:1px solid rgba(255,160,60,.85);
  background:radial-gradient(circle,rgba(255,132,0,.16),transparent 70%);
}
.fx-cursor-dot{
  width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--orange);
}

/* Sobre fondos claros el cursor cambia a azul corporativo para contrastar */
body.fx-on-light .fx-cursor{
  border-color:rgba(9,47,137,.55);
  background:radial-gradient(circle,rgba(9,47,137,.12),transparent 70%);
}
body.fx-on-light .fx-cursor-dot{background:var(--blue2)}
body.fx-on-light .fx-cursor.is-active{
  border-color:rgba(255,132,0,.9);
  background:radial-gradient(circle,rgba(255,132,0,.2),transparent 70%);
}
body.fx-cursor-on .fx-cursor,
body.fx-cursor-on .fx-cursor-dot{opacity:1}
body.fx-cursor-on{cursor:none}
body.fx-cursor-on a,body.fx-cursor-on button,
body.fx-cursor-on input,body.fx-cursor-on select,
body.fx-cursor-on textarea,body.fx-cursor-on label{cursor:none}
.fx-cursor.is-active{
  width:74px;height:74px;margin:-37px 0 0 -37px;
  background:radial-gradient(circle,rgba(255,132,0,.28),transparent 70%);
  border-color:rgba(255,190,120,.9);
}

/* ---------- 4. Tilt 3D genérico ---------- */
[data-tilt]{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;
}
[data-tilt].is-tilting{transition:transform .12s linear}
[data-tilt] .tilt-layer{transform:translateZ(38px);transform-style:preserve-3d}

/* El shell del hero ya tenía una perspectiva fija: la maneja el tilt */
.visual-shell{transform:perspective(1200px) rotateY(-5deg) rotateX(2deg)}

/* ---------- 5. Tarjetas con foco luminoso que sigue al mouse ---------- */
.service-card,.plep-card,.contact-form,.floating-card,.signal-card{position:relative}
.service-card{overflow:hidden}
.service-card:before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
             rgba(255,132,0,.22),rgba(13,63,176,.14) 40%,transparent 65%);
  transition:opacity .35s ease;pointer-events:none;
}
.service-card:hover:before{opacity:1}
.service-card>*{position:relative;z-index:1}
.service-card .service-icon{transition:transform .4s cubic-bezier(.2,.8,.2,1),background .4s ease}
.service-card:hover .service-icon{transform:translateZ(45px) scale(1.08) rotate(-4deg);background:rgba(255,132,0,.24)}

/* ---------- 6. Botones magnéticos ---------- */
.btn,.nav-cta{will-change:transform}
.btn span{display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.btn:hover span{transform:translateX(5px)}

/* ---------- 7. Aparición de texto por palabras ---------- */
.fx-word{
  display:inline-block;
  opacity:0;
  transform:translateY(38px) rotateX(-55deg);
  transform-origin:50% 100%;
  transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);
}
.fx-word.is-in{opacity:1;transform:none}

/* ---------- 8. Brillo animado en el titular ---------- */
.hero h1 strong{
  background:linear-gradient(100deg,var(--orange) 0%,#ffd7a1 45%,var(--orange) 70%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:fxShine 6s linear infinite;
}
@keyframes fxShine{to{background-position:-250% 0}}

/* ---------- 9. Marco de imagen con parallax ---------- */
[data-parallax]{will-change:transform}

/* ---------- 10. Reveal mejorado con desenfoque ---------- */
.reveal{filter:blur(6px)}
.reveal.visible{filter:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .8s ease}

/* ---------- 11. Anillo de energía en secciones oscuras ---------- */
.fx-orb{
  position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,132,0,.20),transparent 68%);
  filter:blur(40px);
  animation:fxFloat 18s ease-in-out infinite;
}
.fx-orb.b{background:radial-gradient(circle,rgba(13,63,176,.24),transparent 68%);animation-duration:24s;animation-direction:reverse}
@keyframes fxFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(6%,-8%,0) scale(1.12)}
  66%{transform:translate3d(-7%,6%,0) scale(.92)}
}

/* ---------- 12. Métricas y stats con contador latente ---------- */
.visual-metrics article{transition:transform .35s ease,background .35s ease}
.visual-metrics article:hover{transform:translateY(-4px);background:rgba(255,255,255,.1)}

/* ---------- 13. Ajustes móviles / accesibilidad ---------- */
@media(max-width:980px){
  [data-tilt]{transform:none!important}
  .visual-shell{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .fx-canvas{display:none}
  .fx-cursor,.fx-cursor-dot,.fx-progress{display:none}
  .fx-word{opacity:1;transform:none}
  .reveal{filter:none}
  .hero h1 strong{animation:none;color:var(--orange);-webkit-text-fill-color:currentColor}
}