/* ORBIT SYSTEM · hero de portafolio (DOM/CSS, sin WebGL) */
.orbit-system{
  --ink:#0f1433;            /* navy tipografía */
  --blue:#2e44e8;           /* azul blueprint */
  --line:rgba(46,68,232,.34);
  --s:720px;                /* ancho real, lo escribe el JS */
  --lead:34px;              /* largo de la línea guía */
  position:relative;
  width:min(88vw,720px);
  aspect-ratio:1/1;
  background:none;                 /* transparente a propósito */
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  touch-action:pan-y;              /* no robamos el scroll vertical */
  cursor:grab;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.orbit-system.is-dragging{cursor:grabbing}

/* ---------- órbitas (SVG) ---------- */
.orbit-rings{position:absolute;inset:0;width:100%;height:100%;z-index:10;
  pointer-events:none;overflow:visible}
.orbit-rings ellipse{fill:none;stroke:var(--line);stroke-width:.9;
  vector-effect:non-scaling-stroke}

/* ---------- texturas de planeta ----------
   Capa de superficie. La iluminación esférica va aparte, en ::after,
   para que se aplique igual sobre cualquier textura. */
.tex-plain{background:radial-gradient(circle at 34% 30%,var(--c1),var(--c2) 44%,var(--c3) 88%)}

.tex-bands{background:                        /* gigante gaseoso, bandas difusas */
  repeating-linear-gradient(176deg,
    rgba(255,255,255,.34) 0%,rgba(255,255,255,.02) 4.5%,
    rgba(10,24,92,.30) 9%,rgba(255,255,255,.02) 13.5%,
    rgba(255,255,255,.20) 18%,rgba(255,255,255,.02) 23%),
  radial-gradient(circle at 34% 30%,var(--c1),var(--c2) 40%,var(--c3) 88%)}

.tex-rock{background:                         /* superficie rocosa moteada */
  radial-gradient(16% 16% at 63% 37%,rgba(12,24,84,.34),transparent 70%),
  radial-gradient(22% 22% at 39% 64%,rgba(12,24,84,.24),transparent 72%),
  radial-gradient(12% 12% at 74% 68%,rgba(12,24,84,.30),transparent 70%),
  radial-gradient(18% 18% at 27% 45%,rgba(255,255,255,.34),transparent 72%),
  radial-gradient(13% 13% at 54% 18%,rgba(255,255,255,.30),transparent 70%),
  radial-gradient(26% 20% at 62% 82%,rgba(12,24,84,.20),transparent 75%),
  radial-gradient(circle at 34% 30%,var(--c1),var(--c2) 42%,var(--c3) 88%)}

.tex-marble{background:                       /* vetas tipo hielo/mármol */
  radial-gradient(52% 16% at 38% 30%,rgba(255,255,255,.42),transparent 72%),
  radial-gradient(44% 12% at 62% 52%,rgba(12,24,84,.28),transparent 74%),
  radial-gradient(58% 14% at 45% 68%,rgba(255,255,255,.34),transparent 72%),
  radial-gradient(30% 24% at 72% 26%,rgba(12,24,84,.22),transparent 76%),
  radial-gradient(circle at 34% 30%,var(--c1),var(--c2) 42%,var(--c3) 88%)}

.tex-cloud{background:                        /* nubes suaves, para el núcleo */
  radial-gradient(58% 22% at 40% 34%,rgba(255,255,255,.58),transparent 70%),
  radial-gradient(48% 18% at 63% 58%,rgba(255,255,255,.40),transparent 70%),
  radial-gradient(42% 16% at 33% 70%,rgba(8,22,104,.34),transparent 72%),
  radial-gradient(34% 14% at 68% 78%,rgba(255,255,255,.30),transparent 72%),
  radial-gradient(circle at 34% 30%,var(--c1),var(--c2) 40%,var(--c3) 88%)}

/* iluminación común: especular, relleno y terminator */
.orbit-sphere::after,.orbit-core::after{content:'';position:absolute;inset:0;
  border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.45),inset -2px -3px 7px rgba(255,255,255,.42);background:
    radial-gradient(circle at 31% 23%,#fff 0 3%,rgba(255,255,255,.55) 10%,rgba(255,255,255,0) 26%),
    radial-gradient(circle at 30% 26%,rgba(255,255,255,.18),rgba(255,255,255,0) 34%),
    radial-gradient(circle at 76% 84%,rgba(10,20,70,.55),rgba(10,20,70,.18) 45%,rgba(10,20,70,0) 72%)}

/* ---------- núcleo ---------- */
.orbit-core{position:absolute;left:50%;top:50%;z-index:11;
  width:calc(.15 * var(--s));height:calc(.15 * var(--s));
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  will-change:transform;--c1:#ffffff;--c2:#6f95f0;--c3:#1c31ae;
  box-shadow:0 0 0 1px rgba(255,255,255,.5) inset,0 0 34px 6px rgba(46,68,232,.28);
  animation:coreBreathe 7s ease-in-out infinite}
@keyframes coreBreathe{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.5) inset,0 0 26px 4px rgba(46,68,232,.22)}
  50%    {box-shadow:0 0 0 1px rgba(255,255,255,.5) inset,0 0 48px 12px rgba(46,68,232,.40)}
}
/* ---------- nodos ---------- */
.orbit-node{position:absolute;left:50%;top:50%;width:0;height:0;
  will-change:transform,opacity}
