@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.animate-fadein {
  animation: fadein 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Efeito de brilho para cards */
.hover\:shadow-\[0_0_15px_rgba\(249\,115\,22\,0\.5\)\]:hover {
  box-shadow: 0 0 15px rgba(249, 115, 22, 0.5);
}

/* Correção robusta para sobreposição de texto */
.hero-title {
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
  word-spacing: normal !important;
  margin-bottom: 2rem !important;
}

.hero-subtitle {
  line-height: 1.8 !important;
  letter-spacing: 0.02em !important;
  word-spacing: 0.02em !important;
  margin-bottom: 2rem !important;
  font-weight: 400 !important;
}

/* Mobile First - Melhor legibilidade em telas pequenas */
@media (max-width: 640px) {
  .hero-title {
    line-height: 1.5 !important;
    letter-spacing: 0.02em !important;
    word-spacing: 0.03em !important;
    margin-bottom: 1.5rem !important;
  }
  
  .hero-subtitle {
    line-height: 2 !important;
    letter-spacing: 0.03em !important;
    word-spacing: 0.04em !important;
    font-weight: 300 !important;
    margin-bottom: 1.5rem !important;
  }
}

/* Telas médias */
@media (min-width: 641px) and (max-width: 1024px) {
  .hero-title {
    line-height: 1.45 !important;
    letter-spacing: 0.015em !important;
  }
  
  .hero-subtitle {
    line-height: 1.85 !important;
    letter-spacing: 0.025em !important;
  }
}

/* Telas grandes */
@media (min-width: 1025px) {
  .hero-title {
    line-height: 1.4 !important;
    letter-spacing: 0.01em !important;
  }
  
  .hero-subtitle {
    line-height: 1.8 !important;
    letter-spacing: 0.02em !important;
  }
}

/* Fix para espaçamento do container */
#hero .space-y-4 > * + * {
  margin-top: 1.5rem !important;
}

#hero .space-y-6 > * + * {
  margin-top: 2rem !important;
}

/* Aumentar largura da imagem do mockup */
#hero img {
  width: 450px !important;
  height: 450px !important;
  max-width: 90vw;
}

@media (max-width: 768px) {
  #hero img {
    width: 380px !important;
    height: 380px !important;
  }
}

@media (max-width: 480px) {
  #hero img {
    width: 320px !important;
    height: 320px !important;
  }
}