/* ==================== BANNER MOBILE SPACING FIX ==================== */
/* Corrige o espaçamento excessivo do banner em dispositivos móveis */

@media (max-width: 767px) {

    /* Reduzir significativamente o padding e margin do banner */
    div[style*="padding: 60px 20px"] {
        padding: 20px 10px !important;
    }

    div[style*="margin: 20px 0"] {
        margin: 10px 0 !important;
    }

    /* Reduzir ainda mais em telas muito pequenas */
    @media (max-width: 480px) {
        div[style*="padding: 60px 20px"] {
            padding: 15px 5px !important;
        }

        div[style*="margin: 20px 0"] {
            margin: 5px 0 !important;
        }
    }

    /* Ajustar o espaçamento do subtítulo */
    div[style*="margin: 0 0 40px 0"] {
        margin: 0 0 20px 0 !important;
    }

    /* Ajustar o espaçamento do título */
    div[style*="margin: 0 0 20px 0"] {
        margin: 0 0 10px 0 !important;
    }

    /* Reduzir o tamanho do badge */
    div[style*="padding: 8px 20px"] {
        padding: 4px 10px !important;
        margin-bottom: 10px !important;
    }

    /* Ajustar os botões para ocupar menos espaço */
    div[style*="gap: 15px"] {
        gap: 10px !important;
    }

    a[style*="padding: 16px 32px"] {
        padding: 12px 20px !important;
    }

    /* Ajustar a altura do banner para se adaptar ao conteúdo no mobile */
    .hero-banner {
        height: auto !important;
        min-height: auto !important;
    }

    section.hero-banner {
        height: auto !important;
        min-height: auto !important;
    }

    /* Remover altura fixa do banner no mobile */
    body .container.mx-auto.px-4 section.hero-banner,
    body section.hero-banner.relative.w-full,
    .container.mx-auto.px-4 .hero-banner,
    section.hero-banner,
    .hero-banner {
        min-height: auto !important;
        height: auto !important;
    }

    /* Sobrescrever regras específicas do index-flat.css */
    @media (max-width: 640px) {

        body .container.mx-auto.px-4 section.hero-banner,
        body section.hero-banner.relative.w-full,
        .container.mx-auto.px-4 .hero-banner,
        section.hero-banner,
        .hero-banner {
            min-height: auto !important;
            height: auto !important;
            margin-top: 0 !important;
        }
    }

    /* Sobrescrever regras para telas médias */
    @media (min-width: 641px) and (max-width: 768px) {

        body .container.mx-auto.px-4 section.hero-banner,
        body section.hero-banner.relative.w-full,
        .container.mx-auto.px-4 .hero-banner,
        section.hero-banner,
        .hero-banner {
            min-height: auto !important;
            height: auto !important;
            margin-top: 0 !important;
        }
    }

    /* Sobrescrever regras para telas desktop */
    @media (min-width: 769px) {

        body .container.mx-auto.px-4 section.hero-banner,
        body section.hero-banner.relative.w-full,
        .container.mx-auto.px-4 .hero-banner,
        section.hero-banner,
        .hero-banner {
            min-height: auto !important;
            height: auto !important;
        }
    }

    /* Sobrescrever regras específicas do flat-harmony.css */
    .hero-banner {
        min-height: auto !important;
    }

    @media (max-width: 640px) {
        .hero-banner {
            min-height: auto !important;
        }
    }

    /* Corrigir especificidade máxima para sobrescrever inline styles */
    .hero-banner[style*="margin-top"],
    section.hero-banner[style*="margin-top"] {
        margin-top: 0 !important;
    }

    /* Garantir que o banner se adapte à altura do conteúdo */
    .banner-image-container,
    .banner-video-container,
    .banner-slide,
    .banner-carousel-wrapper {
        height: auto !important;
    }

    /* Ajustar o container do banner carousel */
    .banner-carousel-container {
        height: auto !important;
        min-height: auto !important;
    }

    /* Corrigir o estilo inline do banner */
    section.hero-banner.relative.w-full.overflow-hidden.flex.items-center.justify-center.px-4.md\:px-0[style*="margin-top: 80px"] {
        margin-top: 0 !important;
    }
}

/* Ajuste para mover o banner um pouco para cima no mobile */
@media (max-width: 767px) {
    .hero-banner {
        margin-top: 140px !important;
        /* Move o banner mais para baixo */
    }

    section.hero-banner {
        margin-top: 140px !important;
        /* Move o banner mais para baixo */
    }
}