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

.animate-fade-in {
  animation: fade-in 1s ease-out;
}

/* Custom container styles */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

/* Button hover effects */
button {
  transition: all 0.3s ease;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Card hover effects */
.bg-white.p-6.rounded-xl {
  transition: all 0.3s ease;
}

.bg-white.p-6.rounded-xl:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Icon colors */
[data-lucide="check"] {
  color: #10B981;
}

[data-lucide="shield"] {
  color: white;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* ======================================== */
/* Estilos Seção Conteúdo Programático     */
/* ======================================== */

.program-content {
  /* Background já definido via Tailwind (bg-gray-50) */
}

/* Estilos para os cards dos módulos */
.module-card-minimal {
  @apply bg-white rounded-2xl p-8 relative overflow-hidden shadow-sm;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.module-card-minimal:hover {
  @apply shadow-lg transform -translate-y-1;
}

.module-number-minimal {
  @apply absolute -top-4 -right-4 font-bold opacity-10 select-none;
  font-size: 120px;
  line-height: 1;
  color: #000000;
  z-index: 0;
}

.module-title-minimal {
  @apply text-xl font-semibold text-gray-800 mb-4 relative z-10;
}

.module-list-minimal {
  @apply space-y-3 relative z-10;
}

.module-list-minimal li {
  @apply flex items-start text-gray-600;
}

.module-check-icon {
  @apply w-5 h-5 text-blue-600 mr-3 flex-shrink-0 mt-1;
}

/* Animação Slide Up + Fade (Defina se não existir) */
@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up-fade {
    animation: slideUpFade 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
}

/* Animação Fade In (Defina se não existir) */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in {
  animation: fadeIn 1s ease-out backwards;
}

/* Delays (já definidos anteriormente, apenas garantir que existem) */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }

/* Estilo para Botão Primário (assumindo que já existe, exemplo abaixo) */
/*
.btn-primary {
   display: inline-block;
   background-color: theme('colors.blue.600');
   color: theme('colors.white');
   padding: 0.75rem 1.75rem; / py-3 px-7 /
   border-radius: 9999px; / rounded-full /
   font-weight: 600; / font-semibold /
   text-transform: uppercase;
   letter-spacing: 0.05em; / tracking-wider /
   transition: all 0.3s ease;
   border: 2px solid transparent;
}

.btn-primary:hover {
   background-color: theme('colors.blue.700');
   transform: translateY(-2px);
   box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4); / Sombra azul sutil /
}

.btn-large {
    padding: 1rem 2.5rem; / py-4 px-10 /
    font-size: 1rem; / text-base /
}
*/

/* Animação Pulse (já definida anteriormente) */
/* ... keyframes pulse ... */
/* .pulse { animation: pulse 2s infinite ease-in-out; } */

/* ======================================== */
/* Estilos Seção Como Funciona (Moderna)   */
/* ======================================== */

.how-it-works {
  /* Background definido via Tailwind (bg-white) */
}

/* Estilo do Pilar/Item */
.feature-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem; /* Ajuste conforme necessário */
}

/* Wrapper do Ícone */
.pillar-icon-wrapper {
  width: 5rem; /* w-20 */
  height: 5rem; /* h-20 */
  border-radius: 1.5rem; /* rounded-2xl ou 3xl - Menos que redondo */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem; /* mb-6 */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Transição suave */
}

.feature-pillar:hover .pillar-icon-wrapper {
  transform: scale(1.1) rotate(-8deg); /* Efeito levemente "divertido" no hover */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Sombra sutil no hover */
}

/* Ícone dentro do Wrapper */
.pillar-icon {
  width: 2.5rem; /* w-10 */
  height: 2.5rem; /* h-10 */
}

/* Título do Pilar */
.pillar-title {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600; /* font-semibold */
  color: theme('colors.gray.800');
  margin-bottom: 0.5rem; /* mb-2 */
}

/* Descrição do Pilar */
.pillar-description {
  color: theme('colors.gray.600');
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 250px; /* Limita largura para melhor leitura */
}

/* Botão CTA Moderno (Exemplo) */
.btn-primary-modern {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* space-x-2 */
  background-color: theme('colors.gray.900'); /* Fundo escuro */
  color: theme('colors.white');
  padding: 0.8rem 1.8rem; /* Ajuste py/px */
  border-radius: 0.5rem; /* rounded-lg */
  font-weight: 500; /* font-medium */
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-primary-modern:hover {
  background-color: theme('colors.blue.600'); /* Muda para a cor da marca no hover */
  color: theme('colors.white');
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 7px 14px rgba(59, 130, 246, 0.3);
}

.btn-primary-modern .btn-icon {
   width: 1.25rem; /* w-5 */
   height: 1.25rem; /* h-5 */
   transition: transform 0.3s ease;
}

.btn-primary-modern:hover .btn-icon {
   transform: translateX(4px); /* Ícone move para a direita no hover */
}


/* Animação Pop In (Exemplo) */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }
    70% {
        opacity: 1;
        transform: scale(1.05) translateY(0);
    }
    100% {
        transform: scale(1);
    }
}
.animate-pop-in {
    animation: popIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
}

/* Animação Fade In (Defina se não existir) */
/* @keyframes fadeIn { ... } */
/* .animate-fade-in { ... } */

/* Delays (Defina se não existir) */
/* .delay-100 { animation-delay: 0.1s; } ... */