/* Menu de tela cheia: os itens orbitam o ícone sobre um anel, como o anel da logo.
   O giro para quando o mouse está no menu. No celular vira uma lista. */
.orbita-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.orbita-svg .anel { fill: none; stroke: rgba(241,242,236,.12); stroke-width: 1; }
.orbita-svg .anel-pontilhado { fill: none; stroke: rgba(201,165,140,.25); stroke-width: 1; stroke-dasharray: 2 7; }
.orbita-svg .fio { stroke: rgba(255,196,130,.55); stroke-width: 1; opacity: 0; transition: opacity .4s; }
.orbita-svg .fio.on { opacity: 1; }
.orbita-svg .ponto { fill: rgba(241,242,236,.5); }

.menu-items.orbita a {
  transform: translate(-50%, -50%) !important;
  display: grid; justify-items: center; gap: 4px; text-align: center;
  padding: 10px 14px; transition: opacity .7s, color .4s, text-shadow .4s !important;
}
.menu-items.orbita a .rot { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); font-weight: 400; }
.menu-items.orbita a .nome { font-size: clamp(15px, 1.6vw, 22px); }
.menu-items.orbita a:hover .nome, .menu-items.orbita a:focus-visible .nome { text-shadow: 0 0 22px rgba(255,196,130,.55); }
.menu-items.orbita a[aria-current]::after { display: none; }
.menu-items.orbita a[aria-current] .nome::before {
  content: ""; display: inline-block; width: 8px; height: 11px; margin-right: 10px; vertical-align: 2px; border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #FFF7EA 0%, #FFC482 45%, #D6A078 100%); box-shadow: 0 0 8px 2px rgba(255,196,130,.5);
}

/* celular: lista grande, sem órbita */
@media (max-width: 760px) {
  .orbita-svg { display: none; }
  .menu-core { top: 96px !important; width: 64px !important; height: 64px !important; left: 50% !important; }
  .menu-items.orbita { position: absolute; left: 0; right: 0; top: 150px; display: grid; gap: 4px; padding: 0 16px; }
  .menu-items.orbita a { position: static; transform: none !important; justify-items: start; text-align: left; padding: 10px 0; border-bottom: 1px solid rgba(241,242,236,.08); }
  .menu-items.orbita a .nome { font-size: 22px; }
}