/* =========================================
   TABLETS
========================================= */

@media screen and (max-width: 768px){

    .main-wrapper{

        max-width:100%;

        padding:

        20px
        15px
        60px;

    }


    .card-content{

        padding:25px;

    }


    .logo-radio{

        width:160px;

    }


    #caratula-img{

        width:220px;

        height:220px;

    }


    #trackInfo{

        font-size:18px;

    }


    .card-section{

        padding:25px;

    }

}



/* =========================================
   MÓVILES
========================================= */

@media screen and (max-width:576px){

    .main-wrapper{

        padding:

        15px
        10px
        50px;

    }


    .reproductor-salsa{

        border-radius:25px;

    }


    .card-content{

        padding:20px;

    }


    .logo-radio{

        width:140px;

    }


    .mini-title{

        font-size:12px;

        letter-spacing:2px;

    }


    #trackInfo{

        font-size:17px;

        line-height:1.5;

    }


    #caratula-img{

        width:190px;

        height:190px;

    }


    .mensaje-logo{

        font-size:13px;

    }


    #btnPlayPausa{

        height:55px;

        font-size:20px;

    }


    .redes-compartir-grid{

        grid-template-columns:

        repeat(4,1fr);

        gap:10px;

    }


    .redes-compartir-grid button{

        height:50px;

        font-size:18px;

        border-radius:15px;

    }


    .social-grid{

        grid-template-columns:1fr;

    }


    .social-card{

        height:55px;

    }


    .card-section{

        margin-top:20px;

        padding:20px;

        border-radius:25px;

    }


    .card-section h2{

        font-size:20px;

    }


    .btn-app{

        height:55px;

        font-size:16px;

    }


    .spectrum-container{

        height:80px;

    }

}



/* =========================================
   MÓVILES PEQUEÑOS
========================================= */

@media screen and (max-width:400px){

    .logo-radio{

        width:120px;

    }


    #caratula-img{

        width:170px;

        height:170px;

    }


    #trackInfo{

        font-size:16px;

    }


    .card-section{

        padding:18px;

    }


    .card-section h2{

        font-size:18px;

    }


    .btn-app{

        font-size:15px;

    }

}



/* =========================================
   PANTALLAS GRANDES
========================================= */

@media screen and (min-width:1200px){

    .main-wrapper{

        max-width:700px;

    }

}