/* ==========================================================
   PHI MOTION ENGINE 1.0
   Movimiento tecnológico liviano y accesible
========================================================== */

:root{
  --phi-energy:#29d9ff;
  --phi-energy-2:#00f3c8;
  --phi-violet:#9b5cff;
  --phi-motion-speed:10s;
}

/* Capa general, nunca bloquea la interacción */
.phi-motion-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}

#phi-particles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.55;
}

/* Circuitos laterales vivos */
.side{
  width:clamp(54px,7vw,112px)!important;
  opacity:.62!important;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(90deg,transparent,rgba(19,194,255,.08),transparent),
    url('../img/side-circuit.png') center/cover repeat-y!important;
  filter:drop-shadow(0 0 12px rgba(0,183,255,.22));
}

.side::before,
.side::after{
  content:"";
  position:absolute;
  inset:-15% 8%;
  pointer-events:none;
}

/* Barrido de energía vertical */
.side::before{
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 38%,
      rgba(62,225,255,.08) 44%,
      rgba(62,225,255,.95) 49%,
      rgba(0,255,203,.5) 51%,
      rgba(62,225,255,.08) 56%,
      transparent 62%,
      transparent 100%
    );
  mix-blend-mode:screen;
  filter:blur(.4px) drop-shadow(0 0 12px rgba(37,225,255,.95));
  animation:phi-side-scan var(--phi-motion-speed) linear infinite;
}

/* Pulso secundario más lento */
.side::after{
  inset:-10% 14%;
  background:
    radial-gradient(circle at 50% 10%,rgba(113,245,255,.95) 0 2px,transparent 5px),
    linear-gradient(180deg,transparent 0 8%,rgba(38,212,255,.7) 9%,transparent 10% 100%);
  background-size:100% 180px,100% 100%;
  background-repeat:repeat-y;
  opacity:.65;
  animation:phi-side-nodes 14s linear infinite;
}

.side-right::before{animation-delay:-4.6s}
.side-right::after{animation-delay:-7s}

@keyframes phi-side-scan{
  from{transform:translateY(-72%)}
  to{transform:translateY(72%)}
}

@keyframes phi-side-nodes{
  from{background-position:0 -220px,0 0}
  to{background-position:0 680px,0 0}
}

/* Pulsos creados por JS */
.phi-energy-pulse{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#d7fbff;
  box-shadow:
    0 0 5px #fff,
    0 0 13px var(--phi-energy),
    0 0 30px var(--phi-energy),
    0 0 48px var(--phi-energy-2);
  opacity:0;
  will-change:transform,opacity;
}

.phi-energy-pulse::after{
  content:"";
  position:absolute;
  top:50%;
  right:50%;
  width:44px;
  height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,var(--phi-energy),#fff);
  filter:drop-shadow(0 0 6px var(--phi-energy));
}

.phi-energy-pulse.left{
  left:clamp(18px,3.8vw,66px);
  animation:phi-pulse-left 2.3s cubic-bezier(.22,.61,.36,1) forwards;
}

.phi-energy-pulse.right{
  right:clamp(18px,3.8vw,66px);
  animation:phi-pulse-right 2.3s cubic-bezier(.22,.61,.36,1) forwards;
}

.phi-energy-pulse.right::after{
  right:auto;
  left:50%;
  transform:translateY(-50%) rotate(180deg);
}

@keyframes phi-pulse-left{
  0%{transform:translateY(-12vh) scale(.45);opacity:0}
  10%{opacity:1}
  82%{opacity:.95}
  100%{transform:translateY(112vh) scale(1.1);opacity:0}
}
@keyframes phi-pulse-right{
  0%{transform:translateY(112vh) scale(.45);opacity:0}
  10%{opacity:1}
  82%{opacity:.95}
  100%{transform:translateY(-12vh) scale(1.1);opacity:0}
}

/* Hero: integración del logo con el fondo */
.hero-art{
  perspective:900px;
}
.hero-logo-main{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle,rgba(9,166,255,.16),rgba(0,28,52,.05) 52%,transparent 72%)!important;
  border:none!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform-style:preserve-3d;
  transition:transform .24s ease-out;
}

.hero-logo-main::before,
.hero-logo-main::after{
  content:"";
  position:absolute;
  inset:3%;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
}

.hero-logo-main::before{
  border:1px solid rgba(52,220,255,.33);
  box-shadow:
    inset 0 0 26px rgba(0,213,255,.15),
    0 0 34px rgba(0,190,255,.16);
  animation:phi-orbit-spin 22s linear infinite;
}