.orbit-hit{position:absolute;left:0;top:0;border-radius:50%;
  width:calc(var(--d) * var(--s) + 22px);height:calc(var(--d) * var(--s) + 22px);
  transform:translate(-50%,-50%);cursor:pointer}
.orbit-sphere{position:absolute;left:0;top:0;border-radius:50%;
  width:calc(var(--d) * var(--s));height:calc(var(--d) * var(--s));
  transform:translate(-50%,-50%);pointer-events:none;will-change:transform;
  box-shadow:3px 5px 12px rgba(15,20,51,.16);transition:box-shadow .3s ease}
.orbit-node.is-hover .orbit-sphere{
  box-shadow:0 0 26px 8px rgba(46,68,232,.45),3px 5px 12px rgba(15,20,51,.16)}

/* ---------- etiquetas ---------- */
/* la línea guía sale radialmente de la esfera; el JS le da ángulo y origen */
.orbit-lead{position:absolute;left:0;top:0;display:block;height:1px;
  width:var(--lead);background:var(--line);transform-origin:0 50%;
  opacity:.85;pointer-events:none;will-change:transform}
.orbit-lead::before{content:'';position:absolute;left:-1px;top:-1px;
  width:3px;height:3px;border-radius:50%;background:var(--blue);opacity:.75}
.orbit-label{position:absolute;left:0;top:0;width:0;height:0;
  pointer-events:none;opacity:.82;transition:opacity .25s ease;will-change:transform}
.orbit-node.is-hover .orbit-label{opacity:1}
.orbit-txt{position:absolute;bottom:0;left:0;white-space:nowrap;
  font-size:10px;letter-spacing:.14em;color:var(--blue);
  padding:2px 0 3px;border-bottom:1px solid var(--line);
  background:none;transition:background .22s ease,border-color .22s ease,
  color .22s ease,padding .22s ease}
.orbit-label.l .orbit-txt{left:auto;right:0}     /* etiqueta volteada al otro lado */
.orbit-node.is-hover .orbit-txt{color:var(--ink);background:#fff;
  padding:4px 8px;border:1px solid rgba(46,68,232,.55)}

/* ---------- puntitos de textura ---------- */
.orbit-dot{position:absolute;left:50%;top:50%;width:3px;height:3px;
  border-radius:50%;background:var(--blue);opacity:.4;z-index:9;
  pointer-events:none;will-change:transform}

@media (max-width:640px){
  .orbit-system{--lead:14px}
  .orbit-txt{font-size:9px}
}
@media (prefers-reduced-motion:reduce){.orbit-core{animation:none}}

/* --- integración con el hero del sitio --- */
.orbit-system{--ink:var(--ink,#0f1433);--blue:var(--accent,#2E5BFF);--line:rgba(46,91,255,.34);width:100%;max-width:none;margin-inline:auto}
.orbit-core{width:calc(.24 * var(--s));height:calc(.24 * var(--s))}
.orbit-stage{z-index:3}
.orbit-stage .orbit-system{width:95%;margin-inline:auto;transform:translateY(calc(-21% - 10px))}