/* ==========================================================
   ILHA ATIVA - RESPONSIVIDADE E UX MOBILE (Celulares e Tablets)
   ========================================================== */

/* Tablets e Telas Médias (Até 768px) */
@media (max-width: 768px) {
    
    /* Cabeçalho mais enxuto */
    .header-flex {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .nav-links {
        gap: 10px;
        justify-content: center;
        width: 100%;
    }

    .nav-links a {
        font-size: 0.85rem;
        padding: 8px 12px; /* Botões maiores para facilitar o toque */
    }

    /* Ajuste da altura do mapa para caber na tela do celular sem rolar infinito */
    #mapa {
        height: 380px;
    }

    .intro h2 {
        font-size: 1.4rem;
    }

    .intro p {
        font-size: 0.9rem;
    }
}

/* Celulares Menores (Até 480px) */
@media (max-width: 480px) {

    .container {
        width: 92%; /* Aproveita melhor o espaço das bordas */
    }

    #mapa {
        height: 320px; /* Altura ideal para telas pequenas */
        border-radius: 8px;
    }

    /* Transformando a navegação em botões horizontais bem definidos */
    .nav-links {
        display: flex;
        justify-content: space-around;
        background-color: var(--light-bg);
        padding: 5px;
        border-radius: 8px;
    }

    .nav-links a {
        font-size: 0.8rem;
        padding: 6px 8px;
    }

    .btn-primary {
        width: 100%; /* Botão ocupa toda a largura no celular */
        padding: 14px;
    }
}