/*=========================================================*
 * LA TOXICA RADIO
 * ESTILOS GLOBALES MOBILE
 *=========================================================*/

/*=========================================================*
 * GOOGLE FONT
 *=========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');


/*=========================================================*
 * RESET
 *=========================================================*/

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/*=========================================================*
 * VARIABLES
 *=========================================================*/

:root {
    --primary: #dce0e7;
    --primary-dark: #072C69;

    --accent: #FFD400;
    --accent-light: #FFE75A;

    --bg: #081526;

    --white: #FFFFFF;

    --live: #FF3131;

    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

    --radius: 20px;

    --transition: 0.30s ease;
}


/*=========================================================*
 * HTML
 *=========================================================*/

html {
    scroll-behavior: smooth;
    min-height: 100%;
    background: var(--bg);
}


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

body {
    width: 100%;
    min-height: 100%;

    font-family: 'Poppins', sans-serif;

    background: var(--bg);

    color: var(--white);

    overflow-x: hidden;

    line-height: 1.5;
}


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

#mobile-app {
    display: block;

    width: 100%;

    min-height: 100vh;

    position: relative;

    background-image: url("../assets/background/fondoapp.png");

    background-size: cover;

    background-position: center top;

    background-repeat: no-repeat;

    background-color: var(--bg);
}


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

#desktop-app {
    display: none;
}


/*=========================================================*
 * CONTENIDO MOBILE
 *=========================================================*/

#mobile-main {
    width: 100%;

    min-height: auto;

    padding-top: 70px;

    padding-bottom: 0;
}


#mobile-content {
    width: 100%;

    min-height: auto;

    padding-bottom: 0;
}


/*=========================================================*
 * CABINA
 * SIN ESPACIO INFERIOR
 *=========================================================*/

.cabina-section {
    margin-bottom: 0 !important;

    padding-bottom: 0 !important;
}


.cabina-card {
    margin-bottom: 0 !important;

    padding-bottom: 0 !important;
}


.cabina-whatsapp {
    margin-bottom: 0 !important;
}


/*=========================================================*
 * IMAGENES
 *=========================================================*/

img {
    display: block;

    max-width: 100%;

    height: auto;
}


/*=========================================================*
 * LINKS
 *=========================================================*/

a {
    text-decoration: none;

    color: inherit;
}


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

ul,
ol {
    list-style: none;
}


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

button {
    border: none;

    background: none;

    font-family: inherit;

    cursor: pointer;
}


/*=========================================================*
 * FORMULARIOS
 *=========================================================*/

input,
textarea,
select {
    outline: none;

    font-family: inherit;
}


/*=========================================================*
 * TITULOS
 *=========================================================*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 800;
}


/*=========================================================*
 * UTILIDADES
 *=========================================================*/

.hidden {
    display: none !important;
}


.center {
    display: flex;

    justify-content: center;

    align-items: center;
}


/*=========================================================*
 * SCROLLBAR
 *=========================================================*/

::-webkit-scrollbar {
    width: 6px;
}


::-webkit-scrollbar-thumb {
    background: var(--accent);

    border-radius: 999px;
}


/*=========================================================*
 * SELECCION
 *=========================================================*/

::selection {
    background: var(--accent);

    color: #000000;
}


/*=========================================================*
 * TRANSICIONES
 *=========================================================*/

button,
a {
    transition: var(--transition);
}


/*=========================================================*
 * PROMOCION DE BIENVENIDA
 *=========================================================*/

.promo-bienvenida {
    position: fixed;

    inset: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    box-sizing: border-box;

    background: rgba(0, 0, 0, 0.78);

    z-index: 99999;

    animation: promoFondoEntrada 0.45s ease-out both;
}


/*=========================================================*
 * CONTENEDOR PROMOCION
 *=========================================================*/

.promo-contenedor {
    position: relative;

    width: 100%;

    max-width: 420px;

    max-height: 90vh;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    animation:
        promoZoomEntrada 0.75s cubic-bezier(0.16, 1.25, 0.35, 1) both;
}


/*=========================================================*
 * IMAGEN PROMOCION
 *=========================================================*/

