.popup {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0rem);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, visibility 0.4s ease;

    /* Quando o popup abre */
    &.aberto {
        visibility: visible;
        pointer-events: auto;
        background-color: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(0.5rem);

        & .caixa-popup {
            opacity: 1;
            transform: scale(1);

            & .imagem-popup {
                opacity: 1;
                transform: translateY(0);
            }

            & .botao-popup {
                opacity: 1;
                transform: translateY(0);
            }
        }

    }

    & .caixa-popup {
        width: 100%;
        height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        /* Estado inicial + Tempo de transição + Delay individual */
        opacity: 0;
        transform: scale(0.9);
        transition: opacity 0.5s ease, transform 0.5s ease;
        transition-delay: 0.1s;
        /* 1º: Caixa */

        & .imagem-popup {
            position: absolute;
            display: flex;
            width: 400px;
            opacity: 0;
            transform: translateY(-20px);
            transition: opacity 0.5s ease, transform 0.5s ease;
            transition-delay: 0.3s;
            /* 2º: Imagem */

            & img {
                border-radius: 25px;
                width: 100%;
            }
        }

        & .botao-popup {
            position: absolute;
            bottom: -20%;
            background-color: var(--vermelho);
            color: var(--cinza-claro);
            font-size: 32px;
            height: 80px;
            width: 250px;
            border-radius: 50px;
            cursor: pointer;
            border: none;

            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease, transform 0.5s ease, background-color 0.2s ease;
            transition-delay: 0.7s;
            /* 4º: Botão */

            &:hover {
                background-color: #f70008;
                transition: none;
            }
        }
    }
}

/* Responsividade mantida igual */

@media screen and (max-width: 400px) {
    .popup {
        & .caixa-popup {

            & .imagem-popup {
                width: 300px;
            }

            & .botao-popup {
                bottom: 0px;
                height: 50px;
                width: 150px;
                font-size: 18px;
            }

        }
    }

}

@media screen and (max-height: 450px) {
    .popup {
        & .caixa-popup {
            height: 230px;

            & .imagem-popup {
                width: 250px;
            }

            & .botao-popup {
                bottom: 0px;
                left: 10px;
                height: 50px;
                width: 150px;
                font-size: 18px;
            }
        }
    }
}