/* ═══════════════════════════════════════════════
   Menu-círculo CBR — navegação flutuante
   Fechado: um círculo com o anel 4 cores.
   Aberto: pílula branca, bolinhas coloridas +
   rótulos à esquerda (fluxo dinâmico).
   ═══════════════════════════════════════════════ */

.orb {
  position: fixed; left: clamp(1rem, 3vw, 2.2rem); top: clamp(1rem, 2.5vh, 1.6rem);
  z-index: 200;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem;
}
.orb__top { display: flex; align-items: center; gap: 0.9rem; }
.orb__brand { display: inline-block; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.orb__brand:hover { transform: scale(1.06); }
.orb__brand img { height: 48px; width: auto; display: block; }

.orb__toggle {
  width: 58px; height: 58px; border-radius: 50%;
  border: none; cursor: pointer; position: relative;
  background:
    radial-gradient(circle at center, #ffffff 0 58%, transparent 59%),
    conic-gradient(#0086BC 0 25%, #8CC63F 25% 50%, #ED1E79 50% 75%, #FBB03B 75% 100%);
  box-shadow: 0 10px 26px -10px rgba(1,42,58,0.45), 0 0 0 4px rgba(255,255,255,0.85);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
.orb__toggle:hover { transform: scale(1.1) rotate(18deg); box-shadow: 0 14px 30px -10px rgba(1,42,58,0.55), 0 0 0 4px #fff; }
.orb__toggle::before, .orb__toggle::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 2.5px; border-radius: 2px; background: #012A3A;
  transition: transform 0.45s cubic-bezier(0.87, 0, 0.13, 1);
}
.orb__toggle::before { transform: translate(-50%, -50%) translateY(-4px); }
.orb__toggle::after  { transform: translate(-50%, -50%) translateY(4px); }
.orb.is-open .orb__toggle::before { transform: translate(-50%, -50%) rotate(45deg); }
.orb.is-open .orb__toggle::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.orb__panel {
  display: flex; flex-direction: column; gap: 0.35rem;
  background: #fff; border-radius: 20px;
  padding: 1rem 0.9rem;
  box-shadow: 0 20px 50px -18px rgba(1,42,58,0.4);
  visibility: hidden; opacity: 0;
  transform: translateY(-16px) scale(0.94);
  transform-origin: top left;
  transition: opacity 0.35s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s 0.45s;
}
.orb.is-open .orb__panel {
  visibility: visible; opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.3s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.orb__item {
  display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: 0;
  text-decoration: none; padding: 0.2rem 0.25rem;
  border-radius: 100px;
}
.orb__dot {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--c);
  box-shadow: 0 4px 10px -3px var(--c);
  transform: scale(0);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0s), box-shadow 0.3s;
}
.orb.is-open .orb__dot { transform: scale(1); }
/* anel colorido do CBR — itens institucionais */
.orb__dot--ring {
  position: relative;
  background: conic-gradient(from -90deg,
    #29ABE2 0 23%, #fff 23% 25%,
    #8CC63F 25% 48%, #fff 48% 50%,
    #ED1E79 50% 73%, #fff 73% 75%,
    #FBB03B 75% 98%, #fff 98% 100%);
  box-shadow: 0 4px 10px -3px rgba(1, 42, 58, 0.35);
}
.orb__dot--ring::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fff;
}
/* hover: o anel completa o giro preenchido com a cor do item */
@property --varre {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.orb__dot--ring::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -90deg, var(--c) 0 var(--varre), transparent var(--varre) 360deg);
  transition: --varre 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.orb__item:hover .orb__dot--ring::before,
.orb__item:focus-visible .orb__dot--ring::before { --varre: 360deg; }
.orb__label {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 0.82rem; font-weight: 700; letter-spacing: -0.02em;
  color: #0086BC; white-space: nowrap;
  max-width: 0; opacity: 0; overflow: hidden;
  padding-left: 0;
  transform: translateX(-8px);
  transition: max-width 0.45s var(--d, 0s), opacity 0.35s var(--d, 0s), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s), padding 0.45s var(--d, 0s);
}
.orb.is-open .orb__label { max-width: 220px; opacity: 1; transform: translateX(0); padding-left: 0.7rem; }
.orb__item:hover .orb__dot { transform: scale(1.35); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent), 0 6px 14px -4px var(--c); }
.orb__item:hover .orb__label { color: #012A3A; }

@media (max-width: 640px) {
  .orb__toggle { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .orb__toggle, .orb__panel, .orb__dot, .orb__label, .orb__dot--ring::before { transition-duration: 0.01ms !important; }
}

/* ── barra liquid glass do topo ────────────── */
.topglass {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 88px;
  z-index: 140;
  pointer-events: none;
  background: linear-gradient(rgba(255,255,255,0.42), rgba(255,255,255,0.28));
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 12px 30px -18px rgba(1,42,58,0.25);
}
@media (max-width: 720px) { .topglass { height: 74px; } }

/* home: sólida no topo, vidro ao rolar */
.topglass {
  transition: background 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}
.topglass--home.is-topo {
  background: #ffffff;
  border-bottom: 1px solid rgba(0,134,188,0.14);
  box-shadow: 0 12px 30px -20px rgba(1,42,58,0.18);
}