.hero-logo-main::after{
  inset:10%;
  background:
    conic-gradient(
      from 90deg,
      transparent 0 18%,
      rgba(26,225,255,.8) 20%,
      transparent 23% 51%,
      rgba(0,255,188,.72) 53%,
      transparent 56% 82%,
      rgba(155,92,255,.65) 84%,
      transparent 87%
    );
  border-radius:50%;
  filter:blur(1px) drop-shadow(0 0 12px rgba(30,218,255,.55));
  opacity:.55;
  animation:phi-orbit-spin 15s linear infinite reverse;
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 64% 67%,transparent 69%);
  mask:radial-gradient(circle,transparent 62%,#000 64% 67%,transparent 69%);
}

.hero-logo-main img{
  width:min(100%,590px)!important;
  max-height:590px!important;
  object-fit:contain!important;
  filter:
    drop-shadow(0 0 7px rgba(51,217,255,.4))
    drop-shadow(0 0 24px rgba(0,160,255,.23));
  animation:phi-logo-breathe 6s ease-in-out infinite;
  transform:translateZ(20px);
}

@keyframes phi-orbit-spin{to{transform:rotate(360deg)}}
@keyframes phi-logo-breathe{
  0%,100%{filter:drop-shadow(0 0 7px rgba(51,217,255,.38)) drop-shadow(0 0 22px rgba(0,160,255,.20))}
  50%{filter:drop-shadow(0 0 11px rgba(82,232,255,.72)) drop-shadow(0 0 35px rgba(0,190,255,.32))}
}

/* Logo secundario integrado */
.about-header > img{
  background:transparent!important;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 15px rgba(41,217,255,.18));
}

/* Menú compacto y legible */
.main-header{
  gap:clamp(10px,1.4vw,24px)!important;
}
.main-header nav{
  min-width:0;
  gap:2px!important;
  flex:1 1 auto;
  justify-content:center;
}
.main-header nav a{
  padding:9px clamp(6px,.65vw,11px)!important;
  font-size:clamp(11px,.78vw,13px)!important;
  white-space:nowrap;
  letter-spacing:.01em;
}
.main-header nav a::after{
  content:"";
  display:block;
  height:1px;
  margin-top:4px;
  transform:scaleX(0);
  transform-origin:center;
  background:linear-gradient(90deg,transparent,var(--phi-energy),transparent);
  transition:transform .22s ease;
}
.main-header nav a:hover::after,
.main-header nav a:focus-visible::after{
  transform:scaleX(1);
}
.header-btn{
  flex:0 0 auto;
  white-space:nowrap;
  padding-inline:14px!important;
  font-size:12px!important;
}

/* Microinteracciones consistentes */
.service-grid article,
.client-feature,
.about-card,
.purpose-grid article,
.plan-card,
.benefits article{
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}
.service-grid article:hover,
.client-feature:hover,
.about-card:hover,
.purpose-grid article:hover,
.plan-card:hover,
.benefits article:hover{
  transform:translateY(-5px);
  border-color:rgba(48,219,255,.48)!important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.28),
    0 0 28px rgba(0,195,255,.08);
}

.btn{
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:"";
  position:absolute;
  top:-70%;
  left:-45%;
  width:30%;
  height:240%;
  transform:rotate(24deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
  transition:left .65s ease;
  pointer-events:none;
}
.btn:hover::before{left:125%}

/* Destello sincronizado ocasional */
body.phi-energy-wave .hero-logo-main::before{
  box-shadow:
    inset 0 0 34px rgba(0,235,255,.32),
    0 0 58px rgba(0,211,255,.38);
}
body.phi-energy-wave .assistant-toggle,
body.phi-energy-wave .whatsapp{
  filter:brightness(1.12) drop-shadow(0 0 13px rgba(42,223,255,.58));
}

/* Responsividad */
@media (max-width:1220px){
  .header-btn{display:none!important}
  .main-header nav a{
    padding-inline:8px!important;
    font-size:12px!important;
  }
}

@media (max-width:980px){
  .side{width:46px!important;opacity:.36!important}
  .hero-logo-main img{max-height:440px!important}
}

@media (max-width:720px){
  .side{display:none!important}
  #phi-particles{opacity:.28}
  .hero-logo-main::before,
  .hero-logo-main::after{opacity:.55}
}

/* Accesibilidad y ahorro de batería */
@media (prefers-reduced-motion:reduce){
  .side::before,
  .side::after,
  .hero-logo-main::before,
  .hero-logo-main::after,
  .hero-logo-main img,
  .phi-energy-pulse{
    animation:none!important;
  }
  #phi-particles{display:none}
}