/* ########## VISTA PARA ESCRITORIO ########## */

            #coverImage {
                opacity: 1;
                transition: opacity 0.5s ease 0.2s;
            }

            #coverBackground, #bg-color, #bg-black {
                opacity: 1;
                transition: opacity 0.5s ease 0.6s; 
            }

        #cBackground {
            width: 100%; /* Que el contenedor no sea más ancho que su contenedor padre */
            height: 68vh; /* Establece el alto deseado de la imagen */
            overflow: hidden; /* Oculta cualquier parte de la imagen que exceda el alto */
            z-index: -1;
            margin: -10vh auto auto auto;
            border-radius: 0px;
            position: absolute;
            }

            #cBackground.scroll {
                top: 0px;
                position: fixed;
                height: 100vh;
            }

            /* Película negra con opacidad por encima */
            #cBackground::after {
                content: "";
                position: absolute;
                inset: 0;
                background-color: rgba(0, 0, 0, 0.5); /* ajusta opacidad */
                pointer-events: none;
            }

        #coverBackground {
            width: 106%; /* Establece el ancho al 100% del contenedor */
            height: auto; /* Permite que la altura se ajuste proporcionalmente al ancho */
            filter: blur(40px);
            padding-left: 0%;
            position: relative;
            overflow: hidden;
            top: 50%;
            transform: translate(-3%, -50%);
            border-radius: 0% 0% 0% 0%;
        }

           .frame-bg{
                position: absolute; 
                top: 0%; 
                left: 0%; 
                width: 100%; 
                height: 100%; 
                pointer-events: 0; 
                z-index: 0; 
                overflow: hidden; 
                opacity: 1;
                }
                    .bg-color, 
                    .bg-black{
                        width: 100%; 
                        height: auto;
                        position: absolute; 
                        border-radius: 50em;
                        filter: blur(40px);
                        }
                    .bg-color{
                        left: 15%; 
                        top: 0%;          
                        z-index: 2; 
                        mix-blend-mode: lighten;/*lighten*/
                        }
                    .bg-black{
                        right: 15%; 
                        bottom: 0%; 
                        z-index: 1;
                        }

@keyframes rotateSlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ########## VISTA PARA SMARTPHONE ########## */

@media (max-width: 768px) {

        #cBackground {
            top: 0vh;
            width: 100%; /* Que el contenedor no sea más ancho que su contenedor padre */
            height: 70vh; /* Establece el alto deseado de la imagen */
            overflow: hidden; /* Oculta cualquier parte de la imagen que exceda el alto */
            z-index: -1;
            margin: 0vh;
            border-radius: 0px;
            position: absolute;
            }

            /* Película negra con opacidad por encima */
            #cBackground::after {
                content: "";
                position: absolute;
                inset: 0;
                background-color: rgba(0, 0, 0, 0.5); /* ajusta opacidad */
                pointer-events: none;
    }

        #coverBackground {
            width: 100%; /* Establece el ancho al 100% del contenedor */
            height: auto; /* Permite que la altura se ajuste proporcionalmente al ancho */
            filter: blur(40px);
            padding-left: 0%;
            position: relative;
            overflow: hidden;
            top: 50%;
            transform: translate(-3%, -50%);
            border-radius: 0% 0% 0% 0%;
        }
    
            .frame-bg{
                position: absolute; 
                top: 0%; 
                left: 0; 
                width: 100%; 
                height: 100%; 
                pointer-events: none; 
                z-index: 0; 
                overflow: hidden; 
                opacity: 1;
            }
                    .bg-color, 
                    .bg-black{
                        width: 200%; 
                        margin: auto;
                        position: absolute; 
                        border-radius: 50em;
                        filter: blur(40px);
                        }
                    .bg-color{
                        left: 0%; 
                        top: 0px;           
                        z-index: 2; 
                        mix-blend-mode: overlay;/*lighten*/
                        }
                    .bg-black{
                        right: 0%; 
                        bottom: 0px; 
                        z-index: 1;
                        }
    
}