/* Navegação Órbita: barra flutuante de vidro (anterior/próxima, cena atual, Menu e Controles) com as cores e fontes da skin. */
@property --p{syntax:'<number>';inherits:false;initial-value:0}
/* --orb-acento: destaque da marca clareado, legível sobre o vidro escuro mesmo quando a cor da marca é escura */
body.nav-orbita{--menu-h:92px;--orb-acento:color-mix(in srgb,var(--ouro) 62%,#fff)}
body.nav-orbita .top .scene-title{display:none}

.orb{position:fixed;z-index:16;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);
  font-family:var(--fonte),system-ui,sans-serif;color:#fff}
.orb-dock{display:flex;align-items:center;gap:10px;padding:8px;border-radius:999px;border:1px solid #ffffff30;
  background:color-mix(in srgb,var(--verde) 50%,#0a0d0e9c);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 18px 50px #00000080,inset 0 1px 0 #ffffff26;animation:orb-chegar .8s cubic-bezier(.25,1,.5,1) both}
@keyframes orb-chegar{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
.orb-grupo{display:flex;align-items:center;gap:8px}
.orb-extras{padding-left:10px;border-left:1px solid #ffffff26}
.orb button{font:inherit;color:inherit}
.orb button:focus-visible,body.nav-orbita .orb .menu-toggle:focus-visible,body.nav-orbita .orb .tool:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}

.orb-seta{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffff3d;background:#ffffff10;cursor:pointer;
  transition:background .3s,border-color .3s,color .3s,transform .3s}
.orb-seta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.25,1,.5,1)}
.orb-seta:hover{background:var(--ouro);border-color:var(--ouro);color:var(--verde)}
.orb-seta[data-dir="-1"]:hover svg{transform:translateX(-3px)}.orb-seta[data-dir="1"]:hover svg{transform:translateX(3px)}
.orb-seta:active{transform:scale(.92)}

.orb-capsula{display:flex;align-items:center;gap:12px;height:52px;padding:4px 18px 4px 4px;border-radius:999px;border:1px solid #ffffff24;background:#ffffff0d;cursor:pointer;text-align:left;
  transition:background .3s,border-color .3s}
.orb-capsula:hover,.orb-capsula[aria-expanded="true"]{background:#ffffff1f;border-color:color-mix(in srgb,var(--ouro) 60%,transparent)}
.orb-capsula:disabled{cursor:default}
.orb-anel{--p:0;width:44px;height:44px;flex:none;padding:3px;border-radius:50%;background:conic-gradient(var(--orb-acento) calc(var(--p)*360deg),#ffffff2e 0);transition:--p .8s cubic-bezier(.25,1,.5,1)}
.orb-anel img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover;border:2px solid color-mix(in srgb,var(--verde) 70%,#000)}
.orb-textos{display:flex;flex-direction:column;min-width:150px;max-width:240px;overflow:hidden}
.orb-textos small{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orb-acento);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orb-textos strong{font-family:var(--fonte-titulo),var(--fonte),serif;font-weight:var(--peso-titulo,700);font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orb-textos.orb-ir-frente{animation:orb-frente .55s cubic-bezier(.25,1,.5,1)}.orb-textos.orb-ir-tras{animation:orb-tras .55s cubic-bezier(.25,1,.5,1)}
@keyframes orb-frente{from{opacity:0;transform:translateX(18px)}}@keyframes orb-tras{from{opacity:0;transform:translateX(-18px)}}
.orb-conta{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.06em}.orb-conta i{font-style:normal;opacity:.5}

/* Menu da skin dentro da barra */
body.nav-orbita .orb .menu{position:relative;inset:auto;z-index:auto;width:auto;height:auto;padding:0;background:none}
body.nav-orbita .orb .menu-toggle{min-height:48px;height:48px;padding:0 18px 0 15px;gap:9px;border-radius:999px;border:1px solid #ffffff3d;background:#ffffff10;
  font-size:14px;font-weight:700;letter-spacing:.04em;transition:background .3s,border-color .3s,color .3s}
body.nav-orbita .orb .menu-toggle:hover,body.nav-orbita .orb .menu-toggle[aria-expanded="true"]{background:var(--ouro);border-color:var(--ouro);color:var(--verde)}
body.nav-orbita .orb .menu-panel{position:absolute;top:auto;bottom:calc(100% + 20px);left:50%;transform:translateX(-50%);width:min(280px,calc(100vw - 24px));
  max-height:min(60vh,calc(100dvh - 160px));padding:10px;border-radius:20px;border:1px solid #ffffff30;
  background:color-mix(in srgb,var(--verde) 60%,#0a0d0ecc);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 20px 60px #0009;animation:orb-subir .35s cubic-bezier(.25,1,.5,1)}
body.nav-orbita .orb .menu-heading{color:var(--orb-acento)}

/* Controles: bandeja que sobe da barra */
.orb-ctrl{position:relative}
.orb-mais{position:relative;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffff3d;background:#ffffff10;cursor:pointer;transition:background .3s,border-color .3s,color .3s}
.orb-mais:hover,.orb-mais[aria-expanded="true"]{background:var(--ouro);border-color:var(--ouro);color:var(--verde)}
.orb-mais .orb-linhas{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.orb-bolinha{position:absolute;width:6px;height:6px;border-radius:50%;border:2px solid currentColor;transition:transform .4s cubic-bezier(.25,1,.5,1)}
.orb-bolinha.a{left:calc(50% + 2px);top:calc(50% - 8px)}.orb-bolinha.b{left:calc(50% - 7px);top:calc(50% + 2px)}
.orb-mais[aria-expanded="true"] .orb-bolinha.a{transform:translateX(-9px)}.orb-mais[aria-expanded="true"] .orb-bolinha.b{transform:translateX(9px)}
.orb-mais span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.orb-bandeja{position:absolute;right:-8px;bottom:calc(100% + 20px);display:flex;align-items:center;gap:8px;padding:8px;border-radius:999px;border:1px solid #ffffff30;
  background:color-mix(in srgb,var(--verde) 60%,#0a0d0ecc);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 20px 60px #0009;animation:orb-subir .35s cubic-bezier(.25,1,.5,1)}
@keyframes orb-subir{from{opacity:0;transform:translateY(12px) scale(.96)}}
body.nav-orbita .orb-bandeja .tools{display:flex;gap:8px}
body.nav-orbita .orb-bandeja .tool{width:44px;height:44px;border-color:#ffffff3d;background:#ffffff10;animation:orb-item .4s cubic-bezier(.25,1,.5,1) both}
body.nav-orbita .orb-bandeja .tool:nth-child(2){animation-delay:.04s}body.nav-orbita .orb-bandeja .tool:nth-child(3){animation-delay:.08s}
body.nav-orbita .orb-bandeja .tool:nth-child(4){animation-delay:.12s}body.nav-orbita .orb-bandeja .tool:nth-child(5){animation-delay:.16s}
@keyframes orb-item{from{opacity:0;transform:translateY(10px)}}
body.nav-orbita .orb-bandeja .tool:hover,body.nav-orbita .orb-bandeja .tool[aria-pressed="true"]{background:var(--ouro);border-color:var(--ouro);color:var(--verde)}
body.nav-orbita .orb-bandeja .zoom-controls{position:static;transform:none;display:flex;gap:4px;padding:0 0 0 8px;margin:0;border:0;border-left:1px solid #ffffff26;border-radius:0;background:none;box-shadow:none}
body.nav-orbita .orb-bandeja .zoom-controls[hidden]{display:none}
body.nav-orbita .orb-bandeja .zoom-controls button{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff3d;background:#ffffff10}

/* Prévia da cena vizinha */
.orb-previa{position:absolute;left:var(--x,50%);bottom:calc(100% + 16px);width:220px;padding:6px;border-radius:18px;border:1px solid #ffffff30;pointer-events:none;
  background:color-mix(in srgb,var(--verde) 60%,#0a0d0ecc);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 20px 60px #0009;
  opacity:0;transform:translateX(-50%) translateY(10px) scale(.95);transition:opacity .25s,transform .35s cubic-bezier(.25,1,.5,1)}
.orb-previa.visivel{opacity:1;transform:translateX(-50%)}
.orb-previa img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:13px}
.orb-previa span{display:flex;flex-direction:column;padding:8px 8px 4px}
.orb-previa small{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orb-acento)}
.orb-previa strong{font-family:var(--fonte-titulo),var(--fonte),serif;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Faixa de todos os espaços (abre pela cápsula) */
.orb-faixa{position:absolute;left:50%;bottom:calc(100% + 18px);transform:translateX(-50%);width:min(940px,calc(100vw - 24px));padding:14px 14px 10px;border-radius:24px;border:1px solid #ffffff30;
  background:color-mix(in srgb,var(--verde) 60%,#0a0d0ed9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 24px 70px #000a;animation:orb-subir .4s cubic-bezier(.25,1,.5,1)}
.orb-faixa-topo{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px 10px}
.orb-faixa-topo b{font-family:var(--fonte-titulo),var(--fonte),serif;font-size:17px}.orb-faixa-topo span{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--orb-acento)}
.orb-faixa ol{list-style:none;margin:0;padding:2px 2px 8px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--ouro) transparent}
.orb-faixa li{flex:none;scroll-snap-align:start}
.orb-faixa li button{position:relative;width:170px;height:112px;padding:0;overflow:hidden;border-radius:14px;border:2px solid #ffffff26;background:#0d1112;cursor:pointer;
  transition:border-color .3s,transform .3s}
.orb-faixa li button:hover{transform:translateY(-3px);border-color:#ffffff80}
.orb-faixa li button[aria-current="true"]{border-color:var(--ouro);box-shadow:0 0 0 3px color-mix(in srgb,var(--ouro) 35%,transparent)}
.orb-faixa li img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.orb-faixa li button:hover img{transform:scale(1.06)}
.orb-faixa li span{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;padding:22px 10px 8px;text-align:left;background:linear-gradient(transparent,#000c)}
.orb-faixa li i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--orb-acento)}
.orb-faixa li b{font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orb-faixa li small{font-size:10px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:720px){
  body.nav-orbita{--menu-h:84px}
  .orb{left:10px;right:10px;transform:none;width:auto;max-width:none;bottom:max(10px,env(safe-area-inset-bottom))}
  .orb-dock{gap:6px;padding:6px}
  .orb-grupo{gap:6px;min-width:0}.orb-grupo:first-child{flex:1}
  .orb-extras{padding-left:6px;gap:6px}
  .orb-seta,.orb-mais,body.nav-orbita .orb .menu-toggle{width:44px;height:44px;min-height:44px}
  body.nav-orbita .orb .menu-toggle{padding:0;justify-content:center}body.nav-orbita .orb .menu-toggle span{display:none}
  .orb-capsula{flex:1;min-width:0;height:46px;gap:8px;padding:3px 10px 3px 3px}
  .orb-anel{width:40px;height:40px}
  .orb-textos{min-width:0;max-width:none}.orb-textos strong{font-size:14px}
  .orb-conta{display:none}
  body.nav-orbita .orb .menu-panel{left:auto;right:-60px;transform:none}
  .orb-bandeja{right:-6px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 20px);border-radius:24px}
  .orb-faixa{left:0;right:0;transform:none;width:auto}
  .orb-faixa li button{width:140px;height:96px}
  .orb-previa{display:none}
}
@media(max-width:380px){.orb-textos small{display:none}}
@media(prefers-reduced-motion:reduce){
  .orb-dock,.orb-faixa,.orb-bandeja,body.nav-orbita .orb .menu-panel,body.nav-orbita .orb-bandeja .tool,.orb-textos{animation:none!important}
  .orb-anel,.orb-previa,.orb-seta svg,.orb-bolinha,.orb-faixa li img{transition:none!important}
}