.slogan-container {
  height: 100vh; 
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}
.slogan-principal {
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.2;
  margin-top: 50px;
  text-align: center;


  background: linear-gradient(90deg, #b0dffa, #d0effa, #eee3f5);
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;


  opacity: 0;
  transform: translateY(30px);


  animation:
    fadeUp 6s ease forwards,
    gradient-move 2.5s ease forwards,
    fix-color 0.1s ease forwards 3s;
}


@media (max-width: 768px) {
  .slogan-principal {
    margin-top: 20px;
    padding: 0 10px;
    opacity: 0;
    transform: translateY(20px);

    animation:
      fadeUp 6s ease forwards,
      gradient-move 2.5s ease forwards,
      fix-color 0.1s ease forwards 3s;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gradient-move {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

@keyframes fix-color {
  from {
    background: none;
    -webkit-text-fill-color: #a0f5f8;
  }
  to {
    background: none;
    -webkit-text-fill-color: #d0e1f3;
  }
}