/* Fix para responsividade - Foco no enquadramento Mobile */

/* Prevenção global de overflow horizontal */
html, body {
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Prevenção de overflow apenas no mobile para não afetar o desktop */
@media (max-width: 1024px) {
    html, body {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #root {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Garantir que o container de contato não vaze */
    #contact .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Ajuste crucial para o card de contato (formulário e informações) */
    #contact .grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        gap: 1.5rem !important;
    }

    /* Forçar todos os elementos internos (cards, divs) a ficarem dentro do container */
    #contact div[class*="rounded-xl"],
    #contact form,
    #contact .grid > div {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Ajuste para inputs e botões não estourarem o card */
    #contact input, 
    #contact textarea, 
    #contact button {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Ajustes finos para telas muito pequenas (iPhone 13 mini, Galaxy S8) */
@media (max-width: 390px) {
    #contact .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Reduzir levemente o padding interno dos cards no mobile extremo */
    #contact div[class*="rounded-xl"] {
        padding: 1.25rem !important;
    }
}