@media(max-width:768px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .header .container{
        position:relative;
    }

    .menu-toggle{
        display:block;
        background:none;
        border:none;
        font-size:34px;
        color:var(--color-principal);
        cursor:pointer;
        z-index:1001;
    }

    .menu{
        position:absolute;
        top:100%;
        right:0;
        width:230px;
        background:white;
        display:none;
        flex-direction:column;
        gap:0;
        padding:15px 0;
        border-radius:0 0 18px 18px;
        box-shadow:0 15px 35px rgba(0,0,0,.15);
        z-index:1000;
    }

    .menu.menu--open{
        display:flex;
    }

    .menu a{
        padding:14px 22px;
        color:var(--color-principal);
    }

    .hero,
    .hero-overlay{
        width:100%;
        max-width:100vw;
        overflow:hidden;
    }

    .hero-content{
        width:100%;
        max-width:100%;
        padding:0 24px;
        box-sizing:border-box;
        text-align:center;
    }

    .hero-content h1,
    .hero-title{
        font-size:40px !important;
        line-height:.9 !important;
        letter-spacing:0 !important;
        margin:0 !important;
        padding:0 !important;
        max-width:100% !important;
        white-space:normal !important;
        overflow-wrap:normal !important;
        word-break:normal !important;
    }

    .hero-content h2{
        font-size:20px !important;
        margin:18px 0 10px;
    }

    .hero-content p{
        font-size:16px;
        margin:14px 0;
    }

    .hero-content span{
        display:block;
        font-size:16px;
        max-width:100%;
        margin:18px auto;
    }

    .hero-content .footer-link{
        display:block;
        width:100%;
        max-width:100%;
        font-size:17px;
        margin:16px 0;
        white-space:normal;
    }

    .btn{
        padding:13px 28px;
        font-size:15px;
    }
}

@media(max-width:420px){

    .hero-content h1,
    .hero-title{
        font-size:36px !important;
    }

    .hero-content{
        padding:0 18px;
    }
}