@font-face{ 
    font-family: "Gobold"; 
    src: url("../fonts/Gobold-Regular-BF63bf583841621.otf"); 
    font-display: swap
}
/*-------------------------------------------------------------
# Estilos Generales
--------------------------------------------------------------*/
:root{
    --color_atomic_tangerine_300: #ff9a66;
    --color_cinnabar_500: #e73d3e;
    --color_flesh_200: #fec6a1;
    --color_white_50: #ffffff;
    --color_black_950: #000000;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    font-family: 'Gobold';
}
html{
    font-size: 62.5%
}
body{
    background-image: url();
    background-size: 100% 100%;
    background-attachment: fixed;
    background: var(--color_black_950);
    height: 100vh;
    height: 100%;
    width: 100%;
    z-index: 2;
    
}
body::after {
    content: "";
    position: fixed;
    top: 0;
    height: 100%;
    left: 0;
    right: 0;
    z-index: -1;
    /* background-image: url(https://canalonce.mx/REST/data/images/para-no-olvidar/fondo_no_olvidar_800_800.jpg); */
    background-color: var(--color_white_50);
    background-attachment: fixed;
}
.body-overflow-hidden{
    overflow: hidden;
}
.pt-md-30{
    padding-top: 30px;
}
.pt-md-60{
    padding-top: 60px;
}
.pt-md-100{
    padding-top: 100px;
}
.pt-md-150{
    padding-top: 150px;
}
.pt-md-200{
    padding-top: 200px;
}
.pb-mb-50{
    padding-bottom: 50px;
}
.pb-mb-100{
    padding-bottom: 100px;
}
.mr-mt-70{
    padding-top: 70px;
}
.txt-center{
    text-align: center;
}
.d-none{
    display: none!important;
}
.d-flex{
    display: flex!important;
}
.d-grid{
    display: grid!important;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
.justify_content{
    justify-content: center!important;
}
/*-------------------------------------------------------------
# Boton flotante a Canal Once 
--------------------------------------------------------------*/
.section-btn-canal{
    width: 100%;
    height: auto;
    display: flex;    
    position: relative;
}
.section-btn-canal .btn-canal{
    position: fixed;
    bottom: 1rem;
    right: 1.2rem;
    z-index:99 !important;
}
.section-btn-canal .btn-canal picture{
    display: block;
    width: auto;
    height: auto;
}
.section-btn-canal .btn-canal picture img{
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 100%;
    object-fit: cover;
    display: block;
    filter: drop-shadow(0px 0px 6px #000);
}
/*-------------------------------------------------------------
# Fondos backgrounds
--------------------------------------------------------------*/
.section-capsulas .body-capsulas{
    background-attachment: fixed;
    background-repeat: round;
}
.section-capsulas .body-capsulas .container-capsulas:last-child{
}
html .section-capsulas .right-background{
    background-image: url(https://canalonce.mx/REST/data/images/para-no-olvidar/right_background_1.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-color: var(--color_cinnabar_500);
}
html .section-capsulas .center-background{
    background-color: var(--color_cinnabar_500);
    padding: 0rem;
}
html .section-capsulas .center-galeria-background{
    background-color: var(--color_white_50);
    padding: 0rem;
}
html .section-capsulas .right-second-background{
    background-image: url(https://canalonce.mx/REST/data/images/para-no-olvidar/right_background_2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 2rem;
}
html .section-capsulas .left-background{
    background-image: url(https://canalonce.mx/REST/data/images/para-no-olvidar/left_background.jpg);
    background-size: 100% 19%;
    background-repeat: no-repeat;
    background-color: var(--color_cinnabar_500);
}
/*-------------------------------------------------------------
# Section Dirección Capsulas
--------------------------------------------------------------*/
.section-capsulas .container-left{
    grid-template-columns: 55% 43%;
}
.section-capsulas .container-left .content-video{
    order: 1;
}
.section-capsulas .container-left .content-list{
    order: 2;
}
.section-capsulas .container-right{
    grid-template-columns: 43% 55%;
}
.section-capsulas .container-right .content-video .text-title,
.section-capsulas .container-right .content-list{
    order: 1;
}
.section-capsulas .container-right .content-video .capsula,
.section-capsulas .container-right .content-video{
    order: 2;
}
html .section-capsulas .container-capsulas.container-right .list-center{
    align-items: flex-end;
    justify-content: space-between;
}
html .section-capsulas .container-capsulas.container-right .content-list .slider-infografias{
    padding: 0rem 0rem 2rem 3rem;
}
html .section-capsulas .right-background .content-video .title{
    justify-content: flex-start;
}
html .section-capsulas .right-background .content-video .title .arrows img{
    max-width: 30px;
}
html .section-capsulas .right-background .content-list .title .datos .arrows img{
    max-width: 30px;
}
html .section-capsulas .left-background .content-video .title{
    justify-content: flex-end;
    gap: 0rem;
    padding: 1rem 2rem 1rem 0rem;
}
html .section-capsulas .left-background .content-video .title .capsula{
    padding: 2rem 0rem 2rem 1rem;
}
html .section-capsulas .left-background .content-video .title .arrows img{
    max-width: 30px;
}
html .section-capsulas .left-background .content-list .title{
    justify-content: flex-start;
    padding: 1rem 0rem;
}
html .section-capsulas .left-background .content-list .title .datos{
    border: 4px solid var(--color_atomic_tangerine_300);
}
html .section-capsulas .left-background .content-list .title .datos h2{
    color: var(--color_cinnabar_500);
}
html .section-capsulas .left-background .content-list .title .datos .arrows img{
    max-width: 30px;
}
html .section-capsulas .container-right .content-list{
    padding: 0rem 0rem 0rem 2rem;
}
/*-------------------------------------------------------------
# Section Header
--------------------------------------------------------------*/
.section-header{
    border-bottom: 1.5rem solid var(--color_black_950);
}
.section-header .container-header{
    width: 100%;
    height: auto;
    min-height: 400px;
    max-height: 400px;
    display: flex;
    justify-content: center;
    background-image: url(https://canalonce.mx/REST/data/images/para-no-olvidar/back_negro_y_cebra-transformed.png);
    background-color: var(--color_black_950);
    background-size: contain;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    border-bottom: 1.5rem solid var(--color_black_950);
    overflow: hidden;
}
.section-header .container-header picture{
    width: auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    top: 5rem;
    max-width: 38rem;
}
.section-header .container-header picture img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
}
.section-header .container-selection-capsulas {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    background: var(--color_white_50);
}
.section-header .container-selection-capsulas .slider-capsulas{
    width: 100%;
}
.section-header .container-selection-capsulas .slider-capsulas .swiper-wrapper{
    align-items: flex-end;
}
.section-header .container-selection-capsulas .slider-capsulas .swiper-slide{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: var(--color_white_50);
    text-align: center;
    height: 85px;
}
.section-header .container-selection-capsulas .slider-capsulas .swiper-slide:nth-child(even){
    background-color: var(--color_atomic_tangerine_300);
}
.section-header .container-selection-capsulas .slider-capsulas .swiper-slide:nth-child(odd){
    background-color: var(--color_atomic_tangerine_300);
}
.section-header .container-selection-capsulas .slider-capsulas .swiper-slide h2{
    font-size: 2rem;
}
.section-header .container-selection-capsulas .slider-capsulas .swiper-button-next, 
.section-header .container-selection-capsulas .slider-capsulas .swiper-rtl .swiper-button-prev{
    background-color: #d49573b8;
    width: calc(var(--swiper-navigation-size) / 44* 24);
    color: var(--color_white_50);
}
.section-header .container-selection-capsulas .prev-selection-capsulas,
.section-header .container-selection-capsulas .next-selection-capsulas{
    width: 5%;
    cursor: pointer;
    background: var(--color_flesh_200);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.section-header .container-selection-capsulas .prev-selection-capsulas picture img,
.section-header .container-selection-capsulas .next-selection-capsulas picture img{
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 100%;
    cursor: pointer;
}
/*-------------------------------------------------------------
# Section Capsulas
--------------------------------------------------------------*/
.section-capsulas .body-capsulas{
    width: 100%;
    height: 100%;   
    flex-direction: column;
}
.section-capsulas .container-capsulas{
    width: 100%;
    height: 100%;   
    justify-content: space-between;
    gap: 1rem;
    padding: 2rem 0rem 0rem 0rem;
    position: relative;
}
.section-capsulas .container-capsulas *{
    z-index: 2;
}
/*-------------------------------------------------------------
# Section Videos
--------------------------------------------------------------*/
.section-capsulas .container-capsulas .content-video{
    width: 100%;
    height: auto;
    flex-direction: column;
    justify-content: space-between;
}
.section-capsulas .container-capsulas .content-video .title{
    width: 100%;
    padding: 1rem 0rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.section-capsulas .container-capsulas .content-video .title .capsula{
    padding: 2rem 0rem 2rem 2rem;
    display: flex;
    justify-content: flex-end;
}
.section-capsulas .container-capsulas .content-video .title .arrows{
    width: auto;
    height: auto;
}
.section-capsulas .container-capsulas .content-video .title .arrows img{
    display: block;
    width: auto;
    height: auto;
    object-fit: cover;
    max-width: 30px;
    max-height: 100%;
}
.section-capsulas .container-capsulas .content-video .title h2{
    font-size: 2.1rem;
    text-transform: uppercase;  
}
.section-capsulas .container-capsulas .content-video .title .capsula h2{
    color: var(--color_white_50);
}
.section-capsulas .container-capsulas .content-video .title .text-title h2{
    color: var(--color_white_50);
}
.section-capsulas .container-capsulas .content-video .title .text-title span{
    text-decoration: underline;
    text-decoration-color: #ad4e53;
    -moz-text-decoration-color: #ad4e53;
}
.section-capsulas .container-capsulas .content-video .video{
    width: 100%;
    height: auto;
}
.section-capsulas .container-capsulas .content-video .video .contentainer-video{

    padding: 0rem 2rem;
    width: 100%;
}
.section-capsulas .container-capsulas .content-video .video .contentainer-video .video_capsula{
    width: 100%;
    height: 450px;
}
.section-capsulas .container-capsulas .content-video .video  video{
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
} 
/*-------------------------------------------------------------
# Section Infografias
--------------------------------------------------------------*/
.section-capsulas .container-capsulas .content-list{
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-right: 3rem;
}
.section-capsulas .container-capsulas .list-center{
    padding: 0rem;
    align-items: flex-start;
    gap: 1rem;
    justify-content: space-between;
}
.section-capsulas .container-capsulas .content-list .title-list{
    width: auto;
    height: AUTO;
    background-image: url(https://canalonce.mx/REST/data/images/para-no-olvidar/01_boton_500x200-01.png);
    background-size: 100% 95%;
    background-repeat: no-repeat;
    background-position-y: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 3.5rem;
}
.section-capsulas .container-capsulas .content-list .title-list h2{
    font-size: 1.8rem;
    color: var(--color_white_50);
    text-transform: uppercase;
    text-align: center;
    max-width: 250px;
}
.section-capsulas .container-capsulas .content-list .title{
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: end;
    gap: 1rem;
    padding: 1rem 0rem;
    padding-right: 2rem;
}
.section-capsulas .container-capsulas .content-list .title .datos{
    padding: 1.5rem 3rem;
    width: auto;
    display: flex;
    background-color: var(--color_white_50);
    border-radius: 3rem;
    border: 4px solid var(--color_cinnabar_500);
    align-items: center;
    gap: 1rem;
}
.section-capsulas .container-capsulas .content-list .title .datos .arrows{
    width: auto;
    height: auto;
}
.section-capsulas .container-capsulas .content-list .title .datos .arrows img{
    display: block;
    width: auto;
    height: auto;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    min-height: 25px;
}
.section-capsulas .container-capsulas .content-list .title h2{
    font-size: 2.1rem;
    text-transform: uppercase;  
}
.section-capsulas .container-capsulas .content-list .title .datos h2{
    color: var(--color_atomic_tangerine_300);
}
.section-capsulas .container-capsulas .content-list .slider-infografias{
    width: 100%;
    height: 60%;
    padding: 0rem 2rem 0rem 0rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.section-capsulas .container-capsulas .content-list .slider-infografias .swiper {
    width: 100%;
    height: auto;
}
.section-capsulas .container-capsulas .content-list .slider-infografias .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section-capsulas .container-capsulas .content-list .slider-infografias .swiper-slide .infografia{
    width: 100%;
    display: flex;
    height: auto;
    flex-wrap: nowrap;
    gap: 1rem;
    justify-content: space-between;
}
.section-capsulas .container-capsulas .content-list .slider-infografias .swiper-slide .infografia .image  {
    width: 50%;
    height: auto;
}
.section-capsulas .container-capsulas .content-list .slider-infografias .swiper-slide .infografia .image picture {
    display: block;
    width: 100%;
    height: 100%;
}
.section-capsulas .container-capsulas .content-list .slider-infografias .swiper-slide .infografia .image picture img {
    display: block;
    width: 100%;
    height: 100%;
}
.section-capsulas .container-capsulas .content-list .slider-infografias .swiper-slide .infografia .text {
    width: 50%;
    text-align: justify;
}
.section-capsulas .container-capsulas .content-list .slider-infografias .swiper-slide .infografia .text p{
    color: var(--color_white_50);
    font-size: 1.7rem;
    text-transform: uppercase;
}
.section-capsulas .container-capsulas .content-list .slider-infografias .controls-slider-infografias{
    width: 100%;
    height: auto;
    padding: 1rem 0rem;
    justify-content: center;
    gap: 3rem;
}
.section-capsulas .container-capsulas .content-list .slider-infografias .controls-slider-infografias picture img,
.section-capsulas .container-capsulas .content-list .slider-infografias .controls-slider-infografias picture img{
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 50px;
    cursor: pointer;
}
/*-------------------------------------------------------------
# Section Galeria
--------------------------------------------------------------*/
.section-capsulas .container-capsulas .content-video .galeria {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0rem 2rem 0rem;
}
.section-capsulas .container-capsulas .content-video .galeria .arrows{
    width: auto;
    height: auto;
}
.section-capsulas .container-capsulas .content-video .galeria .arrows img{
    display: block;
    width: auto;
    height: auto;
    object-fit: cover;
    max-width: 100%;
    max-height: 30px;
}
.section-capsulas .container-capsulas .content-video .galeria .title{
    background: var(--color_white_50);
    border-radius: 3rem;
    padding: 1rem 2rem;
    border: 4px solid var(--color_atomic_tangerine_300);
    width: auto;
    gap: 2rem;
    justify-content: space-between;
    align-items: center;
}
.section-capsulas .container-capsulas .content-video .galeria .title h2{
    color: var(--color_cinnabar_500);
    font-size: 2.5rem;
    text-transform: uppercase;
}
.section-capsulas .container-capsulas .content-video .galeria .slider-galeria{
    width: 100%;
    height: auto;
    flex-wrap: nowrap;
    padding: 1.5rem 0rem;
    max-height: 210px;
}
.section-capsulas .container-capsulas .content-video .galeria .slider-galeria .navigation-left,
.section-capsulas .container-capsulas .content-video .galeria .slider-galeria .navigation-right{
    width: 10%;
}
.section-capsulas .container-capsulas .content-video .galeria .slider-galeria .navigation-left,
.section-capsulas .container-capsulas .content-video .galeria .slider-galeria .navigation-right {
    justify-content: center;
    align-items: center;
}
.section-capsulas .container-capsulas .content-video .galeria .slider-galeria .swiper-button-next:after, 
.section-capsulas .container-capsulas .content-video .galeria .slider-galeria .swiper-rtl .swiper-button-prev:after{
    content: ''!important;
}
.section-capsulas .container-capsulas .content-video .galeria .slider-galeria .navigation-left picture img,
.section-capsulas .container-capsulas .content-video .galeria .slider-galeria .navigation-right picture img{
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 50px;
    cursor: pointer;
    filter: invert(1);
    -webkit-filter: invert(1);
}
.section-capsulas .container-capsulas .content-video .galeria .slider-galeria .swiper {
    width: 100%;
    height: 100%;
}
.section-capsulas .container-capsulas .content-video .galeria .slider-galeria .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section-capsulas .container-capsulas .content-video .galeria .slider-galeria .swiper-slide a{
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
    border: 0.3rem solid var(--color_white_50);
}
.section-capsulas .container-capsulas .content-video .galeria .slider-galeria .swiper-slide picture{
    display: block;
    width: auto;
    height: 100%;
}
.section-capsulas .container-capsulas .content-video .galeria .slider-galeria .swiper-slide a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
}
.section-capsulas .container-capsulas .content-video .galeria .controls-slider-galeria{
    width: 100%;
    height: auto;
    background: var(--color_atomic_tangerine_300);
    border-radius: 0rem 0rem 4rem 4rem;
    box-shadow: 0px 10px 9px 3px #000000ab;
    padding: 3rem 0rem;
    justify-content: center;
    gap: 3rem;
    -webkit-border-radius: 0rem 0rem 4rem 4rem;
    -moz-border-radius: 0rem 0rem 4rem 4rem;
    -ms-border-radius: 0rem 0rem 4rem 4rem;
    -o-border-radius: 0rem 0rem 4rem 4rem;
}
.section-capsulas .container-capsulas .content-video .galeria .controls-slider-galeria picture img,
.section-capsulas .container-capsulas .content-video .galeria .controls-slider-galeria picture img{
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 50px;
    cursor: pointer;
}
/*-------------------------------------------------------------
# Section Banner Final
--------------------------------------------------------------*/
.section-footer .container-footer{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}
.section-footer .container-footer .banner{
    width: 100%;
    height: auto;
}
.section-footer .container-footer .last-banner img,
.section-footer .container-footer .banner img{
    width: 100%; 
    height: auto;
    display: block;
    object-fit: cover;
    max-width: 100%;
}
.section-footer .container-footer .last-banner{
    background-image: url(https://canalonce.mx/REST/data/images/para-no-olvidar/back_negro_y_cebra_invertido-transformed.png);
    /* background-attachment: fixed; */
    background-repeat: no-repeat;
    background-size: cover;
    height: min(400px, 320px);
}
@media (max-width: 1150px){
    /*-------------------------------------------------------------
    # Section Infografias
    --------------------------------------------------------------*/
    .section-capsulas .container-capsulas .content-list .slider-infografias .swiper-slide .infografia .text p{
        font-size: 1.4rem;
    }
}
@media (max-width: 991px){
    /*-------------------------------------------------------------
    # Fondos backgrounds
    --------------------------------------------------------------*/
    html .section-capsulas .right-background,
    html .section-capsulas .left-background{
        background-image: url();
        grid-template-columns: 100%;
        padding-top: 1rem;
    }
    html .section-capsulas .right-second-background{
        background-size: cover;
        background-position: center;
    }    
    .section-capsulas .container-capsulas.right-background .content-list .title{
        background-image: url(https://canalonce.mx/REST/data/images/para-no-olvidar/right_background_1.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    html .section-capsulas .right-background .content-video .title{
        background-image: url(https://canalonce.mx/REST/data/images/para-no-olvidar/right_background_1.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    html .section-capsulas .left-background .content-video .title{
        background-image: url(https://canalonce.mx/REST/data/images/para-no-olvidar/left_background.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-color: var(--color_cinnabar_500);
    }
    .section-capsulas .container-capsulas.left-background .content-list .title{
        background-image: url(https://canalonce.mx/REST/data/images/para-no-olvidar/left_background.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding-left: 2rem;
    }
    /*-------------------------------------------------------------
    # Section Header
    --------------------------------------------------------------*/
    .section-header .container-header{
        background-size: cover;
    }
    .section-header .container-header picture{
    }
    .section-header .container-selection-capsulas .prev-selection-capsulas, 
    .section-header .container-selection-capsulas .next-selection-capsulas{
        width: 50px;
    }
    /*-------------------------------------------------------------
    # Section Dirección Capsulas
    --------------------------------------------------------------*/
    .section-capsulas .container-right,
    .section-capsulas .container-left {
        grid-template-columns: 100%;
    }

    /*-------------------------------------------------------------
    # Section Dirección Capsulas
    --------------------------------------------------------------*/
    html .section-capsulas .left-background .content-list .title .datos .arrows img,
    html .section-capsulas .left-background .content-video .title .arrows img{
        max-width: 25px;
    }
    html .section-capsulas .container-right .content-list{
        padding: 0rem;
    }   
    html .section-capsulas .left-background .content-list .title-list{
        margin-right: 2rem;
    }
    html .section-capsulas .right-background .content-list .title-list{
        margin-left: 2rem;
    }
    /*-------------------------------------------------------------
    # Section Infografias
    --------------------------------------------------------------*/
    .section-capsulas .container-capsulas .content-list .slider-infografias {
        padding: 0rem 2rem;
    }
    .section-capsulas .container-capsulas .content-list .slider-infografias .swiper-slide .infografia .text p{
        font-size: 1.5rem;
    }
    .section-capsulas .container-capsulas .content-list .title .datos h2{
        font-size: 2rem;
    }
    .section-capsulas .container-capsulas .content-list{
        padding: 0rem;
    }
    html .section-capsulas .right-background .content-list .title .datos .arrows img{
        max-width: 25px;
    }
    html .section-capsulas .container-capsulas.container-right .content-list .slider-infografias{
        padding: 0rem 2rem;
    }
    /*-------------------------------------------------------------
    # Section Videos
    --------------------------------------------------------------*/
    .section-capsulas .container-capsulas .content-video .video .contentainer-video .video_capsula{
        max-height: 350px;
    }
    .section-capsulas .container-capsulas .content-video .title h2{
        font-size: 2rem;
    }
    html .section-capsulas .right-background .content-video .title .arrows img{
        max-width: 25px;
    }
    /*-------------------------------------------------------------
    # Section Banner Final
    --------------------------------------------------------------*/
    .section-footer .container-footer .last-banner{
        height: min(400px, 220px);
    }
}
@media (max-width: 850px){
    /*-------------------------------------------------------------
    # Section Infografias
    --------------------------------------------------------------*/
    .section-capsulas .container-capsulas .content-list .slider-infografias .swiper-slide .infografia .text p{
        font-size: 1.7rem;
    }
}
@media (max-width: 780px){
    /*-------------------------------------------------------------
    # Fondos backgrounds
    --------------------------------------------------------------*/
    html .section-capsulas .right-background,
    html .section-capsulas .left-background{
        background-size: cover;
        background-origin: border-box;
        background-position: bottom;
    }
    html .section-capsulas .left-background .content-video .title{
        background-size: cover;
        background-position-x: 80%;
    }
    /*-------------------------------------------------------------
    # Section Infografias
    --------------------------------------------------------------*/
    .section-capsulas .container-capsulas .content-list .title .datos{
        padding: 1.5rem 1rem;
    }
    .section-capsulas .container-capsulas .content-list .title .datos h2{
        font-size: 1.7rem;
    }
    .section-capsulas .container-capsulas .content-list .title-list h2{
        font-size: 1.7rem;
    }
    .section-capsulas .container-capsulas .content-list .slider-infografias .swiper-slide .infografia{
        padding: 1rem;
    }
    .section-capsulas .container-capsulas.right-background .content-list .slider-infografias .swiper-slide .infografia{
        flex-direction: column;
    }
    .section-capsulas .container-capsulas.left-background .content-list .slider-infografias .swiper-slide .infografia{
        flex-direction: column;
    }
    .section-capsulas .container-capsulas .content-list .slider-infografias .swiper-slide .infografia .image,
    .section-capsulas .container-capsulas .content-list .slider-infografias .swiper-slide .infografia .text {
        width: 100%;
    }
    html .section-capsulas .container-capsulas.container-right .list-center{
        justify-content: flex-start;
    }
    /*-------------------------------------------------------------
    # Section Videos
    --------------------------------------------------------------*/
    .section-capsulas .container-capsulas .content-video .title h2{
        font-size: 1.7rem;
    }
}
@media (max-width: 650px){
    /*-------------------------------------------------------------
    # Section Header
    --------------------------------------------------------------*/
    .section-header .container-header picture{
        max-width: 100%;
        width: 65%;
        top: 6rem;
}
@media (max-width: 550px){
    /*-------------------------------------------------------------
    # Section Header
    --------------------------------------------------------------*/
    .section-header .container-header{
        min-height: 35rem;
    }
    .section-header .container-header picture{
        max-width: 100%;
        width: 65%;
        top: 6rem;
    }
    /*-------------------------------------------------------------
    # Section Infografias
    --------------------------------------------------------------*/
    .section-capsulas .container-capsulas .content-list .slider-infografias .swiper-slide .infografia .text p{
        font-size: 1.4rem;
    }
    /*-------------------------------------------------------------
    # Section Videos
    --------------------------------------------------------------*/
    .section-capsulas .container-capsulas .content-video .video .contentainer-video .video_capsula{
        max-height: 350px;
    }    
    /*-------------------------------------------------------------
    # Boton flotante a Canal Once 
    --------------------------------------------------------------*/
    .section-btn-canal .btn-canal picture img{
        max-width: 200px;
    }  
}

@media (max-width: 480px){
    /*-------------------------------------------------------------
    # Section Header
    --------------------------------------------------------------*/
    .section-header .container-header {
        min-height: 30rem;
    }
    .section-header .container-header picture {
        max-width: 30rem;
        width: 60%;
        top: 3rem;
    }
    /*-------------------------------------------------------------
    # Fondos backgrounds
    --------------------------------------------------------------*/
    html .section-capsulas .right-background .content-video .title,
    .section-capsulas .container-capsulas.right-background .content-list .title{
        background-position-x: 40%;
    }
    .section-capsulas .container-capsulas.left-background .content-list .title,
    html .section-capsulas .left-background .content-video .title{
        background-position: 83%;
    }
    /*-------------------------------------------------------------
    # Section Infografias
    --------------------------------------------------------------*/

    .section-capsulas .container-capsulas .content-list .title-list {
        width: min(100%, 290px);
        height: min(110px);
    }
    .section-capsulas .container-capsulas .content-list .title-list h2{
        font-size: 1.5rem;
    }
}
@media (max-width: 380px){
    /*-------------------------------------------------------------
    # Section Header
    --------------------------------------------------------------*/
    .section-header .container-header {
        min-height: 28rem;
    }
    .section-header .container-header picture {
        max-width: 28rem;
        width: 80%;
    }
    /*-------------------------------------------------------------
    # Section Infografias
    --------------------------------------------------------------*/

}