/* --- Contenedores de las cortinas (izquierda y derecha) --- */
.envoltura {
    position: absolute;
    top: 0;
    bottom: 0; /* Ocupa toda la altura del viewport */
    width: 52%;
    overflow: hidden;
    z-index: 2;
    filter: url(#wave);
}

.envoltura.izquierda {
    left: -3%;
}

.envoltura.derecha {
    right: -3%;
}

/* --- Cortinas propiamente dichas --- */
.cortina {
    position: absolute;
    top: 0;
    left: 0;
    width: 99%;
    height: 97%;
    background: repeating-linear-gradient(
        90deg,
        #4b0082 0px,
        #800080 25px,
        #4b0082 50px
    );
    transform-origin: top center;
    transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.4, 1.5); /* Transición para abrir/cerrar */
    overflow: hidden;
    z-index: 2;
}

/* --- Estilo del punto de luz que sigue al cursor --- */
.punto-luz {
    position: fixed;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.6); /* Color negro semitransparente */
    border-radius: 50%; /* Forma circular */
    pointer-events: none; /* No intercepta clicks */
    filter: blur(10px); /* Suavizado y efecto de brillo */
    z-index: 9999; /* Siempre encima de todo */
    display: none; /* Oculto por defecto */
    transform: translate(-50%, -50%); /* Centrado inicial para el cursor */
}

/* Clase para mostrar el punto solo sobre las cortinas cuando están activas */
.cortina-activa .punto-luz {
    display: block;
}

/* --- Cursores personalizados para cortinas --- */
#cortinaIzq {
    cursor: url('../imgs/clic-cualquiera.png'), pointer;
    box-shadow:
        inset 10px 60px 100px rgba(0, 0, 0, 0.5), /* sombra izquierda */
        inset -4px 10px 4px rgba(184, 134, 11, 0.7); /* sombra derecha amarilla */
}

#cortinaDer {
    cursor: url('../imgs/clic-cualquiera.png'), pointer;
    box-shadow:
        inset 10px 60px 100px rgba(0, 0, 0, 0.5), /* sombra izquierda */
        inset 4px 10px 4px rgba(184, 134, 11, 0.7); /* sombra derecha amarilla */
}