* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Fredoka One', cursive; /* Ou a fonte que você preferir */
    
    /* 1. A COR EXATA QUE VOCÊ ME PASSOU */
    background-color: #54BCF7; 
    
    /* 2. A IMAGEM DE FUNDO NO TOPO */
    background-image: url('fundo-bio.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    
    /* IMPORTANTE: 100% de largura e altura automática. 
       Isso faz a imagem caber na tela do celular sem cortar as laterais 
       e conecta perfeitamente com a cor azul lá embaixo. */
    background-size: 100% auto; 
    
    /* Garante que o conteúdo tenha espaço e centralização */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alinha tudo no topo */
    padding-top: 50px; /* Empurra o conteúdo para baixo para não ficar colado no teto */
    padding-bottom: 50px;
}

.container-bio {
    width: 100%;
    max-width: 400px; /* Largura ideal para celulares */
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espaço entre os botões */
    padding: 0 20px; /* Margem de segurança nas laterais */
}

.logo-bio {
    width: 180px;
    margin: 0 auto 10px auto;
    /* Se a logo precisar de sombra, mantenha. Se não, apague a linha abaixo */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

/* --- ESTILO DOS BOTÕES (LIMPOS PARA O PNG 3D BRILHAR) --- */
.botao-link {
    display: block;
    width: 100%;
    text-decoration: none;
    
    /* TUDO TRANSPARENTE: Removemos qualquer cor ou borda criada por código */
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    
    padding: 0;
    margin: 0;
    
    transition: transform 0.2s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* Remove o flash azul ao clicar no celular */
}

.botao-link img {
    width: 100%;      /* Ocupa a largura disponível do container */
    height: auto;     /* Mantém a proporção do botão */
    display: block;   /* Evita espaços vazios abaixo da imagem */
    
    /* Opcional: Se o seu PNG não tiver sombra, você pode adicionar uma aqui por código */
    /* filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2)); */
}

/* Efeito de clique */
.botao-link:hover {
    transform: scale(1.02); /* Cresce um pouquinho */
}

.botao-link:active {
    transform: scale(0.98); /* Encolhe ao clicar */
}