/* Fix específico para integração do banner com fundo transparente */

/* Reset completo para a imagem do banner */
.hero-image img {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 15px !important;
    box-shadow: 
        0 15px 30px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: 350px !important;
    height: auto !important;
    position: relative !important;
    z-index: 1 !important;
    margin: 0 auto !important;
}

/* Container da imagem */
.hero-image {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

/* Efeito de luz dourada ao redor - REMOVIDO */
.hero-image::before {
    display: none !important;
}

/* Efeito hover melhorado */
.hero-image:hover img {
    transform: scale(1.02) translateY(-5px) !important;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Efeito hover do círculo - REMOVIDO */
.hero-image:hover::before {
    display: none !important;
}

/* Garantir que não há fundo branco */
.hero-image img[src*="banner.png"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Fix para diferentes navegadores */
@supports (backdrop-filter: blur(1px)) {
    .hero-image img {
        backdrop-filter: none !important;
    }
}

/* Fix específico para WebKit */
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-image img {
    -webkit-backface-visibility: hidden !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Responsividade */
@media (max-width: 768px) {
    .hero-image {
        margin-top: 2rem !important;
    }
    
    .hero-image img {
        max-width: 280px !important;
        border: none !important;
        box-shadow: 
            0 10px 20px rgba(0, 0, 0, 0.3) !important;
    }
    
    .hero-image::before {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .hero-image img {
        max-width: 220px !important;
    }
}

/* Debug - remover em produção */
.hero-image {
    /* border: 2px dashed rgba(255, 0, 0, 0.3); */
}

.hero-image img {
    /* outline: 2px solid rgba(0, 255, 0, 0.3); */
}