.promo-imagen {
    display: block;

    width: 100%;

    height: auto;

    max-width: 100%;

    max-height: 90vh;

    object-fit: contain;

    border-radius: 16px;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.65);

    animation:
        promoBrilloEntrada 1.1s ease-out both;
}


/*=========================================================*
 * BOTON CERRAR
 *=========================================================*/

.promo-cerrar {
    position: absolute;

    top: -12px;

    right: -12px;

    z-index: 5;

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 2px solid #FFFFFF;

    border-radius: 50%;

    background: #111111;

    color: #FFFFFF;

    font-family: Arial, sans-serif;

    font-size: 25px;

    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.55);

    opacity: 0;

    animation:
        promoCerrarEntrada 0.35s ease-out 0.55s forwards;
}


/*=========================================================*
 * EFECTO AL TOCAR
 *=========================================================*/

.promo-cerrar:active {
    transform: scale(0.88);
}


/*=========================================================*
 * ANIMACION FONDO PROMOCION
 *=========================================================*/

@keyframes promoFondoEntrada {

    0% {
        opacity: 0;

        background: rgba(0, 0, 0, 0);
    }

    100% {
        opacity: 1;

        background: rgba(0, 0, 0, 0.78);
    }
}


/*=========================================================*
 * ZOOM PRINCIPAL
 *=========================================================*/

@keyframes promoZoomEntrada {

    0% {
        opacity: 0;

        transform:
            scale(0.82)
            translateY(25px);
    }

    55% {
        opacity: 1;

        transform:
            scale(1.04)
            translateY(-3px);
    }

    75% {
        transform:
            scale(0.985)
            translateY(1px);
    }

    100% {
        opacity: 1;

        transform:
            scale(1)
            translateY(0);
    }
}


/*=========================================================*
 * BRILLO DE ENTRADA
 *=========================================================*/

@keyframes promoBrilloEntrada {

    0% {
        filter:
            brightness(0.55)
            saturate(0.75);
    }

    55% {
        filter:
            brightness(1.12)
            saturate(1.08);
    }

    100% {
        filter:
            brightness(1)
            saturate(1);
    }
}


/*=========================================================*
 * ANIMACION BOTON CERRAR
 *=========================================================*/

@keyframes promoCerrarEntrada {

    0% {
        opacity: 0;

        transform:
            scale(0.5)
            rotate(-25deg);
    }

    100% {
        opacity: 1;

        transform:
            scale(1)
            rotate(0deg);
    }
}


/*=========================================================*
 * MOVIL
 *=========================================================*/

@media (max-width: 480px) {

    .promo-bienvenida {
        padding: 16px;
    }


    .promo-contenedor {
        max-width: 100%;

        max-height: 88vh;
    }


    .promo-imagen {
        max-height: 88vh;

        border-radius: 14px;
    }


    .promo-cerrar {
        top: -9px;

        right: -9px;

        width: 34px;

        height: 34px;

        font-size: 23px;
    }
}


/*=========================================================*
 * PANTALLAS MUY PEQUENAS
 *=========================================================*/

@media (max-width: 360px) {

    .promo-bienvenida {
        padding: 12px;
    }


    .promo-contenedor {
        max-height: 86vh;
    }


    .promo-imagen {
        max-height: 86vh;

        border-radius: 12px;
    }


    .promo-cerrar {
        top: -8px;

        right: -8px;

        width: 32px;

        height: 32px;

        font-size: 21px;
    }
}


/*=========================================================*
 * CORRECCION FINAL DE ESPACIO INFERIOR
 *=========================================================*/

#mobile-main {
    padding-bottom: 0 !important;
}


#mobile-content {
    padding-bottom: 0 !important;
}


.cabina-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


.cabina-card {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


.cabina-whatsapp {
    margin-bottom: 0 !important;
}


/*=========================================================*
 * FONDO REAL DE LA APP
 * LA TOXICA RADIO
 *=========================================================*/

html,
body {
    background: #081526 !important;
}

#mobile-app {
    background-image: url("../assets/background/fondoapp.png") !important;
    background-color: #081526 !important;

    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;

    min-height: 100vh;
}