/* CONFIGURAÇÕES GERAIS E VARIÁVEIS */
:root {
    --cor-fundo: #ffffff;
    --cor-botao: #341c5c; 
    --cor-texto-botao: #ffffff;
    --cor-hover: #261445;
    --cor-whatsapp: #25d366;
    --fonte-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    --largura-logo-mobile: 85vw;
    --largura-logo-desktop: 380px;
}

/* ESTRUTURA DO CORPO */
body {
    font-family: var(--fonte-principal);
    background-color: var(--cor-fundo);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin: 0;
    min-height: 100vh;
}

.profile-container {
    width: 100%;
    max-width: 400px; 
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* HEADER E LOGO */
.logo-container {
    width: 100%;
    padding: 50px 0 40px 0;
    display: flex;
    justify-content: center;
    animation: fadeIn 1.2s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.logo {
    width: var(--largura-logo-mobile); 
    max-width: var(--largura-logo-desktop);
    height: auto;
    object-fit: contain;
}

/* BOTÕES E LINKS */
.links-wrapper {
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.link-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cor-botao);
    color: var(--cor-texto-botao);
    text-decoration: none;
    padding: 18px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(52, 28, 92, 0.2);
    border: none;
    position: relative;
}

/* DESTAQUE WHATSAPP */
.link-item.whatsapp {
    background-color: var(--cor-whatsapp);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.link-item i {
    position: absolute;
    left: 20px;
    font-size: 1.3rem;
}

/* INTERAÇÕES */
.link-item:hover {
    transform: translateY(-3px);
    filter: brightness(90%);
}

/* RODAPÉ */
.footer-text {
    margin-top: auto;
    padding: 60px 0 20px 0;
    font-size: 0.95rem;
    color: #341c5c;
    font-weight: 600;
    line-height: 1.6;
}