/*-------------------------------------------------------------
# Section titulo Home
--------------------------------------------------------------*/
.section-title-onn{
    background-image: url('https://onceninasyninos.tv/wp-content/uploads/2025/08/banner_morado_bg.png');
    background-size: cover;
}
.section-banner-onn .container-title-onn{
    width: 100%;
}
.section-banner-onn{
    position: relative;
    z-index: 3;
}
#banner_desktop .movile{
    display: none;
}
.section-banner-onn .container-banner-onn{
    width: 100%;
    height: 100%;
}
.section-banner-onn .container-banner-onn svg{
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
    object-fit: cover;
    position: relative;
}
.section-banner-onn .container-banner-onn svg path{
    z-index: 1;
}
.section-banner-onn .container-banner-onn svg .ele_svg{
    cursor: pointer;
}
.section-banner-onn .container-banner-onn .inactive-path{
    filter: brightness(0.5);
    -webkit-filter: brightness(0.5);
    transition: filter .25s ease-out;
    -webkit-transition: filter .25s ease-out;
    -moz-transition: filter .25s ease-out;
    -ms-transition: filter .25s ease-out;
    -o-transition: filter .25s ease-out;
}
.container-banner-onn .active-path{
    filter: drop-shadow(0px 0px 5px #fff)!important;
    -webkit-filter: drop-shadow(0px 0px 5px #fff)!important;
    transition: filter .25s ease-in;
    -webkit-transition: filter .25s ease-in;
    -moz-transition: filter .25s ease-in;
    -ms-transition: filter .25s ease-in;
    -o-transition: filter .25s ease-in;
}
.container-banner-onn .active-text{
    position: relative;
    z-index: 4;
    filter: drop-shadow(0px 0px 5px #ffffffb8) !important;
    -webkit-filter: drop-shadow(0px 0px 5px #ffffffb8) !important;
    transition: all .25s ease-in;
    -webkit-transition: all .25s ease-in;
    -moz-transition: all .25s ease-in;
    -ms-transition: all .25s ease-in;
    -o-transition: all .25s ease-in;
}
.container-banner-onn .active-text path{
    filter: brightness(1)!important;
    -webkit-filter: brightness(1)!important;
    transition: filter .25s ease-in;
    -webkit-transition: filter .25s ease-in;
    -moz-transition: filter .25s ease-in;
    -ms-transition: filter .25s ease-in;
    -o-transition: filter .25s ease-in;
}
/*-------------------------------------------------------------
# Section Content Movile 
--------------------------------------------------------------*/
#banner_movile{
    display: none;
    margin-top: 8rem;
}
#banner_movile .container-banner-onn {
    z-index: 1;
}
#banner_movile .container-banner-onn svg{
    top: -13rem;
    z-index: 1;
}
/*-------------------------------------------------------------
# Section Content Center Image
--------------------------------------------------------------*/
.section-content-image::after{
    content: '';
    position: absolute;
    background: #542084;
    border-radius: 100%;
    width: 115%;
    height: 75vh;
    bottom: -30vh;
    right: -6rem;
}
/*-------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (max-width: 991px){ 
    #titulo_princial,    
    #team_onn,
    #text_desktop{
        display: none;
    }
    /*-------------------------------------------------------------
    # Section Content Movile 
    --------------------------------------------------------------*/
    #banner_movile{
        display: block;
        margin-top: 2rem;
        margin-bottom: -5rem;
    }
    #banner_movile .container-banner-onn h2{
        margin-bottom: 0rem!important;
    }
    #banner_movile .img-fluid-responsive{
        max-height: 250px;
        object-fit: contain;
    }
    #banner_movile .container-text-onn{
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #banner_movile .container-text-onn::after{ 
        content: '';
        background-image: url('https://onceninasyninos.tv/wp-content/uploads/2025/08/flecha_movile.png');
        background-size: contain;
        background-repeat: no-repeat;
        width: 90px;
        height: 60px;
        display: block;
        margin: 2rem 0rem;
    }
    /*-------------------------------------------------------------
    # Section 
    --------------------------------------------------------------*/
    #banner_desktop .desktop{
        display: none;
    }
    #banner_desktop .movile{
        display: flex;
    }
    /*-------------------------------------------------------------
    # Section Content Movile 
    --------------------------------------------------------------*/
    .footer {
        padding-top: 0;
        background-color: transparent;
    }
    .footer-navigation-web{
        order: 2;
    }
}
@media (max-width: 650px){ 
    /*-------------------------------------------------------------
    # Section Content Movile 
    --------------------------------------------------------------*/
    #banner_movile .container-banner-onn svg{
        top: -9rem;
    }
}