:root {
    --bg-trans-black:rgba(0, 0, 0, 0.4);
}
*,*::before,*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html {font-size: 62.5%;}
body {
    position: relative;
    font-family: 'Poppins';
    background-color: white;
    overflow-x: hidden;
    color: white;
}
body.bloquear-scroll {
    overflow: hidden;
}
body::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    filter: brightness(.65) blur(.05rem) grayscale(.1);
    z-index: -1;
}
img,video {
    width: 100%;
}
h1 {
    margin: 0;
}

#contenedorMensaje {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: rgba(0, 0, 0,0.6);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}
#contenedorMensaje.on {
    display: flex;
}
#contenedorMensaje p {
    font-size: 2rem;
    padding: 1em;
    text-align: center;
}


/* Se escondió el pointer personalizado */
/* Existe un mouse */
/* @media (pointer: fine){

    *,*::before,*::after {
        cursor: none;
    }

    #customCursor {
        --color1:rgb(255, 121, 121);
        --color2:rgb(121, 255, 155);
        --color3:rgb(242, 255, 121);
        --color4:white;
        position: fixed;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        transform: translateX(-50%) translateY(-50%);
        background-color: transparent;
        border-radius: 50%;
        z-index: 100;
        pointer-events: none;
        transition: width .5s, height .5s, border .5s;
        animation: animate-customCursor 3s linear infinite;
    }
    #customCursor.onhover {
        width: 20px;
        height: 20px;
        border: 1px solid var(--color4);
        animation: none;
    }
    #customCursor::after {
        content:"";
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 40px;
        transform: translateX(-39%) translateY(-39%); 
        background-color: transparent;
        border-radius: 50%;
        z-index: 99;
        transition: width .5s, height .5s, border .5s;
        animation: animate-customCursorAfter 3s linear infinite;
    }
    #customCursor.onhover::after {
        width: 50px;
        height: 50px;
        transform: translateX(-32%) translateY(-32%); 
        border: 1px solid var(--color4);
        box-shadow: 0px 0px 50px 0px var(--color4);
        animation: none;
    }
    @keyframes animate-customCursor {
        0% {
            border: 1px solid var(--color1);
        }
        33% {
            border: 1px solid var(--color2);
        }
        66% {
            border: 1px solid var(--color3);
        }
        100% {
            border: 1px solid var(--color1);
        }
    }
    @keyframes animate-customCursorAfter {
        0% {
            border: 1px solid var(--color1);
            box-shadow: 0px 0px 30px 0px var(--color1);
        }
        33% {
            border: 1px solid var(--color2);
            box-shadow: 0px 0px 30px 0px var(--color2);
        }
        66% {
            border: 1px solid var(--color3);
            box-shadow: 0px 0px 30px 0px var(--color3);
        }
        100% {
            border: 1px solid var(--color1);
            box-shadow: 0px 0px 30px 0px var(--color1);
        }
    }
} */