@media screen and (max-width: 31.25em) { /*Telas de no máximo 500px de largura*/
    .container {
        width: initial;
        max-width: initial;
    }

    nav {
        padding: 0 .9em 0;
        display: flex;
    }

    nav .logo {
        max-width: 40px;
        margin-right: 70px;
    }

    header {
        max-width: 88%;
        transition: none;
    }

    header:hover {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid var(--border-glass);
    }

    .menu {
        font-size: .9em;
        justify-content: space-around;
        padding: 0 .2em;
        margin: .6em 0;
        gap: .5em;
        flex-grow: 1;
    }

    .btn-whats {
        bottom: 20px;
        right: 20px;
    }

    .btn-whats img {
        max-width: 50px;
    }

    .hero {
        flex-direction: column;
    }

    .main-apresentacao {
        order: 1;
    }

    .titulo-principal {
        font-size: 1.2rem;
        text-align: center;
        margin: 0;
    }
    
    .titulo-principal_destaque {
        text-align: center;
        font-size: 2.3rem;
    }

    .texto-gradiente.segundo{
        background: linear-gradient(
            135deg,
            #000000,
            #ffffff,
            #ffffff,
            #000000
        );

        background-size: 91%;

        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .texto-gradiente{
        background: linear-gradient(
            135deg,
            #000000,
            #ffffff,
            #ffffff,
            #ffffff,
            #000000
        );

        background-size: 97%;

        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    @keyframes pulsar {
        0% {
            transform: scale(1) translateX(0);
        }
        50% {
            transform: scale(1.05) translateX(0);
        }
        100% {
            transform: scale(1) translateX(0);
        }
    }

    .foto-main {
        order: 2;
    }

    .foto-main img {
        max-width: 370px;
    }

    .foto-main::after {
        content: none;
    }

    .img-background {
        max-width: 247px;
        bottom: 364px;
        left: 106px;
        opacity: .09;
    }

    .info {
        margin: 0;
    }

    .info-hero {
        font-size: .9em;
        margin: .3em auto;
        max-width: 90%;
    }

    .btns {
        display: flex;
        gap: 1rem;
        justify-content: space-around;
        margin: 1.1em auto;
    }

    .btns .btn-geral {
        font-size: .8em;
        padding: 1em;
        margin: 0;
    }

    .foto-main .icon-float.img-google-ads {
        max-width: 70px;
    }

    .foto-main .icon-float.img-cadeado {
        max-width: 30px;
    }

    .foto-main .icon-float.img-lupa {
        max-width: 50px;
    }

    .foto-main .icon-float.img-google-analytics {
        max-width: 40px;
    }

    .apresentacao-solucao {
        flex-direction: column;
    }

    .apresentacao-solucao img {
        width: 90%;
    }

    .sobre-imgs {
        flex-direction: column;
    }

    .content-info_nav {
        flex-direction: column;
    }

    .apresentacao-problema {
        padding: 1em;
    }

    .acrescimo-subtitulo {
        align-items: start;
    }

    .acrescimo-subtitulo .acrescimo-subtitulo_info {
        font-size: 1em;
        max-width: 70%;
    }

    .apresentacao-problema .info-problema_destaque {
        position: initial;
        max-width: 100%;
        text-align: center;
        margin: 2em 0;
        padding: .1em;
    }

    .apresentacao-problema .subtitulo {
        max-width: 100%;
        font-size: 2.6em;
    }

    .content-problemas {
        padding: 0 .8em;
        gap: 1.2em;
    }

    .content-problemas .card-black {
        flex-grow: 1;
        min-height: 130px;
        padding: .8em;
    }

    .content-problemas .card-black .info-menor {
        margin: .5em 0 0;
    }

}