/* Juntas e Digitais - Social Media Landing Page - Estilos CSS
*/

/* Variáveis e Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

/* Base de Links e Cores (Tailwind substitui a maioria) */
a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

/* Estilos Personalizados */
@layer components {
    /* Efeito de sublinhado nos links da navegação */
    .desktop-nav a:not(.cta-button-secondary)::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -5px;
        left: 0;
        background-color: #FF007F; /* Cor Principal */
        transition: width 0.3s ease;
    }

    .desktop-nav a:not(.cta-button-secondary):hover::after {
        width: 100%;
    }

    /* Animação para o botão CTA */
    @keyframes pulse {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
        }
        70% {
            transform: scale(1.05);
            box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
        }
        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        }
    }

    .cta-button-secondary {
        animation: pulse 2s infinite;
    }

    /* Estilo para a seção de Equipe */
    .team-member img {
        transition: transform 0.3s ease, border-color 0.3s ease;
    }

    .team-member:hover img {
        transform: scale(1.05);
        border-color: #6A0DAD; /* Cor Secundária */
    }

    /* Estilos para o rodapé */
    #footer a:hover {
        color: rgba(255, 255, 255, 0.7);
    }
}