/* ESTILOS PARA O CARROSSEL DE ROLAGEM CONTÍNUA (MARQUEE) */

/* 1. Estrutura Principal */
.marquee-wrapper {
    /* Ocupa a largura total e define o contexto para o pseudo-elemento de máscara */
    width: 100%;
    overflow: hidden; /* Esconde o conteúdo que está fora da área de visualização */
    position: relative;
    padding: 40px 0; /* Espaçamento vertical para o conteúdo */
    background-color: var(--fundo-claro); /* Garante que o fundo seja branco para o efeito de fade */
}

/* 2. Efeito de Máscara (Fade nas laterais) */
.marquee-wrapper::before,
.marquee-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px; /* Aumenta a largura da área de fade para um efeito mais suave */
    height: 100%;
    z-index: 2; /* Garante que fique acima do conteúdo */
    pointer-events: none; /* Permite clicar no conteúdo por baixo */
}

.marquee-wrapper::before {
    left: 0;
    /* Gradiente da cor de fundo (branco) para transparente */
    background: linear-gradient(to right, var(--fundo-claro) 0%, rgba(255, 255, 255, 0) 100%);
}

.marquee-wrapper::after {
    right: 0;
    /* Gradiente de transparente para a cor de fundo (branco) */
    background: linear-gradient(to left, var(--fundo-claro) 0%, rgba(255, 255, 255, 0) 100%);
}

/* 3. Container de Rolagem (A Pista) */
.marquee-track {
    display: flex;
    width: fit-content; /* Permite que o conteúdo se estenda além da tela */
    animation: marquee-scroll 60s linear infinite; /* 60s é a duração, ajuste conforme o tamanho do conteúdo */
    padding: 0 20px; /* Adiciona um padding horizontal para que o primeiro/último item não encoste na borda */
}

/* 4. Item do Carrossel (O Card) - Estilo NotebookLM */
.marquee-item {
    flex-shrink: 0; /* Impede que os itens encolham */
    width: 450px; /* Aumenta a largura do card para ser mais retangular */
    margin-right: 30px; /* Aumenta o espaçamento entre os cards */
    padding: 20px; /* Reduz o padding interno */
    background-color: var(--fundo-claro); /* Fundo branco, como no exemplo */
    border-radius: 16px; /* Cantos mais arredondados */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Sombra mais pronunciada e suave */
    border: 1px solid #f0f0f0; /* Borda sutil para definir o card */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza o conteúdo verticalmente */
    height: 200px; /* Reduz a altura para ser mais retangular */
    transition: transform 0.3s ease;
}

.marquee-item:hover {
    transform: translateY(-5px); /* Efeito sutil ao passar o mouse */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.marquee-item:last-child {
    margin-right: 0; /* Remove margem do último item do grupo */
}

/* 5. Conteúdo do Card (Ajuste para o seu conteúdo) */
.marquee-item img {
    max-width: 100%;
    max-height: 100%; /* Permite que a imagem ocupe a altura total do card */
    width: auto;
    object-fit: contain; /* Garante que a imagem caiba sem ser cortada */
    border-radius: 4px;
    border: none;
    box-shadow: none;
}

/* Removendo estilos de slide-content e elementos internos que não existem mais */

/* 6. Animação de Rolagem */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move o conteúdo para a esquerda pela metade do seu tamanho (a primeira cópia) */
        transform: translateX(-50%);
    }
}

/* 7. Responsividade (Ajuste para telas menores) */
@media (max-width: 768px) {
    .marquee-wrapper::before,
    .marquee-wrapper::after {
        width: 50px; /* Reduz a largura do fade em telas menores */
    }

    .marquee-item {
    width: 350px; /* Ajusta a largura do card em telas menores */
    height: 180px;
        margin-right: 20px;
    }
}

/* 8. Estilos para o cabeçalho e rodapé da seção, que agora estão em containers separados */
#estudos-greener-header, #estudos-greener-footer {
    padding: 20px 0;
    text-align: center;
}

#estudos-greener-header .section-title {
    margin-bottom: 10px;
}

#estudos-greener-header .section-subtitle {
    margin-bottom: 20px;
}

#estudos-greener-footer {
    padding-top: 0;
    padding-bottom: 40px;
}