/* Menu da KUBO: passar o mouse no logo abre o painel com todas as páginas do site.
   A barra do topo fica com poucos links; página nova entra aqui (menu.js), não na barra.
   Referência visual: visitors.now (painel escuro que nasce da barra, cartões tingidos). */
.barra .logo .seta{width:10px;height:10px;margin-left:-2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:transform .2s}
.barra.menu-aberto .logo .seta{transform:rotate(180deg)}
.painel{position:fixed;top:24px;left:50%;z-index:2;width:min(var(--largura,760px),calc(100vw - 24px));
  background:var(--grafite);border-radius:30px;padding:76px 14px 14px;
  box-shadow:0 24px 60px rgba(20,18,24,.35);
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-6px) scale(.98);transform-origin:top center;
  transition:opacity .18s ease-out,transform .18s ease-out,visibility 0s linear .18s}
.painel.aberto{opacity:1;visibility:visible;transform:translateX(-50%);transition:opacity .18s ease-out,transform .18s ease-out}
/* colunas = número de páginas (até 3); o painel acompanha a largura da barra */
.painel-grade{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:10px}
.painel-grade a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 14px 20px;border-radius:18px;
  background:color-mix(in srgb,var(--c) 13%,#1C1922);text-decoration:none;transition:background .2s,transform .2s}
.painel-grade a:hover,.painel-grade a:focus-visible{background:color-mix(in srgb,var(--c) 24%,#1C1922);transform:translateY(-1px)}
.painel-grade .ic{display:grid;place-items:center;width:46px;height:42px;border-radius:12px;background:var(--c);margin-bottom:8px}
.painel-grade .ic svg{width:26px;height:26px}
.painel-grade .ic rect{fill:rgba(20,18,24,.22)}
.painel-grade .ic rect.on{fill:#141218}
.painel-grade b{font-size:16px;font-weight:500;color:var(--nevoa)}
.painel-grade span{text-wrap:balance;font-size:13px;line-height:1.4;color:var(--lilas)}
/* página em que a pessoa está: contorno na cor do cartão */
.painel-grade a[aria-current]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 70%,transparent)}
/* véu claro atrás do painel: o texto da página não aparece solto dos lados */
.veu{position:fixed;inset:0;z-index:1;background:rgba(236,232,244,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .18s,visibility 0s linear .18s}
.veu.aberto{opacity:1;visibility:visible;transition:opacity .18s}
.painel-pe{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 10px 4px;font-size:14px}
.painel-pe a{color:var(--lilas);text-decoration:none} .painel-pe a:hover{color:#fff}
.painel-pe .zap{color:#fff;background:#7A4BE3;border-radius:999px;padding:8px 16px}
.painel-pe .zap:hover{background:#6A3FD0}
@media (max-width:760px){
  .painel{top:8px;width:calc(100vw - 16px);padding-top:68px;border-radius:24px}
  /* celular: uma página ocupa a linha toda; duas ou mais, duas colunas */
  .painel-grade{grid-template-columns:repeat(min(var(--n,2),2),1fr);gap:8px}
  .painel-grade a{padding:16px 10px}
}
@media (prefers-reduced-motion:reduce){ .painel,.painel.aberto,.painel-grade a,.veu{transition:none} }
/* camadas: página < véu < painel < barra (o título da home tem z-index 2) */
header.barra{z-index:4}
.painel{z-index:3}
.veu{z-index:2}
/* Cartão em linha: ícone à esquerda, nome e descrição ao lado. Serve para 1, 2 ou 3 páginas
   sem sobrar espaço vazio no meio do cartão. */
.painel-grade a{flex-direction:row;align-items:center;text-align:left;gap:16px;padding:16px 18px}
.painel-grade .ic{margin-bottom:0;flex:none}
.painel-grade a > b{display:block}
.painel-grade .txt{display:flex;flex-direction:column;gap:3px}