header#h-primary{
    height: 100vh;
    max-height: calc(100vw / 1);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;

    & #background-video {
        position: absolute;
        top: 0px;
        left: 0;
        width: 100%;
        height: 100%;
        
        
        object-fit: cover;
        object-position: center;
        /* Hace que el video cubra todo el contenedor sin distorsionarse */
        z-index: -1;
        /* Esto asegura que el contenido esté encima del video */
    }
    & div.overlay{
        height: 100%;
        & > div{
            height: 100%;
        }
    }
}

@media (min-width:768px){
    header#h-primary{
        height: calc(100vw / 2.6);
        max-height: 100vh;

        
    }
}
@media (min-width:1440px){
    header#h-primary{
        height: calc(100vw / 4);
        max-height: 100vh;

        
    }
}

/*widgets header*/
    /*widgets Clima*/
#clima-date{
    border-radius: .8rem;
    background-color: white;
    min-width:76px;

    & #date{
        background-color: var(--prim);
        background-image:linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
        border-radius: 0 0 .5rem .5rem;
    }

    & .calendar-header{
        width: max(50%, 75px);
        border-radius: .5rem;

        & p.day{
            line-height: 1.1;
            font-size:1rem;
            font-weight:bold;
        }

        & p.month{
            font-size:.8rem;
            font-weight:bold;
        }
    }
}
    /*widgets Redes Sociales*/

div#social-menu{
    & > div{
        background-color: white;
        background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
        border-radius: .8rem;

        & p{
            border-radius: .3rem;
        }

        & i.fa-facebook-f{
            font-size:1.8rem;
        }
        & i.fa-instagram{
            font-size:1.9rem;
        }
    }
    
}

@media (min-width:768px) {
    div#social-menu{
        & > div{
            & p{
                border-radius: .8rem .8rem 0 0;
            }
            & i.fa-facebook-f{
                font-size:2rem;
            }
            & i.fa-instagram{
                font-size:2.1rem;
            }
        }
        
        
    }
} 


/* Estilos para las tarjetas de noticias */

section.noticias-destacadas{
    background-color: var(--dark-two);    
}

/*-------------- seccion Cartelera -------------------------*/
section#sidebar-home-news{
    & div.container-lg figure{
        transform: scale(1);
        transition: transform .2s ease;
        &:hover {
            transform: scale(1.02);
    
        }
    }
        
}

/*-------------- btn-section in front-page -------------------------*/
section#btn-section{

    &::before{
        content: '';
        display: block;
        height: 5vw;
        background-color: #7473730f;
        border-radius:50% 50% 0 0;
    }

    & div.cont-fig-btn{
        justify-content: center;
        background-color: #7473730f;
        &::after{
            content: '';
            display: block;
            height: 10vw;
        };

        & h3{
            height: 10rem;
          }

        & .st-btn-section{
            height: 180px;
            width: 180px;
            border: 10px solid var(--sec);
            margin: 16px auto;
            display: flex;
            align-items: center;
            background-color: floralwhite;
            transition: transform .1s ease-in-out;
            transform: translateY(0);
            border-radius: 20px;
            box-shadow: 4px 4px 8px darkgray;
    
            &:hover{
                border: 10px solid #0395dd;
                transform: translateY(-10px);
                
                
            }
            & figure{
                margin: auto;
                & img{
                    width: 100%;
                    border-radius: 10px;
                }
                
            }
        }
    }   
}

/* separadores*/
.custom-shape-divider-bottom-1739170840 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1739170840 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 83px;
}

.custom-shape-divider-bottom-1739170840 .shape-fill {
    fill: #FFFFFF;
}