/* =====================================================
   RESPONSIVE MODERNO - INVERSIONES ARZ
   ===================================================== */

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

@media (max-width: 900px){
    header{
        padding:14px 18px;
    }

    #menu{
        gap:18px;
    }

    .texto{
        padding:0 18px;
    }

    .vinculos{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px){
    header{
        min-height:auto;
        flex-wrap:wrap;
        justify-content:center;
        gap:10px;
    }

    .logo2{width:48px;height:48px;}
    .logo{font-size:25px;}

    #menu{
        order:3;
        width:100%;
        margin-left:0;
        justify-content:center;
        flex-wrap:wrap;
        gap:8px 18px;
    }

    .buttons{
        order:2;
        width:auto;
    }

    .btn{
        min-height:40px;
        padding:8px 14px;
        font-size:14px;
    }

    .contenedor{
        min-height:360px;
        height:55vh;
    }

    .pagina_carrusel{
        padding:30px 14px 50px;
    }

    .carousel{border-radius:14px;}

    .carousel-item img{
        height:300px;
    }

    .texto{
        margin-top:38px;
        padding:0 4px;
    }

    .texto h3{
        font-size:26px;
        margin-bottom:22px;
    }

    .vinculos{
        grid-template-columns:1fr;
        gap:14px;
    }

    .vinculos a{
        min-height:125px;
        padding:20px 58px 20px 20px;
        font-size:16px;
    }

    .vinculos a::after{
        right:14px;
        bottom:14px;
        width:36px;
        height:36px;
    }
}

@media (max-width: 400px){
    .logo{font-size:22px;}
    .buttons{width:100%; justify-content:center;}
    .btn{flex:1; max-width:160px;}
    #menu a{font-size:13px;}
    .carousel-item img{height:240px;}
}