/* Hub · Imersão Colete — barra de abas fixa no topo de todas as páginas (spec §10.5). Skin padrão = Colete (preto/off-white/vermelho, vars do tokens.css). Em páginas NEXYO, troca por cores neutras literais (sem HEX Colete nem NEXYO) e herda a fonte da página. O DOM da barra é montado por hub.js; as páginas só carregam este CSS + o script. --hub-h é a altura da barra: cada página desloca suas faixas/navs fixas por ela. */ :root{--hub-h:44px} .hub{position:fixed;top:0;left:0;right:0;height:var(--hub-h);z-index:200;display:flex;align-items:center;gap:18px;padding:0 clamp(14px,3vw,40px); background:var(--hub-bg,#1A1A1A);color:var(--hub-fg,#F9F5F5);border-bottom:1px solid var(--hub-hair,rgba(249,245,245,.14)); font-size:12px;line-height:1;font-weight:500;letter-spacing:.06em;-webkit-font-smoothing:antialiased} html:not([data-skin="neutro"]) .hub{font-family:var(--grotesk)} .hub__brand{flex:none;display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:inherit;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:11px;white-space:nowrap} .hub__brand::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--hub-acc,#FF4040);flex:none} .hub__brand span{opacity:.55;font-weight:500;letter-spacing:.06em;text-transform:none} @media(max-width:640px){.hub__brand span{display:none}} .hub__nav{position:relative;flex:1;min-width:0;display:flex;align-items:center;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none} .hub__nav::-webkit-scrollbar{display:none} .hub__tabs{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none;height:100%;position:relative} .hub__tab{display:inline-flex;align-items:center;height:100%;padding:0 12px;color:var(--hub-mut,rgba(249,245,245,.62));text-decoration:none;white-space:nowrap;transition:color .3s var(--ease,ease)} .hub__tab:hover{color:var(--hub-fg,#F9F5F5)} .hub__tab[aria-current="page"]{color:var(--hub-fg,#F9F5F5);font-weight:700} .hub__tab:focus-visible{outline:2px solid var(--hub-acc,#FF4040);outline-offset:-4px} .hub__ind{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--hub-acc,#FF4040);transform:translateX(0); transition:transform .45s var(--ease,cubic-bezier(.22,1,.36,1)),width .45s var(--ease,cubic-bezier(.22,1,.36,1)),opacity .3s;opacity:0} .hub__ind.on{opacity:1} .hub__tag{flex:none;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hub-mut,rgba(249,245,245,.62));white-space:nowrap} @media(max-width:900px){.hub__tag{display:none}} /* skin neutra (proposta/briefing NEXYO): sem vermelho, sem roxo; herda DM Sans da página */ html[data-skin="neutro"] .hub{--hub-bg:#111111;--hub-fg:#f4efe7;--hub-hair:rgba(244,239,231,.12);--hub-mut:rgba(244,239,231,.6);--hub-acc:#e8e8e8} /* export de frames da animação (?t= → html.paused): sem barra */ html.paused .hub{display:none} @media(prefers-reduced-motion:reduce){.hub__ind,.hub__tab{transition:none}}