/*==================================================
        LA TÓXICA RADIO
        MOBILE DESIGN SYSTEM
        FONDO — BERENJENA / MORADO OSCURO
==================================================*/


/*==================================================
        BODY
==================================================*/

html{

    min-height:100%;

    background:#120A18;

}


body{

    width:100%;

    min-height:100vh;

    margin:0;

    padding:0;

    background:#120A18;

    color:#FFFFFF;

    overflow-x:hidden;

}


/*==================================================
        APP MOBILE
==================================================*/

#mobile-app{

    position:relative;

    width:100%;

    min-height:100vh;

    background:

        linear-gradient(
            180deg,
            #120A18 0%,
            #24112F 45%,
            #321943 100%
        );

    color:#FFFFFF;

}


/*==================================================
        CAPA VISUAL DE FONDO
==================================================*/

#mobile-app::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:0;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,.07),
            transparent 38%
        );

}


/*==================================================
        CONTENIDO PRINCIPAL
==================================================*/

#mobile-main{

    position:relative;

    width:100%;

    min-height:100vh;

    padding-top:78px;

    padding-bottom:90px;

    background:transparent;

    color:#FFFFFF;

    z-index:1;

}


/*==================================================
        CONTENEDOR PRINCIPAL
==================================================*/

#mobile-content{

    position:relative;

    width:100%;

    min-height:auto;

    padding-bottom:20px;

    background:transparent;

    color:#FFFFFF;

    z-index:1;

}


/*==================================================
        SECCIONES
==================================================*/

#mobile-content > section,
#mobile-content > div,
#mobile-content > article{

    position:relative;

    z-index:1;

}


/*==================================================
        IMÁGENES
==================================================*/

img{

    display:block;

    max-width:100%;

    height:auto;

}


/*==================================================
        ENLACES
==================================================*/

a{

    text-decoration:none;

    color:inherit;

}


/*==================================================
        LISTAS
==================================================*/

ul,
ol{

    list-style:none;

}


/*==================================================
        BOTONES
==================================================*/

button{

    font-family:inherit;

}


/*==================================================
        PLAYER
        SOLO POSICIONAMIENTO
        EL DISEÑO LO CONTROLA player.css
==================================================*/

#player-container{

    position:fixed !important;

    left:0;

    right:0;

    bottom:0;

    width:100%;

    z-index:9999;

}


/*==================================================
        SEGURIDAD PLAYER
==================================================*/

#player-container > *{

    position:relative;

}


/*==================================================
        AISLAMIENTO DEL CONTENIDO
==================================================*/

#mobile-main,
#mobile-content{

    isolation:isolate;

}


/*==================================================
        FOOTER
==================================================*/

#mobile-app footer{

    background:transparent;

    color:#FFFFFF;

}


/*==================================================
        PANTALLAS PEQUEÑAS
==================================================*/

@media(max-width:420px){

    #mobile-main{

        padding-top:74px;

        padding-bottom:90px;

    }

}


/*==================================================
        PANTALLAS MUY PEQUEÑAS
==================================================*/

@media(max-width:360px){

    #mobile-main{

        padding-top:70px;

        padding-bottom:90px;

    }

}


/*==================================================
        DESKTOP
==================================================*/

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

    #mobile-app{

        display:none;

    }

}