/* ==================== */
/* ANIMAÇÕES */
/* ==================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* @keyframes neon-glow { ... } */ 
/* Removido SE NÃO for usado nesta página ou se já existir no style.css global.
   Se for usado especificamente aqui e diferente do global, pode ser mantido. */

/* ==================== */
/* ESTRUTURA PRINCIPAL */
/* ==================== */
.background { /* Estilo para o background específico desta página */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: 
        linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0.45)), /* Leve ajuste no gradiente para mais contraste talvez */
        url('comotudo.jpg'); /* Lembre-se de otimizar esta imagem! */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Mantido, pois é uma escolha de estilo */
}

.about-page {
    padding: 120px 15% 80px; /* Padding original */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Para centralizar o .about-content se ele não ocupar max-width */
    min-height: calc(var(--vh, 1vh) * 100 - 80px); /* Considerando altura do header/footer-note da home, ajuste se esta página tiver footer diferente */
    animation: fadeInUp 0.8s ease-out forwards;
    box-sizing: border-box;
}

/* ==================== */
/* CONTEÚDO */
/* ==================== */
.about-content {
    background: rgba(0, 0, 0, 0.75); /* Mantido para o efeito de painel translúcido */
    backdrop-filter: blur(10px);   /* Efeito de vidro fosco mantido */
    border-radius: 15px;
    padding: 50px;
    border: none; /* ALTERAÇÃO: Borda removida para um visual mais clean */
    /* SUGESTÃO OPCIONAL: Adicionar uma sombra muito sutil para destacar o painel do fundo */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); 
    max-width: 1400px;
    width: 100%; /* Para garantir que o padding da .about-page funcione bem */
    margin: 0 auto;
    display: flex;
    gap: 60px;
    align-items: flex-start;
    animation: scaleIn 0.6s 0.3s ease-out forwards;
    opacity: 0; /* Para a animação scaleIn */
}

/* ==================== */
/* FOTO DO ARTISTA */
/* ==================== */
.artist-photo {
    flex: 0 0 400px;
    position: sticky;
    top: 140px; /* Ajustar este valor se a altura do header mudar ou para melhor posicionamento */
    animation: fadeInUp 0.5s 0.5s ease-out forwards;
    opacity: 0; /* Para animação */
}

.artist-photo img {
    width: 100%;
    border-radius: 10px;
    border: none; /* ALTERAÇÃO: Borda da imagem removida */
    aspect-ratio: 3/4;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Adicionada sombra sutil à foto */
}

/* ==================== */
/* BIOGRAFIA */
/* ==================== */
.bio-content {
    flex: 1;
    /* padding-right: 20px; -- Removido se o gap do flex container pai for suficiente */
    animation: fadeInUp 0.5s 0.7s ease-out forwards;
    opacity: 0; /* Para animação */
}

.about-content h1 { /* O seletor aqui já é específico */
    text-align: left;
    font-size: 3rem; /* Mantido */
    font-family: 'Georgia', 'Times New Roman', serif; /* Garantindo a fonte do título */
    letter-spacing: 3px; /* Reduzido um pouco para melhor leitura */
    margin-bottom: 35px; /* Aumentado um pouco */
    line-height: 1.3;
    color: white;
    /* Remover .about-content h1 span e incorporar no h1 se não houver estilo diferente */
}

/* Se o span no h1 tiver um propósito de estilo diferente, mantenha-o. 
   Caso contrário, pode ser simplificado. O HTML atual não tem span no H1.
.about-content h1 span {
    display: inline;
    font-size: 2.5rem;
    margin-top: 15px;
    margin-left: 12px;
}
*/

.bio-section {
    line-height: 1.8;
    font-size: 1.15rem;
    font-family: "Roboto", sans-serif; /* SUGESTÃO: Usar Roboto para o corpo do texto para contraste com o título serifado */
    text-align: left;
    color: #f0f0f0; /* Cor um pouco menos branca para conforto visual */
}

.bio-section p {
    margin-bottom: 25px; /* Ajustado */
    max-width: 100%;
    opacity: 0; /* Para animação */
    animation: fadeInUp 0.5s ease-out forwards;
}

.bio-section p:nth-child(1) { animation-delay: 0.8s; }
.bio-section p:nth-child(2) { animation-delay: 1.0s; }
.bio-section p:nth-child(3) { animation-delay: 1.2s; }
/* Adicionar para o quarto parágrafo se houver */
/* .bio-section p:nth-child(4) { animation-delay: 1.4s; } */


.bio-section em {
    font-style: italic;
    font-weight: bold; /* Se o Roboto for usado, o peso pode ser ajustado (ex: 500 ou 700) */
    color: #fff; /* Para destacar um pouco mais o ênfase */
}

/* ==================== */
/* RESPONSIVIDADE */
/* ==================== */
@media (max-width: 1200px) {
    .about-page { padding: 120px 10% 40px; }
    .artist-photo { flex: 0 0 350px; top: 120px; } /* Ajustar 'top' do sticky */
    .about-content { gap: 40px; padding: 40px; }
}

@media (max-width: 992px) {
    .about-content {
        flex-direction: column;
        align-items: center; /* Centralizar foto quando em coluna */
        padding: 40px;
        gap: 40px;
    }
    .artist-photo {
        position: static; /* Correto, já estava */
        margin: 0 auto 40px;
        max-width: 400px; /* Reduzido um pouco */
        width: 80%; /* Usar porcentagem para melhor fluidez */
        flex-basis: auto; /* Resetar flex-basis */
    }
    .bio-content {
        padding-right: 0; /* Remover padding que não faz mais sentido */
    }
}

@media (max-width: 768px) {
    .about-page { padding: 100px 5% 30px; } /* Reduzido padding-top */
    .about-content { padding: 30px; gap: 30px;}
    .artist-photo { max-width: 350px; }
    .about-content h1 { font-size: 2.5rem; letter-spacing: 2px; }
    .bio-section { font-size: 1.1rem; }
}

@media (max-width: 480px) {
    .about-page { padding: 90px 15px 20px; }
    .about-content { padding: 20px; }
    .about-content h1 { font-size: 2rem; margin-bottom: 25px; }
    /* .about-content h1 span { font-size: 1.8rem; } -- Seletor de span removido se não usado */
    .artist-photo { width: 90%; max-width: 300px; margin-bottom: 30px;}
    .bio-section { font-size: 1rem; }
    .bio-section p { margin-bottom: 20px;}
}