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

body {
    /* Garante que o texto nunca encoste nas bordas físicas do celular */
    padding: 20px; 
    line-height: 1.6; /* Aumenta o espaço entre as linhas, melhora muito a leitura no celular */
    font-size: 1.1rem; /* Um tamanho de fonte confortável para leitura em telas pequenas */
}

h1 {
color:steelblue;
font-family: 'Courier New', Courier, monospace;
font-size: 50px;
text-align: center;
margin-top: 40px;
margin-bottom: 10px;
} 

h2 {
color: black;
font-family: 'Courier New', Courier, monospace;
font-size: 20px;
text-align: center;
margin-top: 20px;
}

/* Ajuste geral da imagem para ser mais flexível */
img {
    max-width: 100%; /* Permite que ela cresça até o limite do container */
    width: 400px;    /* Tamanho ideal para PC */
    height: auto;
    display: block;
    margin: 20px auto;
}

/* Ajuste do parágrafo para não usar clamp fixo (melhor controle) */
p {
    font-size: 1.1rem;
}

#container {
    max-width: 800px;
    margin: 0 auto; /* O 'auto' nas laterais centraliza o bloco horizontalmente */
    display: flex;
    flex-direction: column; /* Coloca um item embaixo do outro */
    align-items: center;    /* Centraliza todos os itens (h1, texto, opções) */
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
}

#texto {
    text-align: left;   /* Isso joga o texto para a esquerda */
    margin-top: 1px;   /* Um espaço entre o título e a premissa */
    margin-bottom: 40px; 
}

#texto h2 {
    text-align: left;   /* Garante que o h2 dentro da div também mude */
    line-height: 1.4;   /* Melhora a leitura do texto */
}

/* Aqui acontece a mágica do alinhamento */
.linha-opcao {
    display: flex;         /* Coloca os itens lado a lado */
    align-items: center;   /* Alinha verticalmente no centro */
    margin-bottom: 20px;   /* Espaço entre a opção A e a B */
    gap: 15px;            /* Espaço entre o botão e o texto */
}

.botao-escolha {
    width: 40px;       /* Diminuímos de 60 para 50 */
    height: 40px;      /* Mantemos igual para continuar quadrado */
    font-size: 1.0rem; /* Diminuímos a letra de 1.5 para 1.2 */
    display: inline-flex; /* Mantém o comportamento de alinhamento */
    justify-content: center;
    align-items: center;
    padding: 0;           /* Removemos o padding para não esticar o quadrado */
    
    cursor: pointer;
    font-weight: bold;
    background: lightcyan;
    color: steelblue;
    border: none;
    border-radius: 8px;
    border-bottom: 6px solid #2e5a88;
    transition: none;
}

.botao-escolha:hover {
    background-color: lightpink;
}

/* 3. O efeito de "Afundar" ao clicar */
.botao-escolha:active {
/* Em vez de diminuir a borda, apenas descemos o botão */
    transform: translateY(4px);
    
    /* Opcional: clareamos a sombra para dar efeito de pressão */
    border-bottom-color: #3e79b5;
}

.divisor {
    font-size: 0.9em;
    color: steelblue; /* O azul que você já usa */
    display: inline-block; /* Importante para animações funcionarem bem */
    vertical-align: middle;
    
    /* Chamada da animação: nome | duração | modo | repetição */
    animation: brilhoPulsante 2s ease-in-out infinite alternate;
}

/* O "roteiro" da animação */
@keyframes brilhoPulsante {
    from {
        /* Brilho suave e mais próximo da runa */
        text-shadow: 0 0 5px rgba(46, 90, 136, 0.4),
                     0 0 10px rgba(46, 90, 136, 0.2);
    }
    to {
        /* Brilho intenso, expandido e mais claro */
        text-shadow: 0 0 15px rgba(100, 149, 237, 0.9), /* Um azul mais claro aqui */
                     0 0 25px rgba(46, 90, 136, 0.6);
    }
}

.botao-voltar {
    display: inline-block;
    color: #888; /* Cor cinza original */
    text-decoration: none;
    font-size: 2.1em;
    font-weight: bold;
    background: none;
    border: none; /* Garante que não há borda */
    padding: 8px 15px;
    transition: color 0.2s ease, transform 0.1s ease; /* Transições suaves */
    cursor: pointer;
}

/* Efeito ao passar o rato (Hover) */
.botao-voltar:hover {
    color: #2e5a88; /* Muda para o azul da tua identidade visual */
}

/* Efeito ao clicar (Active) - O "Afundar" */
.botao-voltar:active {
    color: steelblue; /* Um azul mais escuro para simular pressão */
    transform: translateY(3px); /* Desloca a seta 3 pixéis para baixo */
}

#area-inicio {
    text-align: center;
    padding-bottom: 30px;
    opacity: 0.6; /* Deixa um pouco mais discreto que o título */
}

.icone-nascimento {
    font-size: 1.5em;
    color: #2e5a88;
    display: inline-block;
    animation: batidaCoracao 3s infinite ease-in-out;
}

@keyframes batidaCoracao {
    0% { transform: scale(1); filter: brightness(1); }
    15% { transform: scale(1.2); filter: brightness(1.2); }
    30% { transform: scale(1); filter: brightness(1); }
    45% { transform: scale(1.15); filter: brightness(1.1); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* --- MEDIA QUERY CORRIGIDA --- */
@media (max-width: 600px) {
    body {
        padding: 15px; 
    }

    h1 {
        font-size: 1.8rem !important; 
        margin-top: 20px;
    }

    h2 {
        font-size: 1.1rem; 
    }

    img {
        width: 90%; 
    }

    p {
        font-size: 0.95rem; 
    }

    .linha-opcao {
        flex-direction: column; 
        align-items: center;
        text-align: center;
        gap: 10px;
        margin-bottom: 30px;
    }

    .botao-escolha {
        width: 40px !important;   
        height: 40px !important;  
        padding: 0 !important;    
        display: flex !important; 
        justify-content: center;
        align-items: center;
        font-size: 1.0rem;
        flex-shrink: 0;           
    }

    .linha-opcao p {
        text-align: center;
        margin: 0;
        max-width: 90%;        
        font-size: 0.95rem;
        line-height: 1.4;
    }
} /* <--- ESTA CHAVE FECHA A MEDIA QUERY E DEVE FICAR NO FINAL DE TUDO */