body {
            font-family: 'Work Sans', sans-serif;
            color: #282E32;
            background-color: #E3DCD0;
            scroll-behavior: smooth;
        }

        h1, h2, h3, h4, h5, h6 {
            color: #282E32;
        }

        .container {
            max-width: 1200px;
        }
        
        .nav-link {
            transition: color 0.3s ease;
        }
        .nav-link:hover {
            color: #F29632;
        }

        .btn {
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .btn-primary {
            background-color: #F29632;
            color: white;
        }
        .btn-primary:hover {
            background-color: #e88a2b;
        }

        .btn-outline {
            border: 2px solid #F29632;
            color: #F29632;
        }
        .btn-outline:hover {
            background-color: rgba(242, 150, 50, 0.1);
        }

        .card {
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            will-change: transform;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        /* Micro-animações no scroll */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .animate-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .is-recommended {
            background-color: #F29632;
            color: white;
        }

        .is-recommended .text-dark-text, .is-recommended .text-gray-600 {
            color: white;
        }

        /* Estilos do Carrossel */
        .carousel-item {
            display: none;
        }
        .carousel-item.active {
            display: block;
        }

        /* Animação do encaixe do logo */
        #logo-hero {
            transform-origin: left top;
            will-change: transform, opacity;
        }

        @media (prefers-reduced-motion) {
            .animate-on-scroll {
                transition: none;
                transform: none;
                opacity: 1;
            }
            .btn:hover, .card:hover {
                transform: none;
                box-shadow: none;
            }
        }