/* 1. RESET E CONFIGURAÇÕES GERAIS */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body {
    background-color: #fff0f5;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 100px, rgba(232, 34, 126, 0.08) 100px, rgba(232, 34, 126, 0.08) 110px);
    color: #333;
    display: flex;
    justify-content: center;
    padding: 20px;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
}

/* 2. CONTAINER PRINCIPAL */
.container {
    max-width: 450px;
    width: 100%;
    text-align: center;
    background: #fce4ec;
    border-radius: 40px;
    padding: 30px 25px;
    box-shadow: 0 20px 50px rgba(232, 34, 126, 0.15);
    border: 1px solid rgba(232, 34, 126, 0.1);
}

/* 3. FONTE MONTSERRAT (Apenas no Título) */
.frase-entrada {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 24px;
    margin-top: 15px;
    color: #333;
}

.bio { 
    margin-bottom: 20px; 
    font-style: italic; 
    font-size: 15px; 
    opacity: 0.9;
}

/* 4. FOTO DE PERFIL (MOLDURA DOURADA) */
.foto-moldura {
    width: 230px; 
    height: 230px;
    margin: 0 auto;
    border-radius: 50%;
    padding: 7px;
    background: linear-gradient(45deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    overflow: hidden;
}

.foto-moldura img {
    width: 100%; 
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid white;
    transition: transform 0.4s ease; /* Transição da foto de perfil */
    cursor: pointer;
}

.foto-moldura img:hover {
    transform: scale(1.1); /* Zoom na foto principal */
}

/* 5. LINKS E BOTÕES */
.links-container { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    margin-top: 25px; 
}

.card-link {
    display: flex;
    align-items: center;
    background: white;
    padding: 15px;
    text-decoration: none;
    border-radius: 20px;
    transition: 0.3s ease;
    border: 1px solid rgba(232, 34, 126, 0.1);
}

/* Efeito de subir o botão ao passar o mouse */
.card-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(232, 34, 126, 0.2);
}

/* FOTOS DENTRO DOS BOTÕES (Zoom sutil aqui) */
.img-botao {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    margin-right: 15px;
    object-fit: cover;
    border: 1px solid #eee;
    transition: transform 0.3s ease; /* Permite o zoom suave */
}

/* Quando o mouse passar no botão, a imagem dentro dele cresce */
.card-link:hover .img-botao {
    transform: scale(1.1);
}

.titulo-link { 
    display: block; 
    font-weight: 600; 
    color: #000; 
    font-size: 16px; 
    text-align: left; 
}

.subtitulo-link { 
    display: block; 
    font-size: 12px; 
    color: #666; 
    text-align: left; 
}

/* 6. BOTÃO DESTAQUE (RECRUTAMENTO) */
.card-link.destaque { 
    background-color: #ff85a2; 
    color: white; 
}

.card-link.destaque .titulo-link, 
.card-link.destaque .subtitulo-link { 
    color: white; 
}

.emoji { font-size: 26px; margin-right: 15px; }

/* 7. BANNER DE RECRUTAMENTO */
.sessao-banner {
    margin-top: 30px; 
    padding: 15px;
    background: #fff; 
    border-radius: 25px;
    border: 2px dashed #e8227e;
    overflow: hidden; /* Garante que a imagem não "saia" da borda ao crescer */
}

.img-banner { 
    width: 100%; 
    border-radius: 15px; 
    margin-bottom: 12px; 
    transition: transform 0.5s ease; /* Faz o movimento ser suave */
    cursor: pointer;
}

/* Efeito de crescer ao passar o mouse na imagem do banner */
.img-banner:hover {
    transform: scale(1.08); /* Aumenta 8% o tamanho */
}

/* 8. RODAPÉ */
footer { 
    margin-top: 30px; 
    font-size: 12px; 
    opacity: 0.8; 
    line-height: 1.6; 
}