/* Cabeçalho fixo e transparente, só com o logo. Altura de 56px, compensada no .hero e no .manifesto. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 56px;
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
  background: transparent;
}

/* Logo fiel ao oficial: cubo de aresta 16px (altura projetada 32px) e palavra SVG de 41×9px.
   Entre o cubo e a palavra há 16px visíveis; a margem do cubo compensa a projeção das faces. */
.logo {
  display: flex;
  align-items: center;
  height: 32px;
  color: var(--cinza-800);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Cubo: o externo tem a inclinação em X; o interno (.logo__giro) gira em Y. Aresta de 24.5px (cubo de 40px). */
.logo__cubo {
  position: relative;
  flex: none;
  width: 24.5px;
  height: 24.5px;
  /* 19px: a projeção do cubo passa ~5px da caixa; o vão visível fica em 14px */
  margin-right: 19px;
  transform-style: preserve-3d;
}

.logo__giro {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.logo__face {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* Faces visíveis: o SVG oficial da face é o fundo (fundo cinza, letra e acento já incluídos) */
.logo__face--topo { background-image: url('../img/logo/face-e.svg'); }
.logo__face--esquerda { background-image: url('../img/logo/face-a.svg'); }
.logo__face--direita { background-image: url('../img/logo/face-z.svg'); }

.logo__palavra {
  display: flex;
  transform-style: preserve-3d;
}

.logo__palavra svg {
  display: block;
  overflow: visible;
}

/* Após 140px de rolagem a palavra já se desfez e sai do fluxo, sem receber cliques */
.logo__palavra--ida {
  width: 0;
  pointer-events: none;
}