/* --- FATORIAL - AGGRESSIVE MOBILE OVERRIDES (CORRECTED) --- */

@media (max-width: 920px) {

    /* --- ISSUE 1: TEXT WRAPPING --- */
    #servicos p span {
        white-space: normal !important;
        word-break: break-word !important;
        display: inline-block !important;
        width: 100% !important;
    }

    /* --- ISSUE 2: HEADER LOGO --- */
    .navbar-brand {
        margin-left: 0 !important;
        padding-left: 15px !important;
    }

    /* --- ISSUE 3: HERO SECTION (BANNER & LOGO) --- */
    
    /* 1. Estrutura da Seção */
    .hero-section-new {
        display: flex !important;
        flex-direction: column !important; /* Imagem em cima, Texto embaixo */
        min-height: auto !important;
        padding: 0 !important;
        position: relative !important;
        background-color: var(--fatorial-blue-dark);
    }

    /* 2. Banner (Imagem de Fundo) */
    .hero-image-col {
        display: block !important;
        width: 102% !important;
        height: 280px !important;      /* Altura do banner no mobile */
        min-height: 280px !important;
        
        /* Imagem explícita para garantir que carrega */
        background-image: url('../images/a.jpg') !important;
        background-size: cover !important;
        background-position: center center !important;
        
        /* Remover curvas - Deixar reto */
        border-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-top-right-radius: 0 !important;
        
        margin: 0 !important;
        opacity: 1 !important;        /* Força visibilidade contra animações */
        visibility: visible !important;
    }

    /* 3. Logo Sobre o Banner */
    .hero-logo {
        display: block !important;
        position: absolute !important;
        
        /* Centralizar na parte da imagem (metade de 280px = 140px) */
        top: 140px !important; 
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        
        width: 60% !important;        /* Tamanho da logo */
        max-width: 200px !important;
        z-index: 20 !important;       /* Garante que fica acima da imagem */
        opacity: 0.3 !important;        /* Força visibilidade */
        margin: 0 !important;
    }

/* 4. Conteúdo de Texto (Abaixo do Banner) */
    .hero-content-col {
        /* Aumentado o topo e base para 100px para não ficar espremido */
        padding: 2500px 20px !important; 
        
        text-align: center !important;
        background-color: transparent !important;
        flex: 1 1 auto !important; /* Garante que o bloco ocupe espaço vertical */
    }

    .hero-content-col h1 {
        font-size: 1.8rem !important;
    }

    /* Ajuste do botão de contato flutuante */
    .whatsapp-float {
        bottom: 20px !important;
        right: 20px !important;
    }
}