/* Adiciona suporte para o modo escuro do Tailwind */
:root {
  --shadow-glow: 0 10px 40px -10px rgba(208, 26, 47, 0.4);
}

.dark {
  --shadow-glow: 0 10px 40px -10px rgba(208, 26, 47, 0.5);
}

/* Padrão de grid para o fundo da seção Hero */
.bg-grid-pattern {
  background-image: linear-gradient(
      to right,
      rgba(128, 128, 128, 0.1) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(128, 128, 128, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Adiciona transição suave para a troca de tema */
*,
*::before,
*::after {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
/* Animações */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Atrasos de animação */
.animation-delay-200 {
  animation-delay: 0.2s;
  animation-fill-mode: backwards;
}

.animation-delay-400 {
  animation-delay: 0.4s;
  animation-fill-mode: backwards;
}

/* Estilos de botões customizados */

.hero-button {
  background-color: #d01a2f; /* Vermelho Primário Acessível */
  color: #fff; /* text-white */
  font-weight: 700; /* font-bold */
  border-radius: 0.5rem; /* rounded-lg */
  transition-property: all; /* transition-all */
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* transition-all */
  transition-duration: 300ms; /* duration-300 */
  box-shadow: var(--shadow-glow);
}
.hero-button:hover {
  background-color: #b81529; /* Tom mais escuro do vermelho para hover */
  transform: scale(1.05); /* hover:scale-105 */
}

.cta-button {
  background-color: #ffd60a; /* Amarelo */
  color: #111827; /* text-gray-900 */
  font-weight: 700; /* font-bold */
  border-radius: 0.5rem; /* rounded-lg */
  transition-property: all; /* transition-all */
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* transition-all */
  transition-duration: 300ms; /* duration-300 */
}
.cta-button:hover {
  transform: scale(1.05); /* hover:scale-105 */
  background-color: #e6c109; /* Tom mais escuro do amarelo */
}

.service-card {
  transition-property: all; /* transition-all */
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* transition-all */
  transition-duration: 300ms; /* duration-300 */
}
.service-card:hover {
  transform: scale(1.05); /* hover:scale-105 */
  border-color: rgba(
    208,
    26,
    47,
    0.5
  ); /* hover:border-red-500/50 (novo vermelho) */
}

.active {
  border-bottom: 2px solid #ffd60a; /* Amarelo padrão */
}