/* Configurações Globais (Variáveis CSS) */
:root {
    --cor-primaria: #0077ff;       /* Azul vibrante para detalhes */
    --cor-fundo-claro: #1a1a2e;    /* Base escura do gradiente */
    --cor-fundo-escuro: #0f0f1c;   /* Cor de contraste do gradiente */
    --cor-texto: #ffffff;          /* Branco puro */
    --cor-link: #2c2c44;           /* Botão com leve transparência */
    --cor-link-hover: #3e3e5c;     /* Botão ao passar o mouse */
    --sombra-botao: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra elegante */
}

/* 1. Efeito Gradiente e Configuração de Fundo */
body {
    background: linear-gradient(-45deg, var(--cor-fundo-claro), var(--cor-fundo-escuro), #2a2c4e, #1a1a2e);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite; /* Animação sutil no fundo */

    color: var(--cor-texto);
    font-family: 'Poppins', sans-serif; /* Fonte moderna (garanta que está linkada no HTML ou use a padrão) */
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center; /* Centraliza verticalmente e horizontalmente */
    min-height: 100vh;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.container {
    width: 100%;
    max-width: 480px; /* Um pouco maior */
    text-align: center;
    padding: 20px;
}

/* 2. Estilo do Perfil */
.profile-header {
    margin-bottom: 40px;
    padding: 20px 0;
}

.profile-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--cor-primaria); /* Borda de destaque */
    box-shadow: 0 0 20px rgba(0, 119, 255, 0.5); /* Brilho sutil */
    margin-bottom: 15px;
}

.profile-header h1 {
    font-size: 2em;
    margin: 5px 0 8px 0;
    font-weight: 800;
}

.profile-header p {
    font-size: 1.1em;
    font-weight: 400;
    opacity: 0.9;
    color: #b3b3e6; /* Cor sutilmente diferente */
}

/* 3. Estilo dos Links (Botões Sofisticados) */
.links-section {
    display: flex;
    flex-direction: column;
    gap: 18px; /* Mais espaço entre os links */
}

.link-button {
    display: block;
    padding: 16px 25px;
    border-radius: 12px; /* Cantos mais arredondados */
    background-color: var(--cor-link);
    color: var(--cor-texto);
    text-decoration: none;
    font-size: 1.15em;
    font-weight: 600;
    /* Efeitos de profundidade */
    box-shadow: var(--sombra-botao);
    border: none; /* Remove a borda padrão para um look mais limpo */
    transition: all 0.25s ease;
}

.link-button:hover {
    background-color: var(--cor-link-hover);
    transform: translateY(-4px) scale(1.02); /* Efeito de elevação mais notável */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
}

/* 4. Cores Customizadas (para Links de Mídia Social) */
.link-button.instagram { background: #00A629; }
.link-button.instagram:hover { background: #009325; }

.link-button.linkedin { background: #0077B5; }
.link-button.linkedin:hover { background: #006399; }

.link-button.youtube { background: #FF0000; }
.link-button.youtube:hover { background: #cc0000; }

.link-button.email { background: #D96D00; }
.link-button.email:hover { background: #D96D00; }

.link-button.website {
    background-color: var(--cor-primaria);
    color: var(--cor-texto);
}
.link-button.website:hover {
    background-color: #005cbf;
}


/* 5. Rodapé */
.footer {
    margin-top: 50px;
    font-size: 0.9em;
    opacity: 0.6;
}

/* Responsividade: Ajusta o padding em telas muito pequenas */
@media (max-width: 500px) {
    body {
        padding: 10px;
        align-items: flex-start; /* Retorna ao topo em mobile para melhor visualização */
    }