/* Conectores: logos en órbita alrededor de Cerebro (Plano). Usa los tokens de la página. */
/* Va al final de la sección de conectores, después de las pestañas. */
.conectores-cierre { text-align: center; }

.orbita { position: relative; height: 580px; margin: 40px auto 0; max-width: 1200px; contain: layout paint; }
.orbita::before { content: ''; position: absolute; inset: 8% 18%; background: radial-gradient(closest-side, var(--wash), rgba(246, 246, 244, 0)); pointer-events: none; }
.orbita svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbita-anillos ellipse { fill: none; stroke: #e4e4e1; stroke-width: 1; }
.orbita-rayos line { stroke-width: 1.25; stroke-linecap: round; opacity: 0; }
.orbita-rayos circle { opacity: 0; }

/* Cerebro en el centro: la misma marca de la navegación, más grande. */
.orbita-nucleo { position: absolute; left: 50%; top: 50%; z-index: 5; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center; background: var(--ink); color: #fff; border-radius: 20px; box-shadow: 0 1px 2px rgba(11, 11, 11, .12), 0 18px 40px -14px rgba(11, 11, 11, .45); }
.orbita-nucleo svg { position: static; width: 40px; height: 40px; }
.orbita-nucleo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px var(--ink); opacity: 0; pointer-events: none; }
.orbita-nucleo.recibe::after { animation: nucleo-recibe 900ms var(--ease-out); }
@keyframes nucleo-recibe { from { opacity: .22; transform: scale(.9); } to { opacity: 0; transform: scale(2.2); } }

/* Cada herramienta: el logo sobre un disco blanco que tapa la órbita, sin borde. */
.astro { position: absolute; left: 0; top: 0; z-index: 2; width: 52px; height: 52px; border-radius: 50%; background: var(--bg); will-change: transform, opacity; opacity: 0; }
.astro.delante { z-index: 8; }
.astro i { position: absolute; inset: 13px; background: var(--marca); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; transition: transform var(--lento) var(--ease-out); }
.astro.ancho i { inset: 0 5px; }
.astro::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px var(--marca), 0 6px 18px -6px var(--marca); opacity: 0; transition: opacity var(--lento) var(--ease-out); }
.astro.vivo::after { opacity: .35; }
.astro.vivo i { transform: scale(1.1); }

.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 699px) {
  .orbita { height: 380px; margin-top: 28px; }
  .orbita::before { inset: 10% 6%; }
  .orbita-nucleo { width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 16px; }
  .orbita-nucleo svg { width: 32px; height: 32px; }
  .astro { width: 42px; height: 42px; }
  .astro i { inset: 10px; }
  .astro.ancho i { inset: 0 3px; }
}