/* Correção específica para remover o espaço branco entre o header e o banner */

/* Remover margens e paddings do body */
html body {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ajustar o header */
html body header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    height: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ajustar o banner para começar logo abaixo do header */
html body main .hero-banner {
    margin-top: 70px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* Garantir que o conteúdo comece abaixo do header */
html body main {
    padding: 0 !important;
    margin: 0 !important;
}

/* Ajuste para telas grandes */
@media (min-width: 769px) {
    html body main {
        padding-top: 0px !important;
       
    }
}

/* Ajuste para telas pequenas */
@media (max-width: 768px) {
    html body main {
        padding-top: 0 !important;
    }

    html body main .hero-banner {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    html body main .hero-banner .imagem-principal {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 400px !important;
        height: 400px !important;
    }

    html body main .hero-banner .imagem-principal img.imagem-mobile {
        display: block !important;
        height: 400px !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    html body main .hero-banner + section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Garantir que a imagem principal ocupe todo o espaço disponível */
html body main .hero-banner .imagem-principal {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    
}

/* Ajustar as imagens dentro do banner */
html body main .hero-banner .imagem-principal img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Esconder a imagem mobile em telas grandes */
html body main .hero-banner .imagem-principal .imagem-mobile {
    display: none !important;
}

/* Mostrar apenas a imagem desktop em telas grandes */
html body main .hero-banner .imagem-principal .imagem-desktop {
    display: block !important;
}

/* Regras específicas para telas pequenas */
@media (max-width: 768px) {
    /* Esconder a imagem desktop em telas pequenas */
    html body main .hero-banner .imagem-principal .imagem-desktop {
        display: none !important;
    }
    
    /* Mostrar a imagem mobile em telas pequenas */
    html body main .hero-banner .imagem-principal .imagem-mobile {
        display: block !important;
    }
}