/* ======================================= */
/* === RESPONSIVE STYLES (768px e abaixo) === */
/* ======================================= */

@media (max-width: 768px) {
    
    /* --- Layout Geral e Espaçamento --- */
    main {
        padding: 1rem;
    }

    .titles {
        margin-bottom: 1.5rem;
    }

    /* --- Header / Navegação (Ocultar/Ajustar Navbar) --- */
    .header {
        padding: 1rem 1rem;
    }
    
    /* Exemplo: Ocultar a navbar e mostrar um botão de menu */
    .navbar {
        display: none; /* A navegação completa é oculta */
        /* Para mostrar: você precisará de JavaScript ou de um checkbox CSS */
    }

    /* Ajustar ícones para ficarem maiores em telas menores, se necessário */
    .icons {
        gap: 0.5rem;
    }
    /* Faz o ícone do menu aparecer */
    .menu-btn {
        display: block; 
        order: 3; /* Garante que ele fique do lado direito (opcional) */
        z-index: 1001; /* Garante que esteja acima de tudo */
        margin-left: 1rem; /* Adiciona espaço entre ele e os outros ícones */
    }

    /* Ajuste para o layout do cabeçalho mobile */
    .header > section {
        /* Para telas menores, se o menu-btn estiver antes do icons no HTML,
           pode ser necessário usar 'order' para reorganizar. 
           Se você colocar o menu-btn DEPOIS dos icons no HTML,
           pode remover o 'order: 3;' */
        justify-content: space-between; 
    }

    /* Oculta a navbar em linha para mobile (como já fizemos) */
    .navbar {
        display: none; 
        
        /* O estilo abaixo é o que será aplicado quando a navbar estiver ATIVA */
        position: absolute;
        top: 100%; /* Abaixo do header */
        left: 0;
        right: 0;
        background-color: var(--primary-color); 
        flex-direction: column; /* Links empilhados */
        text-align: center;
        transition: transform 0.3s ease-out;
    }

    .navbar a {
        display: block;
        padding: 1rem 0;
        margin: 0 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Classe a ser adicionada por JavaScript quando o menu for clicado */
    .navbar.active {
        display: flex; /* Exibe a navbar no modo coluna */
    }


    /* --- Seção About --- */
    .about .row {
        flex-direction: column; /* Empilha a imagem e o texto */
        gap: 1rem;
    }

    /* O texto overlay agora deve aparecer APÓS a imagem e com largura total */
    .about .content {
        position: static; /* Volta para o fluxo normal */
        transform: none;
        width: 100%; /* Ocupa a largura total abaixo da imagem */
        max-width: 100%;
        background-color: transparent; /* Remove o fundo semi-transparente */
        color: var(--text-color); /* Usa a cor de texto padrão */
        padding: 0;
        text-align: center;
    }
    
    .about .content p {
        text-align: center;
    }
    
    /* A imagem pode precisar de margem inferior se o .content estiver estático */
    .container-image {
        margin-bottom: 1rem;
    }

    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 1rem;
    }

    /* --- Footer (SOLUÇÃO para o H3) --- */
    .footer {
        flex-direction: column; /* Empilha o conteúdo verticalmente */
        padding: 20px;
    }

    /* Ocupa 100% da largura em telas menores */
    .footer-left,
    .footer-right {
        width: 100%;
        text-align: center; /* **SOLUÇÃO: Centraliza o texto das colunas** */
        margin-bottom: 20px;
    }

    /* Centraliza o TÍTULO do footer e ajusta a margem */
    .footer-right h3 {
        margin-top: 20px; /* Adiciona espaçamento entre as colunas empilhadas */
        text-align: center; /* **SOLUÇÃO: Centraliza o h3** */
    }

    /* Centraliza os parágrafos e lista de contatos do footer */
    .footer-left p,
    .footer-right p {
        text-align: center;
    }
    
    /* Centraliza o mapa e ajusta sua largura */
    .map-container {
        margin: 20px auto; /* Centraliza horizontalmente */
        width: 100%; /* Ocupa toda a largura */
        height: 200px; /* Altura reduzida */
    }
    
    /* Centraliza a lista de ícones sociais */
    .social-list {
        justify-content: center;
    }
}