/* Navegação Matrix: abas expansíveis (topo), dock com ampliação (PC), barra inferior e cápsula (celular), gaveta de espaços.
   Cores e fontes da skin; --mx-acento clareia o destaque da marca para ler sobre o vidro escuro. */
body.nav-matrix{--menu-h:96px;--mx-acento:color-mix(in srgb,var(--ouro) 62%,#fff);--mx-vidro:color-mix(in srgb,var(--verde) 55%,#0a0d0eb8);--mx-borda:#ffffff2e}
body.nav-matrix #tourMenu,body.nav-matrix .drawer,body.nav-matrix .top .scene-title{display:none!important}
.nav-matrix svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nav-matrix .mx-abas button,.nav-matrix .mx-dock button,.nav-matrix .mx-barra button,.nav-matrix .mx-gaveta button,.nav-matrix .mx-capsula-cel button{font:inherit;color:#fff;cursor:pointer}
.nav-matrix .mx-abas button:focus-visible,.nav-matrix .mx-dock button:focus-visible,.nav-matrix .mx-barra button:focus-visible,.nav-matrix .mx-gaveta button:focus-visible,.nav-matrix .mx-capsula-cel button:focus-visible{outline:2px solid var(--mx-acento);outline-offset:3px}

/* ── abas expansíveis ── */
.mx-abas{position:relative;display:flex;align-items:center;gap:4px;padding:5px;margin:0 auto;border-radius:999px;border:1px solid var(--mx-borda);
  background:var(--mx-vidro);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 12px 34px #0006;max-width:calc(100vw - 420px);overflow:hidden}
.mx-abas[hidden]{display:none}
.mx-abas-indicador{position:absolute;left:0;top:5px;bottom:5px;border-radius:999px;background:var(--ouro);opacity:0;transition:transform .5s cubic-bezier(.25,1,.5,1),width .5s cubic-bezier(.25,1,.5,1),opacity .3s;pointer-events:none}
.mx-aba{position:relative;z-index:1;display:flex;align-items:center;gap:0;height:40px;padding:0 11px;border:0;border-radius:999px;background:none;white-space:nowrap;transition:gap .45s cubic-bezier(.25,1,.5,1),color .3s,background .3s}
.mx-aba svg{width:19px;height:19px;flex:none}
.mx-aba span{max-width:0;overflow:hidden;opacity:0;font-size:13px;font-weight:700;letter-spacing:.02em;transition:max-width .45s cubic-bezier(.25,1,.5,1),opacity .3s}
.mx-aba[aria-current="true"]{gap:8px;color:var(--verde)}.mx-aba[aria-current="true"] span{max-width:180px;opacity:1}
@media(hover:hover){.mx-aba:not([aria-current="true"]):hover{gap:8px;background:#ffffff14}.mx-aba:not([aria-current="true"]):hover span{max-width:180px;opacity:1}}

/* ── dock (PC) ── */
.mx-dock{position:fixed;z-index:16;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:flex-end;gap:8px;padding:8px 10px;border-radius:24px;
  border:1px solid var(--mx-borda);background:var(--mx-vidro);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:mx-sobe .8s cubic-bezier(.25,1,.5,1) both}
@keyframes mx-sobe{from{opacity:0;transform:translate(-50%,30px)}}
.mx-item{--zoom:1;position:relative;width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:14px;border:1px solid #ffffff30;background:#ffffff12;
  transform:scale(var(--zoom));transform-origin:bottom center;margin:0 calc((var(--zoom) - 1) * 18px);transition:transform .18s ease-out,margin .18s ease-out,background .3s,border-color .3s,color .3s}
.mx-item svg{width:21px;height:21px}
.mx-item:hover{background:var(--ouro);border-color:var(--ouro);color:var(--verde)!important}
.mx-dica{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);padding:5px 10px;border-radius:8px;background:#0d1112e6;color:#fff;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.mx-item:hover .mx-dica,.mx-item:focus-visible .mx-dica{opacity:1;transform:translateX(-50%)}
.mx-divisor{width:1px;align-self:stretch;margin:4px 2px;background:#ffffff2e}
.mx-capsula{display:flex;align-items:center;gap:10px;height:46px;padding:3px 14px 3px 3px;border-radius:14px;border:1px solid #ffffff24;background:#ffffff0d;text-align:left;transition:background .3s,border-color .3s}
.mx-capsula:hover{background:#ffffff1f;border-color:color-mix(in srgb,var(--ouro) 60%,transparent)}
.mx-capsula img{width:40px;height:40px;border-radius:11px;object-fit:cover}
.mx-capsula-texto{display:flex;flex-direction:column;min-width:140px;max-width:220px;overflow:hidden}
.mx-capsula-texto small{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mx-acento);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-capsula-texto strong{font-family:var(--fonte-titulo),var(--fonte),serif;font-weight:var(--peso-titulo,700);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-conta{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}.mx-conta i{font-style:normal;opacity:.5}
.mx-troca{animation:mx-troca .5s cubic-bezier(.25,1,.5,1)}
@keyframes mx-troca{from{opacity:0;transform:translateY(8px);filter:blur(4px)}}

/* ── gaveta ── */
.mx-gaveta{position:fixed;z-index:17;left:50%;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 78px);transform:translateX(-50%);width:min(980px,calc(100vw - 32px));max-height:min(62vh,640px);
  display:flex;flex-direction:column;padding:16px 16px 12px;border-radius:24px;border:1px solid var(--mx-borda);background:color-mix(in srgb,var(--verde) 62%,#0a0d0ee6);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 28px 80px #000a;color:#fff;animation:mx-gaveta-pc .45s cubic-bezier(.25,1,.5,1)}
.mx-gaveta[hidden]{display:none}
.mx-gaveta.saindo{animation:mx-gaveta-sai .26s ease-in forwards}
@keyframes mx-gaveta-pc{from{opacity:0;transform:translate(-50%,24px) scale(.97)}}
@keyframes mx-gaveta-sai{to{opacity:0;transform:translate(-50%,24px) scale(.97)}}
.mx-alca{display:none}
.mx-gaveta-topo{display:flex;align-items:center;gap:14px;padding:0 4px 12px}
.mx-gaveta-topo strong{font-family:var(--fonte-titulo),var(--fonte),serif;font-size:19px;font-weight:var(--peso-titulo,700)}
.mx-progresso{flex:1;display:flex;align-items:center;gap:10px;justify-content:flex-end;font-size:12px;opacity:.85}
.mx-progresso i{display:block;width:120px;height:4px;border-radius:4px;background:#ffffff26;overflow:hidden}
.mx-progresso em{display:block;height:100%;background:var(--mx-acento);transform-origin:left;transform:scaleX(0);transition:transform .6s cubic-bezier(.25,1,.5,1)}
.mx-progresso b{font-weight:600;white-space:nowrap}
.mx-fechar{margin-left:auto;width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffff30;background:#ffffff12}.mx-fechar svg{width:18px;height:18px}
.mx-fechar:hover{background:#ffffff26}
.mx-alca,.mx-gaveta-topo,.mx-chips{flex:none} /* na coluna da gaveta só a grade encolhe e rola */
.mx-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 4px 12px;scrollbar-width:none}.mx-chips::-webkit-scrollbar{display:none}
.mx-chip{flex:none;padding:8px 15px;border-radius:999px;border:1px solid #ffffff38;background:#ffffff0f;font-size:13px;font-weight:600;transition:background .3s,border-color .3s,color .3s}
.mx-chip[aria-selected="true"]{background:var(--ouro);border-color:var(--ouro);color:var(--verde)!important}
.mx-grade{list-style:none;margin:0;padding:2px 4px 6px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--mx-acento) transparent}
.mx-grade li{animation:mx-cartao .5s cubic-bezier(.25,1,.5,1) both;animation-delay:calc(min(var(--n),14) * 35ms)}
@keyframes mx-cartao{from{opacity:0;transform:translateY(18px)}}
.mx-cartao{position:relative;width:100%;aspect-ratio:3/2;padding:0;overflow:hidden;border-radius:14px;border:2px solid #ffffff24;background:#0d1112;transition:border-color .3s,transform .3s}
.mx-cartao:hover{transform:translateY(-3px);border-color:#ffffff80}
.mx-cartao[aria-current="true"]{border-color:var(--ouro);box-shadow:0 0 0 3px color-mix(in srgb,var(--ouro) 35%,transparent)}
.mx-cartao img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}.mx-cartao:hover img{transform:scale(1.06)}
.mx-cartao span{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;padding:20px 10px 8px;text-align:left;background:linear-gradient(transparent,#000c)}
.mx-cartao b{font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-cartao small{font-size:10px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-visto{position:absolute;z-index:1;top:7px;right:7px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--ouro);color:var(--verde);font-size:11px;font-style:normal;font-weight:800}
.mx-secoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;padding:2px 4px 6px}
.mx-secao{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px;border-radius:14px;border:1px solid #ffffff2e;background:#ffffff0d;text-align:left;font-size:14px;font-weight:600;transition:background .3s,border-color .3s}
.mx-secao svg{width:20px;height:20px;flex:none;color:var(--mx-acento)}
.mx-secao:hover{background:#ffffff1f;border-color:var(--mx-acento)}
.mx-controles{display:flex;flex-wrap:wrap;gap:10px;padding:4px}
.mx-controles .tools{display:flex;flex-wrap:wrap;gap:10px}
.mx-controles .zoom-controls{position:static;transform:none;display:flex;gap:6px;padding:0;border:0;background:none;box-shadow:none}
.mx-controles .zoom-controls[hidden]{display:none}
.mx-gaveta:not([data-modo="espacos"]) .mx-chips,.mx-gaveta:not([data-modo="espacos"]) .mx-grade,.mx-gaveta:not([data-modo="espacos"]) .mx-progresso,
.mx-gaveta:not([data-modo="secoes"]) .mx-secoes,.mx-gaveta:not([data-modo="mais"]) .mx-controles{display:none}

/* ── celular: cápsula e barra inferior ── */
.mx-barra,.mx-capsula-cel{display:none}
@media(max-width:760px){
  body.nav-matrix{--menu-h:142px}
  .mx-abas,.mx-dock,body.nav-matrix .top .tools,body.nav-matrix>.zoom-controls{display:none!important} /* no celular os controles ficam em Mais */
  .mx-barra{position:fixed;z-index:16;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:6px 6px max(6px,env(safe-area-inset-bottom));
    border-top:1px solid var(--mx-borda);background:var(--mx-vidro);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);animation:mx-barra .6s cubic-bezier(.25,1,.5,1) both}
  @keyframes mx-barra{from{transform:translateY(100%)}}
  .mx-barra-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;padding:6px 2px;border:0;border-radius:14px;background:none;font-size:11px!important;font-weight:600;transition:background .25s}
  .mx-barra-item svg{width:22px;height:22px}
  .mx-barra-item:active{background:#ffffff1f}
  .mx-capsula-cel{position:fixed;z-index:16;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:6px;padding:5px;border-radius:999px;
    border:1px solid var(--mx-borda);background:var(--mx-vidro);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 30px #0006}
  .mx-seta-cel{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffff30;background:#ffffff12}.mx-seta-cel svg{width:19px;height:19px}
  .mx-seta-cel:active{background:var(--ouro);color:var(--verde)!important}
  .mx-nome-cel{flex:1;min-width:0;display:flex;align-items:baseline;justify-content:center;gap:8px;border:0;background:none;padding:0 4px}
  .mx-nome-cel b{font-family:var(--fonte-titulo),var(--fonte),serif;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mx-nome-cel small{font-size:11px;opacity:.7;font-variant-numeric:tabular-nums}
  .mx-gaveta{left:0;right:0;bottom:0;transform:none;width:auto;max-height:82dvh;padding:6px 14px calc(12px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;z-index:18;
    animation:mx-gaveta-cel .4s cubic-bezier(.25,1,.5,1);transition:transform .3s cubic-bezier(.25,1,.5,1)}
  @keyframes mx-gaveta-cel{from{transform:translateY(100%)}}
  .mx-gaveta.saindo{animation:mx-gaveta-cel-sai .26s ease-in forwards}
  @keyframes mx-gaveta-cel-sai{to{transform:translateY(100%)}}
  .mx-alca{display:grid;place-items:center;height:26px;touch-action:none;cursor:grab}.mx-alca i{width:44px;height:5px;border-radius:5px;background:#ffffff59}
  .mx-gaveta-topo{flex-wrap:wrap}.mx-progresso{order:3;flex-basis:100%;justify-content:flex-start}.mx-progresso i{flex:1}
  .mx-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mx-secoes{grid-template-columns:1fr}
  .mx-gaveta-aberta .mx-capsula-cel{opacity:0;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){
  .mx-dock,.mx-barra,.mx-gaveta,.mx-gaveta.saindo,.mx-grade li,.mx-troca{animation:none!important}
  .mx-aba,.mx-aba span,.mx-abas-indicador,.mx-item,.mx-cartao,.mx-cartao img{transition:none!important}
}