Adiciona regiões Top Bar e Navigation ao tema do microsite

- Top Bar: barra estreita acima do header para menu do usuário,
  fundo escuro com links claros alinhados à direita.
- Navigation: barra horizontal abaixo do header para menu da página,
  estilo baseado no nav-secondary do Olivero (hover com underline animado).
- Inclui menu.html.twig para gerar as classes .menu, .menu__item e
  .menu__link necessárias para o CSS funcionar (stable9 não as adiciona).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

themes/site_users_microsite_theme/css/microsite.css

@@ -154,6 +154,140 @@ body.microsite {
   margin-bottom: 1.5rem;
 }
 
+/* Top Bar ------------------------------------------------------------------ */
+/*
+ * Barra estreita no topo da página, antes do header.
+ * Destinada ao menu do usuário (login, conta, logout).
+ * Alinhada à direita, fundo escuro, texto claro.
+ */
+
+.microsite-top-bar {
+  background-color: hsl(201, 15%, 20%);
+  padding-inline: 1.5rem;
+}
+
+.microsite-top-bar .block-menu {
+  display: flex;
+  justify-content: flex-end;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.microsite-top-bar ul.menu {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.microsite-top-bar li.menu__item:not(:last-child) {
+  margin-inline-end: 18px;
+}
+
+.microsite-top-bar ul.menu ul.menu {
+  display: none;
+}
+
+.microsite-top-bar a.menu__link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding-block: 7px;
+  text-decoration: none;
+  color: hsl(201, 15%, 88%);
+}
+
+.microsite-top-bar a.menu__link:hover {
+  color: #fff;
+}
+
+.microsite-top-bar a.menu__link.is-active {
+  color: hsl(202, 79%, 70%);
+}
+
+/* Navigation --------------------------------------------------------------- */
+/*
+ * Estilo baseado no nav-secondary do Olivero.
+ * Variáveis Olivero traduzidas para valores fixos (o tema base é stable9):
+ *   --color--primary-50  → hsl(202, 79%, 50%)  ≈ #1a9fd4
+ *   --color--gray-5      → hsl(201, 15%,  5%)  ≈ #0b0e0f  (texto)
+ *   --sp                 → 18px
+ *   --sp0-5              →  9px
+ *   --sp2                → 36px
+ *   --font-size-s        → 14px
+ */
+
+.microsite-nav {
+  background-color: #fff;
+  border-bottom: 3px solid hsl(202, 79%, 50%);
+  padding-inline: 1.5rem;
+}
+
+/* Bloco de menu padrão dentro da região nav */
+.microsite-nav .block-menu {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+/* Lista principal: horizontal, sem marcadores */
+.microsite-nav ul.menu {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Itens: espaço entre eles */
+.microsite-nav li.menu__item:not(:last-child) {
+  margin-inline-end: 36px;
+}
+
+/* Subitens: não exibidos (menu plano) */
+.microsite-nav ul.menu ul.menu {
+  display: none;
+}
+
+/* Links */
+.microsite-nav a.menu__link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding-block: 12px;
+  text-decoration: none;
+  color: hsl(201, 15%, 5%);
+}
+
+/* Underline animado no hover (padrão Olivero) */
+.microsite-nav a.menu__link::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 0;
+  content: "";
+  transition: opacity 0.2s, transform 0.2s;
+  transform: translateY(5px);
+  opacity: 0;
+  border-top: solid 2px currentColor;
+}
+
+.microsite-nav a.menu__link:hover::after,
+.microsite-nav a.menu__link.is-active::after {
+  transform: translateY(0);
+  opacity: 0.8;
+}
+
+/* Link ativo: cor primária */
+.microsite-nav a.menu__link.is-active {
+  color: hsl(202, 79%, 50%);
+}
+
 /* Social Bar --------------------------------------------------------------- */
 /*
  * Mobile: barra horizontal compacta.