/* CSS para melhorar a responsividade da seção hero */

/* Estilos gerais para a seção header */
#header18-1i {
    /* Tente um desses caminhos para a imagem: */
    background-image: url('../images/capa-original-banner-1960x1200.webp');
    /* OU se não funcionar, tente: url('../../assets/images/capa-original-banner-1960x1200.webp'); */
    /* OU: url('/assets/images/capa-original-banner-1960x1200.webp'); */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* Mudança importante para mobile */
    min-height: 100vh;
    position: relative;
}

/* Ajustes para o container */
#header18-1i .container-fluid {
    padding: 2rem 1rem;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Melhorar o fundo do texto */
.text-background {
    background-color: rgba(0, 0, 0, 0.8);
    padding: 1.5rem;
    border-radius: 10px;
    margin: 1rem 0;
    /* backdrop-filter removido para evitar blur em mobile */
}

/* Responsividade para tablets */
@media (max-width: 992px) {
    #header18-1i {
        min-height: 80vh;
        background-attachment: scroll;
    }
    
    .text-background {
        padding: 1.2rem;
        margin: 0.8rem 0;
    }
    
    #header18-1i .mbr-section-title {
        font-size: 2.5rem !important;
        line-height: 1.2;
    }
    
    #header18-1i .mbr-text {
        font-size: 1.1rem !important;
        line-height: 1.4;
    }
}

/* Responsividade para mobile */
@media (max-width: 768px) {
    #header18-1i {
        /* Trocar para a imagem mobile */
        background-image: url('../images/capa-mobile2.webp');
        /* OU se não funcionar, tente: url('../../assets/images/capa-mobile.webp'); */
        /* OU: url('/assets/images/capa-mobile.webp'); */
        min-height: 100vh;
        background-position: center center;
        background-size: cover;
        background-attachment: scroll;
    }
    
    #header18-1i .container-fluid {
        padding: 1rem 0.5rem;
        justify-content: center;
    }
    
    #header18-1i .content-wrap {
        text-align: center;
        padding: 1rem;
    }
    
    .text-background {
        background-color: rgba(0, 0, 0, 0.85);
        padding: 1rem;
        margin: 1rem 0;
        border-radius: 8px;
        /* Força anti-aliasing para texto mais nítido */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    #header18-1i .mbr-section-title {
        font-size: 2rem !important;
        line-height: 1.1;
        margin-bottom: 1rem !important;
    }
    
    #header18-1i .mbr-text {
        font-size: 0.95rem !important;
        line-height: 1.4;
        margin-bottom: 1.5rem !important;
        /* Força nitidez do texto em mobile */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-weight: 500;
        letter-spacing: 0.3px;
    }
    
    /* Ajustes nos botões para mobile */
    #header18-1i .mbr-section-btn {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        margin-top: 1.5rem;
    }
    
    #header18-1i .mbr-section-btn .btn {
        width: 100%;
        padding: 0.8rem 1rem;
        font-size: 0.9rem !important;
        border-radius: 25px;
        font-weight: bold;
    }
}

/* Para telas muito pequenas */
@media (max-width: 480px) {
    #header18-1i {
        min-height: 100vh;
        background-position: center 30%; /* Ajusta a posição da imagem */
    }
    
    #header18-1i .container-fluid {
        padding: 0.5rem;
    }
    
    .text-background {
        padding: 0.8rem;
        margin: 0.5rem 0;
    }
    
    #header18-1i .mbr-text {
        font-size: 0.85rem !important;
        line-height: 1.25;
    }
    
    #header18-1i .mbr-section-btn .btn {
        padding: 0.7rem 0.8rem;
        font-size: 0.8rem !important;
    }
}

/* Ajustes para remover quebras de linha desnecessárias no mobile */
@media (max-width: 768px) {
    #header18-1i .mbr-text br {
        display: none;
    }
}

/* Melhorar a legibilidade em todas as telas */
#header18-1i .mbr-white {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
    /* Melhor renderização de texto */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Garantir que o overlay não interfira */
#header18-1i .mbr-overlay {
    opacity: 0.3 !important;
}