/* Protake 360° — marca (logo + 360°), menu lateral e botões de ícone. Usado no painel e no totem. */

/* marca: logo da Protake | 360° */
.marca360{display:inline-flex;align-items:center;gap:.55em;font-size:22px;line-height:1;white-space:nowrap}
.marca360 img{display:block;height:1.05em;width:auto}
.marca360-fio{width:1px;height:1.25em;background:rgba(255,255,255,.35)}
.marca360 b{font:900 1.12em/1 Roboto,system-ui,sans-serif;letter-spacing:-.03em;color:#fff}
.marca360 b i{font-style:normal;color:var(--destaque,#F03D27);margin-left:.02em}
.marca-link{display:inline-flex;text-decoration:none}

/* botões redondos só com ícone */
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.menu-abrir,.botao-ic{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.16);
  background:rgba(11,22,38,.55);color:#fff;cursor:pointer;text-decoration:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background-color .2s,border-color .2s,opacity .2s}
.menu-abrir:hover,.botao-ic:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}

/* barra lateral */
.menu-fundo{position:fixed;inset:0;z-index:200;background:rgba(5,10,18,.55);backdrop-filter:blur(2px);opacity:0;transition:opacity .25s}
.menu-fundo.aberto{opacity:1}
.menu-lateral{position:fixed;top:0;left:0;bottom:0;z-index:201;width:min(320px,86vw);display:flex;flex-direction:column;padding:22px 18px 18px;
  background:#0F1D31;border-right:1px solid rgba(255,255,255,.1);box-shadow:30px 0 80px -30px rgba(0,0,0,.8);
  transform:translateX(-102%);transition:transform .3s cubic-bezier(.2,.7,.2,1);overflow-y:auto;font-family:Roboto,system-ui,sans-serif}
.menu-lateral.aberto{transform:none}
.menu-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.menu-cab .marca360{font-size:20px}
.menu-fechar{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:#A7B3C4;cursor:pointer}
.menu-fechar:hover{background:rgba(255,255,255,.07);color:#fff}
.menu-quem{display:flex;flex-direction:column;gap:2px;padding:18px 6px 14px}
.menu-quem b{color:#fff;font-size:15px}
.menu-quem span{color:#A7B3C4;font-size:13px}
.menu-itens{display:flex;flex-direction:column;gap:2px}
.menu-itens a,.menu-sair button{display:flex;align-items:center;gap:14px;width:100%;padding:12px 12px;border:0;border-radius:10px;background:none;
  color:#E9EEF5;font:500 15px Roboto,sans-serif;text-decoration:none;cursor:pointer;text-align:left}
.menu-itens a:hover,.menu-sair button:hover{background:rgba(255,255,255,.06)}
.menu-itens a[aria-current]{background:rgba(240,61,39,.14);color:#fff}
.menu-itens a[aria-current] .ic{color:#F03D27}
.menu-itens .ic,.menu-sair .ic{color:#A7B3C4}
.menu-sair{margin:auto 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.menu-site{display:block;padding:12px 12px 0;color:#A7B3C4;font-size:12px;letter-spacing:.08em;text-decoration:none}
.menu-site:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.menu-lateral,.menu-fundo{transition:none}}