/*
 * Correções específicas para mobile (max-width: 991px)
 * Requisitos:
 * 1. HERO - Conteúdo 100% centralizado horizontalmente.
 * 2. HERO - Imagem centralizada e com largura controlada.
 * 3. REMOVER SCROLL HORIZONTAL NO MOBILE (overflow-x: hidden).
 */

/* 3. REMOVER SCROLL HORIZONTAL NO MOBILE */
html, body {
    overflow-x: hidden !important;
}

/* 1. HERO - VERSÃO MOBILE (max-width: 991px) */
@media (max-width: 991px) {
    
    /* Garante que o conteúdo do hero (texto e botões) fique centralizado */
    .hero-content-mobile-fix {
        text-align: center !important;
    }

    /* Garante que o H1 e o parágrafo fiquem centralizados (reforçando o text-center) */
    .hero-h1-mobile-fix,
    .hero-p-mobile-fix {
        text-align: center !important;
    }

    /* Centraliza os botões */
    .hero-btns {
        justify-content: center !important;
    }

    /* Centraliza a imagem e controla sua largura */
    .hero-image-mobile-fix {
        /* Centraliza o bloco da imagem */
        margin-left: auto;
        margin-right: auto;
        /* Controla a largura máxima para não estourar a tela */
        max-width: 300px; /* Valor arbitrário seguro, pode ser ajustado se necessário */
        width: 100%;
        /* Garante que a imagem em si não estoure o container */
        padding: 0 15px; /* Adiciona um padding para evitar que a imagem toque as bordas da tela */
    }

    .hero-image-mobile-fix img {
        width: 100%;
        height: auto;
    }

    /* Correção de margens e paddings que podem causar scroll horizontal */
    .container, .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Remove margens laterais negativas de rows */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}