/* Solução definitiva para remover qualquer espaço entre o header e a imagem principal */

/* Reset geral */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ajustes específicos para o header */
header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 70px !important;
    z-index: 1000 !important;
    background-color: #ffffff !important;
}

/* Ajustes para o banner principal */
.hero-banner {
    position: relative !important;
    margin-top: 70px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Ajustes para a imagem principal */
.imagem-principal {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.imagem-principal img {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ajustes para dispositivos móveis */
@media (max-width: 768px) {
    header {
        position: absolute !important;
    }

    .hero-banner {
        margin-top: 0 !important;
    }
    
    .imagem-principal img.imagem-desktop {
        display: none !important;
    }
    
    .imagem-principal img.imagem-mobile {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Esconder as tags br em telas pequenas */
    .hero-banner + br,
    .hero-banner + br + br,
    .hero-banner + br + br + br,
    .hero-banner + br + br + br + br,
    .hero-banner + br + br + br + br + br {
        display: none !important;
    }
}