/* 
Alterações realizadas em 2024-12-19 @filipemontt:
- CSS separado do HTML para melhor organização
- Estilos para slider automático implementado
- Transições suaves para slides
- Fonte Outfit do Google Fonts aplicada em todo o site
*/

/* Configuração da fonte Outfit para todo o site */
@layer base {
    * {
        font-family: 'Outfit', sans-serif;
    }
    
    body {
        font-family: 'Outfit', sans-serif;
    }
}

@layer components {
    .btn-primary {
        @apply font-bold transition-all flex items-center gap-2;
        color: #fff !important;
        padding: 10px 20px;
        border-radius: 10px;
        font-size: 1.125rem !important; /* 18px - text-lg */
        transform: translateY(0);
    }
    .btn-primary:hover {
        transform: translateY(-2px);
    }
    .btn-secondary {
        @apply bg-secondary text-white font-bold py-2 px-4 rounded-full hover:bg-opacity-90 transition-all;
    }
    
    /* Menu de navegação */
    .nav-link {
        @apply font-medium transition-colors duration-200;
        font-size: 1.125rem !important; /* 18px - text-lg */
    }
    .section-title {
        @apply text-3xl md:text-4xl font-bold mb-6 text-center;
    }
    .faq-item {
        @apply transition-all duration-300;
    }
    .faq-question {
        @apply transition-all duration-200;
    }
    .faq-answer {
        @apply hidden transition-all duration-300 ease-in-out;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
    }
    .faq-item.active .faq-answer {
        @apply block;
        max-height: 500px;
        opacity: 1;
    }
    .faq-item.active .faq-icon {
        @apply rotate-180;
    }
    .faq-item:hover {
        transform: translateY(-2px);
    }
    
    /* Depoimentos de Clientes */
    .depoimento-card {
        transition: all 0.3s ease;
        animation: float 6s ease-in-out infinite;
    }
    .depoimento-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        animation-play-state: paused;
    }
    .depoimento-card:nth-child(1) {
        animation: fadeInUp 0.6s ease-out, float 6s ease-in-out infinite 0s;
    }
    .depoimento-card:nth-child(2) {
        animation: fadeInUp 0.6s ease-out 0.2s both, float 6s ease-in-out infinite 2s;
    }
    .depoimento-card:nth-child(3) {
        animation: fadeInUp 0.6s ease-out 0.4s both, float 6s ease-in-out infinite 4s;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes float {
        0%, 100% {
            transform: translateY(0px);
        }
        25% {
            transform: translateY(-10px);
        }
        50% {
            transform: translateY(0px);
        }
        75% {
            transform: translateY(5px);
        }
    }
    /* Swiper customizations */
    .heroSwiper {
        @apply rounded-[20px] overflow-hidden;
    }
    .swiper-slide {
        @apply flex items-center justify-center;
    }
    .heroSwiper .swiper-slide img {
        @apply w-full h-auto object-contain;
        border-radius: 20px !important;
    }
    
    /* Imagem Mariana - altura reduzida em 30% */
    .image-mariana {
        max-height: 700px !important;
        width: auto !important;
        height: auto !important;
    }
    .navbar-transparent {
        background-color: #f7f7f7 !important;
        padding-top: 30px;
        padding-bottom: 32px;
    }
    .navbar-scrolled {
        background-color: white;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        padding-top: 30px;
        padding-bottom: 32px;
    }
    
    /* Mobile adjustments for steps section */
    @media (max-width: 768px) {
        .steps-section {
            margin-top: -50px;
        }
    }
    .bg-custom {
        background-color: #f7f7f7;
    }
    
    /* Custom padding classes */
    .py-25 {
        padding-top: 160px;
        padding-bottom: 160px;
    }
    
    /* Classes de cores personalizadas */
    .color-primary {
        color: #6f81bf;
    }
    
    .bg-primary {
        background-color: #6f81bf;
    }
    
    .color-warning {
        color: #f19134;
    }
    
    .bg-warning {
        background-color: #f19134;
    }
    
    .color-success {
        color: #6ece87;
    }
    
    .bg-success {
        background-color: #6ece87;
    }
    
    .color-bege {
        color: #f4edd6;
    }
    
    .bg-bege {
        background-color: #f4edd6;
    }
    
    .color-yellow {
        color: #f9d856;
    }
    
    .bg-yellow {
        background-color: #f9d856;
    }
    
    .color-pink {
        color: #fcccdc;
    }
    
    .bg-pink {
        background-color: #fcccdc;
    }
    
    .color-dark {
        color: #333333;
    }
    
    .bg-dark {
        background-color: #333333;
    }
    
    .color-light {
        color: #F5F5F5;
    }
    
    .bg-light {
        background-color: #F5F5F5;
    }

    /* Gradientes do Projeto */
    .gradient-primary-warning {
        background: linear-gradient(135deg, #6f81bf 0%, #f19134 100%);
        box-shadow: 0 4px 15px rgba(111, 129, 191, 0.3);
    }
    .gradient-primary-warning:hover {
        background: linear-gradient(135deg, #5a6ba3 0%, #e0822a 100%);
        box-shadow: 0 6px 20px rgba(111, 129, 191, 0.4);
    }

    .gradient-success-warning {
        background: linear-gradient(135deg, #6ece87 0%, #f19134 100%);
        box-shadow: 0 4px 15px rgba(110, 206, 135, 0.3);
    }
    .gradient-success-warning:hover {
        background: linear-gradient(135deg, #5bb876 0%, #e0822a 100%);
        box-shadow: 0 6px 20px rgba(110, 206, 135, 0.4);
    }

    .gradient-primary-success {
        background: linear-gradient(135deg, #6f81bf 0%, #6ece87 100%);
        box-shadow: 0 4px 15px rgba(111, 129, 191, 0.3);
    }
    .gradient-primary-success:hover {
        background: linear-gradient(135deg, #5a6ba3 0%, #5bb876 100%);
        box-shadow: 0 6px 20px rgba(111, 129, 191, 0.4);
    }

    .gradient-warning-pink {
        background: linear-gradient(135deg, #f19134 0%, #fcccdc 100%);
        box-shadow: 0 4px 15px rgba(241, 145, 52, 0.3);
    }
    .gradient-warning-pink:hover {
        background: linear-gradient(135deg, #e0822a 0%, #f5b8c8 100%);
        box-shadow: 0 6px 20px rgba(241, 145, 52, 0.4);
    }

    .gradient-success-yellow {
        background: linear-gradient(135deg, #6ece87 0%, #f9d856 100%);
        box-shadow: 0 4px 15px rgba(110, 206, 135, 0.3);
    }
    .gradient-success-yellow:hover {
        background: linear-gradient(135deg, #5bb876 0%, #f7d23a 100%);
        box-shadow: 0 6px 20px rgba(110, 206, 135, 0.4);
    }

    .gradient-primary-pink {
        background: linear-gradient(135deg, #6f81bf 0%, #fcccdc 100%);
        box-shadow: 0 4px 15px rgba(111, 129, 191, 0.3);
    }
    .gradient-primary-pink:hover {
        background: linear-gradient(135deg, #5a6ba3 0%, #f5b8c8 100%);
        box-shadow: 0 6px 20px rgba(111, 129, 191, 0.4);
    }

    .gradient-warning-yellow {
        background: linear-gradient(135deg, #f19134 0%, #f9d856 100%);
        box-shadow: 0 4px 15px rgba(241, 145, 52, 0.3);
    }
    .gradient-warning-yellow:hover {
        background: linear-gradient(135deg, #e0822a 0%, #f7d23a 100%);
        box-shadow: 0 6px 20px rgba(241, 145, 52, 0.4);
    }

    .gradient-bege-success {
        background: linear-gradient(135deg, #f4edd6 0%, #6ece87 100%);
        box-shadow: 0 4px 15px rgba(244, 237, 214, 0.3);
    }
    .gradient-bege-success:hover {
        background: linear-gradient(135deg, #f2e8c8 0%, #5bb876 100%);
        box-shadow: 0 6px 20px rgba(244, 237, 214, 0.4);
    }

/* Gradientes para Texto (Títulos) */
.text-gradient-primary-warning {
    background: linear-gradient(135deg, #6f81bf 0%, #f19134 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Classes de tamanho customizadas */
.w-25 {
    width: 100px !important;
}

.h-25 {
    height: 100px !important;
}

/* Classes responsivas para círculos */
@media (max-width: 640px) {
    .w-20 {
        width: 80px !important;
    }
    .h-20 {
        height: 80px !important;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .w-24 {
        width: 96px !important;
    }
    .h-24 {
        height: 96px !important;
    }
}

@media (min-width: 769px) {
    .w-32 {
        width: 128px !important;
    }
    .h-32 {
        height: 128px !important;
    }
}

.border-6 {
    border-width: 6px !important;
}

/* Animação para círculos de brinquedos */
.brinquedo-circle {
    transition: all 0.3s ease;
    animation: floatBrinquedo 6s ease-in-out infinite;
    animation-play-state: running;
}

.brinquedo-circle:hover {
    animation-play-state: paused;
    transform: translateY(-5px);
}

.brinquedo-circle:nth-child(1) {
    animation-delay: 0s;
}

.brinquedo-circle:nth-child(2) {
    animation-delay: 2s;
}

.brinquedo-circle:nth-child(3) {
    animation-delay: 4s;
}

@keyframes floatBrinquedo {
    0%, 100% {
        transform: translateY(0px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    25% {
        transform: translateY(-8px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }
    50% {
        transform: translateY(-4px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
    }
    75% {
        transform: translateY(-12px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
    }
}

    .text-gradient-success-warning {
        background: linear-gradient(135deg, #6ece87 0%, #f19134 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .text-gradient-primary-success {
        background: linear-gradient(135deg, #6f81bf 0%, #6ece87 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .text-gradient-warning-pink {
        background: linear-gradient(135deg, #f19134 0%, #fcccdc 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .text-gradient-success-yellow {
        background: linear-gradient(135deg, #6ece87 0%, #f9d856 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .text-gradient-primary-pink {
        background: linear-gradient(135deg, #6f81bf 0%, #fcccdc 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .text-gradient-warning-yellow {
        background: linear-gradient(135deg, #f19134 0%, #f9d856 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .text-gradient-bege-success {
        background: linear-gradient(135deg, #f4edd6 0%, #6ece87 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}