/* Estilos responsivos para a seção de contato */
@media screen and (max-width: 768px) {
    #contacto .contacto-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    #contacto .info-contacto,
    #contacto .formulario-contacto {
        padding: 25px !important;
    }
    
    #contacto h2 {
        font-size: 1.5em !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }
    
    #contacto .mapa iframe {
        height: 300px !important;
    }
    
    /* Garantir que o conteúdo não ultrapasse a largura da tela */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    
    /* Ajustar padding para conteúdo em telas pequenas */
    .info-item, .campo-formulario {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

@media screen and (max-width: 480px) {
    #contacto .info-contacto,
    #contacto .formulario-contacto {
        padding: 15px !important;
    }
    
    #contacto .info-item {
        margin-bottom: 15px !important;
    }
    
    #contacto .mapa iframe {
        height: 250px !important;
    }
    
    /* Ajustes adicionais para telas muito pequenas */
    body {
        overflow-x: hidden !important;
    }
    
    /* Reduzir tamanho de fonte para caber melhor */
    #contacto p, #contacto label, #contacto input, #contacto select, #contacto textarea {
        font-size: 0.9em !important;
    }
    
    /* Centralizar todos os títulos em telas pequenas */
    h1, h2, h3 {
        text-align: center !important;
    }
}