/* Tailwind Custom Utilities */

/* Container responsivo com padding consistente */
.container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Cards com sombra e hover suave */
.card-hover {
    @apply bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}

/* Botões modernos com feedback visual */
.btn-primary {
    @apply inline-flex items-center justify-center px-8 py-3 text-base font-semibold text-white bg-blue-600 rounded-xl hover:bg-blue-700 transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
}

/* Seções com espaçamento consistente */
.section-spacing {
    @apply py-16 md:py-24;
}

/* Grid responsivo para cards */
.grid-cards {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8;
}

/* Tipografia otimizada */
.heading-primary {
    @apply text-3xl md:text-4xl font-bold text-gray-900 mb-6;
}

.text-body {
    @apply text-base text-gray-600 leading-relaxed;
}

/* Imagens responsivas */
.img-fluid {
    @apply w-full h-auto object-cover rounded-lg;
}

/* Lista com ícones */
.list-features {
    @apply space-y-4;
}

.list-features li {
    @apply flex items-start space-x-3;
}

.list-features li svg {
    @apply h-6 w-6 text-blue-500 flex-shrink-0;
}

/* Animações suaves */
.fade-in {
    @apply opacity-0 transform translate-y-4 transition-all duration-500;
}

.fade-in.active {
    @apply opacity-100 translate-y-0;
}

/* Navegação responsiva */
.nav-link {
    @apply px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 transition-colors duration-200;
}

/* Footer moderno */
.footer-modern {
    @apply bg-gray-900 text-gray-300;
}

.footer-link {
    @apply hover:text-white transition-colors duration-200;
}

/* Formulários estilizados */
.form-input {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

/* Cards de produto */
.product-card {
    @apply bg-white rounded-xl shadow-md overflow-hidden;
}

.product-image {
    @apply w-full h-48 object-cover transition-transform duration-300;
}

.product-content {
    @apply p-8 space-y-6 bg-white;
}

.features-list {
    @apply space-y-4 p-6 rounded-xl bg-opacity-50 backdrop-blur-sm;
}

.features-list ul {
    @apply space-y-3;
}

.features-list li {
    @apply flex items-center justify-between text-gray-700;
}

.features-list li span:first-child {
    @apply font-medium;
}

.product-title {
    @apply text-xl font-semibold text-gray-900 mb-2;
}

.product-description {
    @apply text-gray-600 mb-4;
}

/* Badges e tags */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary {
    @apply bg-blue-100 text-blue-800;
}

/* Responsividade */
@media (max-width: 640px) {
    .container-custom {
        @apply px-4;
    }
    
    .heading-primary {
        @apply text-2xl;
    }
}