/* =====================================================================
   Cabeçalho — barra fixa, marca, navegação, botão sanduíche e menu suspenso.
   ===================================================================== */

.smn-topo {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px var(--gutter, 22px);
}

.smn-topo__barra {
  position: relative;
  max-width: var(--smn-container-nav);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  background: var(--smn-nav);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--smn-linha);
  border-radius: var(--smn-raio-card-g);
  box-shadow: var(--smn-sombra-nav);
}

.smn-topo__acoes {
  display: flex;
  align-items: center;
  gap: 14px;
}

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

.smn-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.smn-marca__logo {
  height: 55px;
  width: auto;
  display: block;
}

.smn-marca__selo {
  font: 500 9.5px var(--smn-fonte-mono);
  letter-spacing: var(--smn-trilha-selo);
  color: var(--smn-txt-tenue);
  border-left: 1px solid rgba(var(--smn-branco-rgb), .14);
  padding-left: 11px;
  line-height: 1.35;
}

/* --- navegação -------------------------------------------------------- */

.smn-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Indicador deslizante: app.js o posiciona sobre o item ativo a cada render. */
.smn-nav__indicador {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 10px;
  background: var(--smn-verde-veu-forte);
  opacity: 0;
  pointer-events: none;
}

/* --- botão sanduíche --------------------------------------------------- */

.smn-sanduiche {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  background: var(--smn-campo-fundo);
  border: 1px solid rgba(var(--smn-branco-rgb), .1);
  border-radius: var(--smn-raio-chip);
  cursor: pointer;
}

.smn-sanduiche__barra {
  display: block;
  height: 2px;
  background: var(--smn-txt);
  border-radius: 2px;
}

.smn-sanduiche__barra--destaque {
  background: var(--smn-verde);
}

/* --- menu suspenso ------------------------------------------------------ */

.smn-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  z-index: 60;
  padding: 16px;
  background: var(--smn-menu);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(var(--smn-branco-rgb), .1);
  border-radius: var(--smn-raio-card-g);
  box-shadow: var(--smn-sombra-menu);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform-origin: top center;
  animation: smnMenuIn .26s var(--smn-mov) both;
}

.smn-menu__item {
  text-align: left;
  font: 600 16px var(--smn-fonte-texto);
  color: var(--smn-txt);
  background: transparent;
  border: none;
  border-radius: var(--smn-raio-chip);
  padding: 14px 16px;
  cursor: pointer;
}

.smn-menu__idioma {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin-top: 6px;
  background: rgba(var(--smn-preto-rgb), .28);
  border-radius: var(--smn-raio-chip);
  border: 1px solid var(--smn-linha-fraca);
  align-self: flex-start;
}

.smn-idioma__sigla {
  font: 600 12px var(--smn-fonte-mono);
  letter-spacing: .05em;
}

.smn-idioma__sigla--menu {
  font-size: 13px;
}