.introducao {
    font-family: 'Roboto', sans-serif;

    padding-top: 100px;
    padding-bottom: 30px;

    padding-left: 8px;
    padding-right: 8px;

    overflow: hidden;
}

.introducao__container {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.introducao__container::after {
    content: '';
    position: absolute;
    top: 40%;
    z-index: -1;

    width: 150%;
    height: 100px;

    transform: rotateZ(10deg);

    background-image: url('../img/faixa.png');
}

.introducao__container::before {
    content: '';
    position: absolute;
    top: 40%;
    z-index: -1;

    width: 150%;
    height: 100px;

    transform: rotateZ(-20deg);

    background-image: url('../img/faixa.png');
}

.introducao__container-titulo {
    font-size: 30px;
    color: #737373;

    text-align: center;
}

.introducao__container-subtitulo {
    font-size: 18px;
    color: #737373;
    margin-top: 5px;

    text-align: center;

    max-width: 400px;
}

.introducao__conteudo {
    position: relative;

    background-color: white;

    padding: 30px 20px 50px 20px;

    border-radius: 8px;
    border: solid 1px #A1A1A1;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 30px;
}

.introducao__conteudo p {
    max-width: 360px;
    font-size: 18px;

    text-indent: 20px;
    margin-bottom: 10px;

    color: #1C1C1C;
}

.introducao__conteudo p span {
    font-size: 22px;
    font-weight: 700;

    color: #FFC107;
}

.introducao__conteudo-video {
    position: relative;
}

.introducao__conteudo-video video {
    width: 100%;
    max-width: 450px;

    border-radius: 10px;
}

.introducao__conteudo-video-deepfake {
    position: absolute;

    animation: deepfake 5s ease-in infinite;
}

.introducao__conteudo-video-original {
    margin-bottom: 40px;
}

@keyframes deepfake {
    0% {
        clip-path: inset(0 0 0 50%);
    }

    16% {
        clip-path: inset(0 0 0 80%);
    }

    32% {
        clip-path: inset(0 0 0 20%);
    }

    48% {
        clip-path: inset(0 0 0 50%);
    }

    100% {
        clip-path: inset(0 0 0 50%);
    }
}

.introducao__conteudo__decoracao-perigo {
    position: absolute;
    bottom: 0;
    right: 0;

    transform: translateX(40%) translateY(10%);

    width: 200px;
}

@media screen and (max-width: 515px) {
    .introducao {
        padding-top: 100px;
        padding-bottom: 0px;

        padding-left: 8px;
        padding-right: 8px;
    }

    .introducao__container {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .introducao__container::after {
        top: 25%;
    }

    .introducao__container::before {
        top: 30%;
    }

    .introducao__container-subtitulo {
        max-width: 400px;
    }

    .introducao__conteudo {
        position: relative;

        background-color: transparent;

        padding: 30px 10px 0px 10px;

        border: none;

        margin-top: 0px;
    }

    .introducao__conteudo p {
        margin-bottom: 0px;
    }

    .introducao__conteudo-video {
        position: relative;
    }

    .introducao__conteudo-video::after {
        position: absolute;
        content: '';
        bottom: 20px;
        right: 0;

        width: 20%;
        max-width: 100px;
        height: 38%;
        max-height: 120px;

        background-image: url(../img/icone_perigo.png);
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .introducao__conteudo-video video {
        width: 100%;
        max-width: 450px;

        border-radius: 10px;
    }

    .introducao__conteudo-video-original {
        margin-bottom: 30px;
    }

    .introducao__conteudo__decoracao-perigo {
        display: none;
    }
}