/*Faixa rotativa de mensagens no topo*/

.faixa-rotativa {

  background-color: #000000;
  color: red;
  padding: 10px 0;
  font-size: 12px;
  height: 35px;
  overflow: hidden;
  z-index: 1000;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
}
.conteudo-rotativo {
  display: flex;
  gap: 100%;
  animation: deslizar 24s linear infinite;
  /* justify-content: space-between; */
  width: 100%;
}
.conteudo-rotativo span {
  white-space: nowrap;
  font-size: 12px;
  color: white;
}

/* Animação para fazer as mensagens deslizarem continuamente */

@keyframes deslizar {
  from {
    transform: translateX(100%);
    /* Começa fora da tela à direita */
  }
  to {
    transform: translateX(-100%);
    /* Sai pela esquerda */
  }
}
body {
  padding-top: 30px;
}