@charset "UTF-8";

.hero {
    width: 100%;
    height: 80vh;
    position: relative;
    overflow: hidden;
    margin-bottom: 50px;

    .overlay {
        display: block;
        position: absolute;
        align-items: center;
        justify-content: center;
        z-index: 1;
        opacity: 0;
        width: 100%;
        height: 100%;
        transition: opacity 0.7s ease-in-out;

        img {
            width: 100%;
            margin-top: 5%;
            height: auto;
            object-fit: cover;
            filter: brightness(0.7);
        }
    }

    .overlay.active { opacity: 1; z-index: 2; }
}

/* Corrigir */
@media (max-width: 768px) {
    .hero {
        height: 50vh;
        margin: 0;
        padding: 0;
    }
}