/* VORVEX — hero interactive orbit (upgrade over the static vxh-hero-chip
   layout already shipped in vorvex-home-tokens.css). Loaded AFTER that
   file; #vxhOrbit (id, specificity 100) overrides .vxh-hero-visual (class,
   specificity 10) safely without touching the original stylesheet.
   Transform/opacity only — no animated layout properties, no layout
   thrashing, GPU-compositable. */

#vxhOrbit{
  /* Radii kept small enough to stay inside the visual column even at
     intermediate desktop widths just above the 1100px breakpoint, where
     the two-column hero grid has already narrowed .vxh-hero-visual well
     below its widest (1440px-container) size -- avoids icons spilling
     into the headline column before the single-column layout kicks in. */
  --vxh-r-outer:155px;
  --vxh-r-inner:95px;
  --vxh-icon-half:55px;
  overflow:visible;
}

.vxh-orbit-track{position:absolute;inset:0;pointer-events:none}
.vxh-orbit-track,.vxh-orbit-card{list-style:none;margin:0;padding:0}

.vxh-orbit-icon{
  position:absolute;top:50%;left:50%;
  min-width:44px;min-height:44px;
  margin-left:calc(-1 * var(--vxh-icon-half,55px));
  margin-top:-22px;
  display:flex;align-items:center;justify-content:center;
  pointer-events:auto;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  z-index:2;
}
.vxh-orbit-track--outer .vxh-orbit-icon{animation-name:vxh-orbit-outer-spin}
.vxh-orbit-track--inner .vxh-orbit-icon{animation-name:vxh-orbit-inner-spin}

