/* ==================================== */
/* GLOBAL E TIPOGRAFIA */
/* ==================================== */
body {
    /* Diminui o padding geral em telas pequenas */
    padding-left: 3%;
    padding-right: 3%;
}

h2, h3 {
    /* Reduz o tamanho da fonte para títulos em mobile */
    font-size: 2rem !important; 
    letter-spacing: 2px !important;
    
   
}

/* ==================================== */
/* 1. SEÇÃO SOBRE (LOGO E TEXTO) */
/* ==================================== */
.sobre {
    /* Altera para layout de coluna: Logo no topo, textos embaixo */
    flex-direction: column;
    gap: 3rem !important; /* Reduz o espaçamento entre os blocos */
    padding: 4rem 3% !important;
    align-items: center !important;
}

.sobre img.logo {
    max-width: 250px !important; /* Diminui o tamanho do logo */
    margin-bottom: 1rem;
}

.bloco-textos {
    /* Mantém o Estrategista e Pianista lado a lado se couber, senão empilha */
    flex-direction: column; 
    gap: 2rem !important; 
    align-items: center !important;
    width: 100%;
}

.coluna-estrategista,
.coluna-pianista {
    max-width: 90% !important; /* Usa quase toda a largura */
    text-align: center;
   
}

.coluna h2 {
    text-align: center !important;
    margin-top: 20px
}

/* ==================================== */
/* 2. SEÇÃO AULAS (PIANO) */
/* ==================================== */
/* ==================================== */
/* 2. SEÇÃO AULAS (PIANO) - CORRIGIDA */
/* ==================================== */
.aulas {
    /* Empilha o piano e o conteúdo */
    flex-direction: column !important;
    padding: 4rem 3% !important; /* Corrigido: Estava faltando o valor '4' no padding */
    min-height: auto !important;
    /* Adicionado: Garante que o contêiner centralize horizontalmente os itens empilhados */
    align-items: center !important; 
    justify-content: flex-start !important; /* Começa o conteúdo do topo */
}

.aulas .piano-img {
    /* Posicionamento normal no mobile: o piano vai para o topo e centraliza */
    position: relative !important; 
    left: auto !important;
    top: auto !important;
    transform: none !important;
    
    /* Aumenta a largura máxima para 100% do contêiner e centraliza */
    max-width: 90% !important; /* Use 90% para dar um respiro nas laterais */
    width: 90% !important;
    margin: 0 auto 2rem auto !important; /* Centraliza horizontalmente e adiciona margem inferior */
    
    /* Garante que o elemento se comporte como um bloco para centralizar com "margin: auto" */
    display: block !important; 
}

.aulas .aulas-conteudo {
    /* Centraliza o conteúdo e remove margens de desktop */
    margin-left: 0 !important; 
    padding-left: 0 !important;
    align-items: center !important;
    text-align: center;
    max-width: 90% !important;
}

/* ... o restante dos estilos da seção aulas ... */

.aulas .h2piano {
    font-size: 2rem !important; 
}

.aulas ul {
    text-align: center;
}

.aulas ul li {
    /* Ajusta o marcador de lista para ser inline */
    padding-left: 0;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
.aulas ul li::before {
    position: static !important;
    margin-right: 0.5rem;
}

/* ==================================== */
/* 3. SEÇÃO PLANOS (CARDS) */
/* ==================================== */
.planos .cards {
    flex-direction: column; /* Empilha os cards */
    gap: 1.5rem !important;
}

.planos .card {
    max-width: 90% !important; /* Ocupa quase toda a largura da tela */
    margin: 0 auto;
    min-height: auto !important; /* Remove altura fixa */
}

/* ==================================== */
/* 4. SEÇÃO DEPOIMENTO */
/* ==================================== */
.depoimento .conteudo {
    /* Empilha o texto e a imagem */
    flex-direction: column; 
    padding: 0;
}

.depoimento .depoimento-texto {
    /* Ajusta o bloco de texto para ocupar a largura da tela e centraliza o texto */
    background-color: transparent !important; /* Remove o fundo isolado */
    padding: 0 !important;
    margin-bottom: 2rem;
    width: 90% !important;
    max-width: 90% !important;
    text-align: center !important; 
}

.depoimento .conteudo img {
    /* Garante que a imagem se ajuste à largura da tela */
    margin-left: 0 !important;
    max-width: 80% !important;
}

.depoimento .conteudo h3,
.depoimento .conteudo p {
    text-align: center !important; 
}

/* ==================================== */
/* 5. FOOTER */
/* ==================================== */
footer {
    padding: 1.5rem 3% !important; /* Diminui o padding */
}