/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* BODY CENTRALIZADO PERFEITO */
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  font-family: 'Poppins', sans-serif;
  text-align: center;

  /* Fundo estilo Apple */
  background: linear-gradient(-45deg, #eef5f4, #dfeeed, #ffffff, #e6f3f2);
  background-size: 400% 400%;
  animation: bgFlow 12s ease infinite;
}

/* Animação fundo */
@keyframes bgFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* CONTAINER CENTRAL */
.container {
  display: flex;
  flex-direction: column;
  align-items: center; /* GARANTE CENTRALIZAÇÃO */
  justify-content: center;
  gap: 20px;
}

/* LOGO */
.logo {
  width: 240px;
  max-width: 90%;

  animation: logoEntrada 1.2s ease forwards;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

@keyframes logoEntrada {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* SLOGAN (SEM CORTAR LETRA + ANIMAÇÃO PREMIUM) */
.slogan {
  font-family: 'Great Vibes', cursive;
  font-size: 34px;
  color: #0c3554;

  padding-right: 5px; /* evita cortar o "e" final */

  opacity: 0;
  animation: fadeUp 1s ease forwards, brilho 3s ease-in-out infinite;
  animation-delay: 0.4s;
}

/* brilho elegante */
@keyframes brilho {
  0%, 100% {
    text-shadow: 0 0 0px rgba(58,163,160,0);
  }
  50% {
    text-shadow: 0 0 12px rgba(58,163,160,0.4);
  }
}

/* REDES */
.social {
  display: flex;
  justify-content: center;
  gap: 30px;

  opacity: 0;
  animation: fadeUp 1s ease forwards;
  animation-delay: 0.7s;
}

/* ÍCONES */
.social a {
  font-size: 28px;
  color: #0c3554;

  transition: all 0.3s ease;
}

/* HOVER INSANO */
.social a:hover {
  transform: translateY(-5px) scale(1.2);
  color: #3aa3a0;
}

/* ANIMAÇÃO PADRÃO */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* RESPONSIVO */
@media (max-width: 480px) {
  .logo {
    width: 180px;
  }

  .slogan {
    font-size: 26px;
  }

  .social a {
    font-size: 24px;
  }
}