/*import*/
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

    :root {
        /*Fonts*/
        --theme-font-family: "Montserrat", sans-serif;
        /*// http://mcg.mbitson.com/#!?tundora=%23t414141*/
        /*Navbar colors*/
        --ob-nav-text-color: #000000;
        --ob-nav-bg-color: #fff;
        /*color primary*/
        --theme-primary-50: #fdf5de;
        --theme-primary-100: #ffedbd;
        --theme-primary-200: #ffde85;
        --theme-primary-300: #ffcb3d;
        --theme-primary-400: #ffc21f;
        --theme-primary-500: #ffba00;
        --theme-primary-600: #e0a400;
        --theme-primary-700: #c28d00;
        --theme-primary-800: #a37700;
        --theme-primary-900: #0f1017;
        --theme-primary-A100: #ffffff;
        --theme-primary-A200: #ffe399;
        --theme-primary-A400: #ffc833;
        --theme-primary-A700: #ffc11a;
        /*color contrast*/
        --theme-primary-contrast-50: #000000;
        --theme-primary-contrast-100: #000000;
        --theme-primary-contrast-200: #000000;
        --theme-primary-contrast-300: #000000;
        --theme-primary-contrast-400: #000000;
        --theme-primary-contrast-500: #000000;
        --theme-primary-contrast-600: #000000;
        --theme-primary-contrast-700: #000000;
        --theme-primary-contrast-800: #ffffff;
        --theme-primary-contrast-900: #ffffff;
        --theme-primary-contrast-A100: #000000;
        --theme-primary-contrast-A200: #000000;
        --theme-primary-contrast-A400: #000000;
        --theme-primary-contrast-A700: #000000;
    }

    /* --> Specific CSS goes HERE <--*/
    /*Footer*/
    /*Footer*/
    app-channel-footer {
        background-color: #000 !important;
        text-align: center;
    }

    .footer-img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Mostrar la imagen de escritorio por defecto */
    .footer-desktop {
        display: block;
    }

    .footer-mobile {
        display: none;
    }

    /* Cuando el ancho sea menor o igual a 768px (móvil) */
    @media screen and (max-width: 768px) {
        .footer-desktop {
            display: none;
        }

        .footer-mobile {
            display: block;
        }
    }

    /*Dark version subfooter*/
    ob-footer.main-footer {
        background-color: #000 !important;
    }

    ob-footer.main-footer {
        color: #fff !important;
    }

    ob-footer.main-footer img{
        filter: brightness(20) !important;
    }

    ob-footer.main-footer span.mdc-button__label {
        color: #fff !important;
    }

    ob-footer.main-footer .mat-mdc-outlined-button:not(:disabled) {
        color: #fff !important;
    }

    ob-footer.main-footer ob-button>.mat-mdc-outlined-button {
        border: 1px solid#fff !important;
    }

    /*Mobile*/
    @media only screen and (max-width: 40.063em) {
        app-channel-footer.channel-footer {
            display: none;
        }
    }

    /*Banner VIP*/
.vip-banner-mgp {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 2rem;
    gap: 2rem;
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 40%, #ffba00 100%);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

/* animacion */
.vip-banner-mgp::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 700%;
    background-image: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.07) 0px,
            rgba(255, 255, 255, 0.07) 20px,
            rgba(0, 0, 0, 0.15) 20px,
            rgba(0, 0, 0, 0.15) 40px);
    animation: flagWave 10s linear infinite;
    opacity: 0.25;
    transform: rotate(5deg);
    z-index: 1;
}

/* flagwave */
@keyframes flagWave {
    0% {
        transform: translateX(0) rotate(5deg);
    }

    100% {
        transform: translateX(-25%) rotate(5deg);
    }
}

/* titulo */
.vip-banner-mgp h2 {
    color: #fff;
    font-size: 22px;
    margin: 0;
    z-index: 3;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 0 10px #000;
}

/* Boton */
.vip-btn-mgp {
    background: #ffba00;
    color: #fff;
    padding: 0.7rem 1.6rem;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 3px;
    letter-spacing: 1px;
    z-index: 3;
    border: 2px solid #ffffff33;
    transition: 0.25s;
    box-shadow: 0 0 12px rgba(76, 100, 237, 0.57);
}

.vip-btn-mgp:hover {
    background: #ffba00;
    transform: scale(1.06);
    box-shadow: 0 0 18px rgba(76, 100, 237, 0.57);
}