.vxh-orbit-icon-inner{
  display:flex;align-items:center;gap:7px;
  background:var(--vx-surface);border:1px solid var(--vx-line);border-radius:12px;
  padding:9px 13px;font-size:11.5px;font-weight:700;white-space:nowrap;
  box-shadow:0 10px 26px #00000055;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.vxh-orbit-icon-glyph{font-size:15px;line-height:1}

/* Hover/focus/active never rely on color alone (section 8): border +
   glow + scale + higher z-index + the label is already always visible. */
.vxh-orbit-icon:hover .vxh-orbit-icon-inner,
.vxh-orbit-icon:focus-visible .vxh-orbit-icon-inner,
.vxh-orbit-icon.is-active .vxh-orbit-icon-inner{
  transform:scale(1.12);
  border-color:var(--vx-blue-bright);
  box-shadow:0 0 0 1px var(--vx-blue-bright),0 12px 34px #2f6bff4d,0 0 24px #5b8dff55;
}
.vxh-orbit-icon:hover,.vxh-orbit-icon:focus-visible,.vxh-orbit-icon.is-active{z-index:5}
.vxh-orbit-icon:focus-visible{outline:2px solid var(--vx-blue-bright);outline-offset:3px;border-radius:12px}
.vxh-orbit-icon:focus:not(:focus-visible){outline:none}

/* Pause rule (section 10): hover, focus-within, or a JS-driven touch
   selection all pause both rings in place — resumed automatically the
   moment none of those apply. */
#vxhOrbit.is-paused .vxh-orbit-icon,
#vxhOrbit:focus-within .vxh-orbit-icon{animation-play-state:paused}

.vxh-hero-core{position:relative;z-index:3;animation:vxh-core-breathe 4.5s ease-in-out infinite;transition:box-shadow .25s ease}
#vxhOrbit:hover .vxh-hero-core,#vxhOrbit:focus-within .vxh-hero-core{box-shadow:0 0 110px #7c5cff66}

/* Mini info card (section 9) — single reusable element, fixed inside the
   visual area so it never depends on a moving orbit target's position
   (robust across hover/touch/keyboard/reduced-motion alike). */
.vxh-orbit-card{
  position:absolute;left:50%;bottom:-6px;transform:translate(-50%,100%);
  width:min(260px,88%);background:var(--vx-surface);border:1px solid var(--vx-blue-bright);
  border-radius:12px;padding:14px 16px;box-shadow:0 16px 40px #00000066,0 0 0 1px #2f6bff33;
  z-index:6;text-align:left;
}
.vxh-orbit-card[hidden]{display:none}
.vxh-orbit-card strong{display:block;font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:var(--vx-blue-bright)}
.vxh-orbit-card p{margin:6px 0 10px;font-size:12.5px;line-height:1.5;color:var(--vx-muted)}
.vxh-orbit-card-cta{font-size:11.5px;font-weight:800;color:var(--vx-violet-soft)}

@keyframes vxh-orbit-outer-spin{
  0%{transform:rotate(0deg) translateX(var(--vxh-r-outer)) rotate(0deg) scale(.92);opacity:.75}
  50%{transform:rotate(180deg) translateX(var(--vxh-r-outer)) rotate(-180deg) scale(1.04);opacity:1}
  100%{transform:rotate(360deg) translateX(var(--vxh-r-outer)) rotate(-360deg) scale(.92);opacity:.75}
}
@keyframes vxh-orbit-inner-spin{
  0%{transform:rotate(0deg) translateX(var(--vxh-r-inner)) rotate(0deg) scale(.9);opacity:.72}
  50%{transform:rotate(-180deg) translateX(var(--vxh-r-inner)) rotate(180deg) scale(1.04);opacity:1}
  100%{transform:rotate(-360deg) translateX(var(--vxh-r-inner)) rotate(360deg) scale(.9);opacity:.72}
}
@keyframes vxh-core-breathe{
  0%,100%{box-shadow:0 0 80px #7c5cff44}
  50%{box-shadow:0 0 96px #7c5cff5c}
}

/* GPU hint only where it's actually justified (section 13) — never under
   reduced motion, where nothing continuously animates. */
@media (prefers-reduced-motion:no-preference){
  .vxh-orbit-icon{will-change:transform}
}

/* Section 12: reduced motion — orbit fully stops, icons keep their real,
   correctly-spaced resting position (the same inline transform used as
   each icon's animation start point), hover/focus/click still work. */
@media (prefers-reduced-motion:reduce){
  .vxh-orbit-icon,.vxh-hero-core{animation:none!important}
}

/* Responsive geometry (section 14) — radius shrinks with the existing
   .vxh-hero-visual height steps already defined in vorvex-home-tokens.css
   (420px desktop → 260px ≤1100px); #vxhOrbit's id-specificity override
   only grows that mobile height slightly so two rings + labels have real
   room, never touching any other section. */
@media (max-width:1100px){
  #vxhOrbit{height:300px;--vxh-r-outer:98px;--vxh-r-inner:58px;--vxh-icon-half:44px}
  .vxh-orbit-icon-inner{padding:7px 10px;font-size:10.5px;gap:5px}
  .vxh-orbit-icon-glyph{font-size:13px}
}
@media (max-width:480px){
  /* Real bug found in live testing at 360/375/390px (FLABE "mobile
     overlap"): 10 icons keeping their text label at this width collided
     and clipped into each other (e.g. "Alarmas" over "Redes", "Cámaras"
     hidden behind "Automatización") regardless of how far the radius or
     font-size were pushed down -- the Spanish labels ("Control de
     acceso", "Automatización") simply don't fit 5-per-ring in ~300px of
     width no matter how small. Fixed by collapsing each icon to its
     glyph alone here (a real, common small-screen orbital-nav pattern,
     not a downgrade): the accessible name and full label are never
     lost -- the <em> stays in the DOM for screen readers via the
     standard visually-hidden (not display:none) technique, and the full
     name + description still surface in the real mini-card on tap
     (section 6). Radius grown back up relative to the tablet tier
     because the icons themselves are now much smaller, so there's
     actually more room to keep them clearly apart. */
  #vxhOrbit{height:300px;--vxh-r-outer:112px;--vxh-r-inner:76px;--vxh-icon-half:22px}
  .vxh-hero-core{width:84px;height:84px;font-size:40px}
  .vxh-orbit-icon-inner{padding:0;gap:0;width:44px;height:44px;justify-content:center;border-radius:50%}
  .vxh-orbit-icon-glyph{font-size:17px}
  .vxh-orbit-icon-inner em{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
}