/* Barra do topo, a mesma em todas as páginas do Magic Hub: as da landing (crmo.css)
   e a /conta (site.css). Por isso não depende das variáveis de nenhum dos dois e
   as classes começam com "topo-". Creme navega; laranja só no botão de comprar.
   Três colunas: a marca à esquerda, as páginas numa pílula no centro, e à direita,
   separadas da pílula, a conta e o comprar. */
.topo{position:sticky;top:0;z-index:60;width:100%;
  background:rgba(21,21,23,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(253,247,233,.12)}
.topo-in{max-width:1180px;margin:0 auto;padding:0 20px;min-height:72px;
  display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"marca nav direita";align-items:center;gap:18px}
.topo-marca{grid-area:marca;justify-self:start;display:flex;align-items:center;gap:10px;color:#FDF7E9;text-decoration:none;
  font-family:"Host Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:700;
  font-size:19px;letter-spacing:.02em;text-transform:none;white-space:nowrap}
.topo-marca i{width:30px;height:30px;border-radius:30%;background:#6761FF;color:#FDF7E9;
  display:grid;place-items:center;flex:none}
.topo-marca svg{width:60%;height:60%}

/* a pílula das páginas: vidro escuro com a borda acesa só no topo */
.topo-links{grid-area:nav;justify-self:center;display:flex;gap:2px;padding:5px;border-radius:999px;
  border:1px solid rgba(253,247,233,.12);
  background:linear-gradient(180deg,rgba(253,247,233,.06),rgba(253,247,233,.02));
  box-shadow:inset 0 1px 0 rgba(253,247,233,.08),0 10px 30px -18px rgba(0,0,0,.9)}
.topo-links a{padding:9px 20px;border-radius:999px;color:#A6A1B5;text-decoration:none;
  font:500 14.5px "Host Grotesk",system-ui,sans-serif;white-space:nowrap;transition:color .15s ease,background .15s ease}
.topo-links a:hover{color:#FDF7E9}
.topo-links a[aria-current="page"]{color:#FDF7E9;font-weight:600;background:rgba(253,247,233,.1);
  box-shadow:inset 0 1px 0 rgba(253,247,233,.1)}

.topo-direita{grid-area:direita;justify-self:end;display:flex;align-items:center;gap:10px}
/* a conta, fora da pílula: "Entrar" sem login, foto + primeiro nome com login (sessao.js) */
.topo-conta{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;
  color:#FDF7E9;text-decoration:none;white-space:nowrap;font:500 14px "Host Grotesk",system-ui,sans-serif;
  border:1px solid rgba(253,247,233,.22);background:rgba(253,247,233,.04);transition:border-color .15s ease,background .15s ease}
.topo-conta:hover,.topo-conta[aria-current="page"]{border-color:rgba(253,247,233,.45);background:rgba(253,247,233,.08)}
.topo-conta.logado{padding:0 14px 0 4px}
.topo-conta span{max-width:12ch;overflow:hidden;text-overflow:ellipsis}
.topo-comprar{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;
  font:700 11.5px "Host Grotesk",system-ui,sans-serif;letter-spacing:.01em;text-transform:none;
  color:#FFE0CD;text-decoration:none;white-space:nowrap;border:1px solid rgba(255,99,22,.5);
  background:linear-gradient(180deg,rgba(253,247,233,.06),rgba(255,99,22,.16) 42%,rgba(255,99,22,.55));
  box-shadow:inset 0 1px 0 rgba(253,247,233,.2)}
.topo-comprar:hover{border-color:rgba(255,99,22,.8)}
/* quem já tem acesso: o mesmo lugar vira o selo do acesso, em indigo (o degrau premium), sem laranja */
.topo-comprar.topo-acesso{gap:5px;color:#FDF7E9;border-color:rgba(143,138,255,.55);
  background:linear-gradient(180deg,rgba(253,247,233,.06),rgba(103,97,255,.18) 42%,rgba(103,97,255,.5))}
.topo-comprar.topo-acesso:hover{border-color:rgba(143,138,255,.9)}
.topo-acesso svg{width:13px;height:13px;flex:none;margin-right:2px;color:#D0FE60}

/* /conta: o site.css centraliza o body em grade; com a barra, o body volta a ser bloco
   e o cartão de login desce para baixo dela */
body.com-topo{display:block;padding:0}
body.com-topo > main{margin:56px auto 72px;padding:0 16px}

.avatar{width:30px;height:30px;border-radius:50%;flex:none;display:inline-grid;place-items:center;object-fit:cover;
  background:#6761FF;color:#FDF7E9;font:600 13px "Host Grotesk",system-ui,sans-serif}
.avatar.grande{width:64px;height:64px;font-size:26px}

/* tela média: a pílula aperta um pouco antes de quebrar */
@media(max-width:980px){
  .topo-links a{padding:8px 14px;font-size:14px}
  .topo-conta span{max-width:8ch}
}
/* celular: marca e a direita em cima, a pílula inteira na linha de baixo */
@media(max-width:760px){
  .topo-in{grid-template-columns:auto 1fr;grid-template-areas:"marca direita" "nav nav";padding:10px 16px;gap:10px 12px}
  .topo-links{justify-self:stretch;justify-content:space-between}
  .topo-links a{flex:1;text-align:center;padding:8px 10px;font-size:13.5px}
  .topo-direita{gap:8px}
  .topo-conta,.topo-comprar{height:36px}
  .topo-conta{padding:0 12px}
  .topo-conta.logado{padding:0 10px 0 3px}
  .topo-conta .avatar{width:28px;height:28px;font-size:12px}
  .topo-comprar{padding:0 14px}
}
@media(max-width:480px){.topo-acesso-1{display:none}}
@media(max-width:380px){.topo-conta span:not(.avatar){display:none}.topo-conta.logado{padding:0 3px}}

/* "Pular para o conteúdo": invisível até alguém chegar nele pelo Tab */
.pular{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:999px;
  background:#FDF7E9;color:#1C1C1C;font:600 14px "Host Grotesk",system-ui,sans-serif;text-decoration:none;transition:top .15s ease}
.pular:focus{top:12px}