/* WEB-09 · logotipo: símbolo de dos esferas (cabecera) y escena «La conexión» (llamada final) */
:root{--onx-cy:#1cd4f0;--onx-sm:#0f2240;--onx-sm-glow:rgba(15,34,64,.28);--onx-cy-glow:rgba(28,212,240,.45)}
[data-theme="dark"]{--onx-sm:#fff;--onx-sm-glow:rgba(255,255,255,.55);--onx-cy-glow:rgba(28,212,240,.7)}

/* Símbolo pequeño (cabecera) */
.onx-sym{position:relative;display:inline-block;flex:none;width:28px;height:16px}
.onx-sym i{position:absolute;display:block;top:50%;border-radius:50%}
.onx-sym i:nth-child(1){left:8px;width:12px;height:4px;margin-top:-2px;border-radius:2px;background:var(--onx-cy);transform-origin:center}
.onx-sym i:nth-child(2){left:0;width:16px;height:16px;margin-top:-8px;background:var(--onx-cy);box-shadow:0 0 8px var(--onx-cy-glow)}
.onx-sym i:nth-child(3){right:0;width:9px;height:9px;margin-top:-4.5px;background:var(--onx-sm);box-shadow:0 0 6px var(--onx-sm-glow)}
@keyframes onx-sym-a{0%,100%{transform:translateX(0)}40%{transform:translateX(-4px)}}
@keyframes onx-sym-b{0%,100%{transform:translateX(0)}40%{transform:translateX(4px)}}
@keyframes onx-sym-br{0%,100%{transform:scaleX(1);opacity:1}40%{transform:scaleX(1.6);opacity:.35}}
@media (hover:hover) and (pointer:fine){
  .nav-logo:hover .onx-sym i:nth-child(2){animation:onx-sym-a .55s cubic-bezier(.2,.8,.2,1)}
  .nav-logo:hover .onx-sym i:nth-child(3){animation:onx-sym-b .55s cubic-bezier(.2,.8,.2,1)}
  .nav-logo:hover .onx-sym i:nth-child(1){animation:onx-sym-br .55s cubic-bezier(.2,.8,.2,1)}
}

/* Escena «La conexión» */
.onx-stage{position:relative;width:100%;max-width:520px;height:240px;margin:0 auto 24px;overflow:visible}
.onx-scaler{position:absolute;top:50%;left:50%;width:500px;height:300px;transform:translate(-50%,-50%) scale(.8)}
.onx-group{position:relative;width:500px;height:300px;animation:onx-float 4s infinite ease-in-out;animation-play-state:paused}
.onx-c{position:absolute;top:50%;border-radius:50%}
.onx-cyan{width:50px;height:50px;background:var(--onx-cy);z-index:3;animation:onx-cyan 6s infinite ease-in-out;animation-play-state:paused}
.onx-white{width:50px;height:50px;background:var(--onx-sm);box-shadow:0 0 15px var(--onx-sm-glow),0 0 30px var(--onx-sm-glow);z-index:2;animation:onx-white 6s infinite ease-in-out;animation-play-state:paused}
.onx-bridge{position:absolute;top:50%;height:12px;border-radius:6px;background:var(--onx-cy);box-shadow:0 0 10px var(--onx-cy),0 0 20px var(--onx-cy-glow);z-index:1;animation:onx-bridge 6s infinite ease-in-out;animation-play-state:paused}
.onx-stage.in .onx-group,.onx-stage.in .onx-cyan,.onx-stage.in .onx-white,.onx-stage.in .onx-bridge{animation-play-state:running}
@keyframes onx-cyan{
  0%,5%{left:calc(50% - 150px);width:50px;height:50px;transform:translate(-50%,-50%);opacity:0;box-shadow:0 0 10px var(--onx-cy-glow)}
  10%{left:calc(50% - 150px);width:50px;height:50px;transform:translate(-50%,-50%);opacity:1;box-shadow:0 0 15px var(--onx-cy-glow)}
  25%,35%{left:calc(50% - 70px);width:50px;height:50px;transform:translate(-50%,-50%);opacity:1;box-shadow:0 0 15px var(--onx-cy-glow)}
  50%{left:calc(50% - 70px);width:140px;height:140px;transform:translate(-50%,-50%);opacity:1;box-shadow:0 0 30px var(--onx-cy-glow),0 0 60px var(--onx-cy-glow)}
  65%{left:calc(50% - 70px);width:140px;height:140px;transform:translate(-50%,-50%);opacity:1;box-shadow:0 0 40px var(--onx-cy),0 0 80px var(--onx-cy-glow)}
  85%{left:calc(50% - 70px);width:140px;height:140px;transform:translate(-50%,-50%);opacity:1;box-shadow:0 0 30px var(--onx-cy-glow),0 0 60px var(--onx-cy-glow)}
  95%,100%{left:calc(50% - 70px);width:140px;height:140px;transform:translate(-50%,-50%);opacity:0;box-shadow:0 0 10px var(--onx-cy-glow)}
}
@keyframes onx-white{
  0%,5%{left:calc(50% + 150px);transform:translate(-50%,-50%);opacity:0}
  10%{left:calc(50% + 150px);transform:translate(-50%,-50%);opacity:1}
  25%,85%{left:calc(50% + 70px);transform:translate(-50%,-50%);opacity:1}
  95%,100%{left:calc(50% + 70px);transform:translate(-50%,-50%);opacity:0}
}
@keyframes onx-bridge{
  0%,25%{left:calc(50% - 70px);transform:translateY(-50%);width:0;opacity:0}
  28%{left:calc(50% - 70px);transform:translateY(-50%);width:0;opacity:1}
  40%,85%{left:calc(50% - 70px);transform:translateY(-50%);width:140px;opacity:1}
  95%,100%{left:calc(50% - 70px);transform:translateY(-50%);width:140px;opacity:0}
}
@keyframes onx-float{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}}
@media (max-width:600px){
  .onx-stage{height:150px;margin-bottom:16px}
  .onx-scaler{transform:translate(-50%,-50%) scale(.5)}
}
@media (prefers-reduced-motion:reduce){
  .onx-sym i,.nav-logo:hover .onx-sym i{animation:none!important}
  .onx-group{animation:none;transform:none}
  .onx-cyan{animation:none;opacity:1;left:calc(50% - 70px);width:140px;height:140px;transform:translate(-50%,-50%);box-shadow:0 0 30px var(--onx-cy-glow),0 0 60px var(--onx-cy-glow)}
  .onx-white{animation:none;opacity:1;left:calc(50% + 70px);transform:translate(-50%,-50%)}
  .onx-bridge{animation:none;opacity:1;width:140px;left:calc(50% - 70px);transform:translateY(-50%)}
}
/* Palabra de marca junto al símbolo, como en el panel (sin depender de una imagen externa) */
.nav-logo{gap:9px}
.nav-word{font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--text)}