/* topo.css: a barra branca fixa no alto de toda página: a marca à esquerda (o pontinho dourado e o nome em marinho),
   o menu em linha à direita, a lupa e, no telefone, os três tracinhos que abrem o menu numa janela.
   Depende de: base.css (que empurra o body pra baixo da barra com --altura-topo). Telefone nas regras soltas,
   computador no @media do fim. */

.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: var(--altura-topo);
  background: var(--branco);
  box-shadow: 0 1px 0 var(--linha), 0 6px 20px rgba(11, 31, 58, .06);
}

.topo__dentro { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; }

/* ------------------------------------------------------------ a marca */

.marca {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--marinho); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
}
.marca::before {
  content: ""; width: 14px; height: 14px; border: 3px solid var(--marinho); border-radius: 50%; background: var(--dourado); flex: none;
}

/* ------------------------------------------------------------ o menu */

.topo__nav { display: flex; align-items: center; gap: 4px; }

.topo__links { display: none; }

.topo__links a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px;
  color: var(--marinho); font-size: 15px; font-weight: 500; text-decoration: none;
}
.topo__links a:hover { background: var(--gelo); }
.topo__links a[aria-current="page"] { border-radius: 0; box-shadow: inset 0 -2px 0 var(--dourado); font-weight: 600; }

.topo__icone {
  display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: none; color: var(--marinho);
}
.topo__icone:hover { background: var(--gelo); }
.topo__icone svg { width: 22px; height: 22px; }

/* o menu do telefone, dentro do modal */
.menu-telefone { display: grid; gap: 4px; }
.menu-telefone a {
  display: block; padding: 12px 14px; border-radius: var(--raio-pequeno);
  color: var(--marinho); font-size: 19px; font-weight: 600; text-decoration: none;
}
.menu-telefone a:hover { background: var(--gelo); }

@media (min-width: 900px) {
  .marca { font-size: 20px; }
  .topo__links { display: flex; gap: 6px; }
  .topo__menu { display: none; }
}