#parallax {
    background-image: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    inset: 0 0 0 0;
    z-index: 0;

    &.active {
        background-image: url("https://res.cloudinary.com/hriosisc/image/upload/v1752170619/Instituto%20de%20Ciencias%20Juridicas%20y%20Empresariales/background-parallax_awldam.webp") !important;
    }
}

.title {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.85s ease, transform 0.85s ease;
}

.fadeIn {
    opacity: 1;
    transform: scale(1);
}

.slice-to-right {
    position: relative;
    left: -50%;
    opacity: 0;
    transition: all 0.7s linear;
    &.slide {
        opacity: 1;
        left: 0;
        transition: all 0.7s linear;
    }
}

.parallax-background {
    background-image: url("https://res.cloudinary.com/hriosisc/image/upload/v1752170619/Instituto%20de%20Ciencias%20Juridicas%20y%20Empresariales/background-parallax_awldam.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.background-hero::before,
.background-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

header a,
footer a {
    position: relative;
    width: max-content;
    &:not(.active-link)::before {
        content: "";
        position: absolute;
        height: 2px;
        width: 0%;
        background-color: white;
        bottom: -2px;
        left: 0;
        transition: width 0.4s ease; /* aquí es donde se anima */
    }

    &:not(.active-link):hover::before {
        width: 110%;
    }
}

a {
    transition: all 200ms linear;
    &:hover {
        transition: all 200ms linear;
    }
}

.mosaic-pictures {
    max-width: 556px;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    min-height: 380px;

    & > img:first-child {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        border-radius: 4px;
    }
    & > img:nth-child(2) {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
        border-radius: 4px;
    }
    & > img:last-child {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 3;
        height: 380px;
        object-fit: cover;
        border-radius: 4px;
        object-position: 60%;
    }
}

#navigation {
    position: absolute;
    transition: all 200ms linear;
    z-index: 0;
    &.fixed-navigation {
        background-color: white;
        position: fixed;
        transition: all 200ms linear;
        background-color: white;
        border-bottom: 1px solid #d9d9d9;
        width: 100vw;
        max-width: 100vw;
        z-index: 2000;
        & nav {
            max-width: 1200px;
            background-color: white;
            margin: 0 auto;
            & a {
                color: rgb(29, 29, 27);
                &:hover {
                    color: rgb(196, 124, 90);
                }
                &::before {
                    background-color: rgb(196, 124, 90);
                }
            }
        }
    }
}

.contact-background {
    background: linear-gradient(rgb(0, 0, 0, 0.55)),
        url("https://res.cloudinary.com/hriosisc/image/upload/v1752173198/Instituto%20de%20Ciencias%20Juridicas%20y%20Empresariales/contact-to_xv7ml8.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    aspect-ratio: 1;
}

@media screen and (width < 48rem) {
    #navigation {
        z-index: 3000;
        position: fixed;
        & > nav {
            background-color: white;
            height: 4rem;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-left: 1rem;
        }

        & ul {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            row-gap: 1rem;
            & li {
                width: 100%;
                text-align: center;
                display: block;
                & a {
                    width: 80%;
                    text-align: center;
                    margin-inline: auto;
                    &:hover::before {
                        width: 100% !important;
                    }
                }
            }
        }
        &.visible-menu {
            background-color: white;
            height: 100dvh;
            & #burger-menu {
                display: none;
            }

            & #close-menu {
                display: block;
            }
            & ul {
                display: flex;

                & a {
                    font-size: 1.5rem;
                }
            }
        }

        &.hidden-menu {
            height: 4rem;
            & #burger-menu {
                display: block;
            }

            & #close-menu {
                display: none;
            }

            & ul {
                display: none;
            }
        }
    }
}
#wrapper {
    z-index: 900;
    position: relative;
}

@media screen and (width >= 48rem) {
    /*md	48rem (768px)	*/

    .contact-background {
        max-width: 100%;
    }
}

@media screen and (width<= 64rem) {
    #navigation {
        z-index: 3000;
        & > nav {
            background-color: white;
            height: 4rem;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-left: 1rem;
        }

        & ul {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            row-gap: 1rem;
            & li {
                width: 100%;
                text-align: center;
                display: block;
                & a {
                    width: 80%;
                    text-align: center;
                    margin-inline: auto;
                    &:hover::before {
                        width: 100% !important;
                    }
                }
            }
        }
        &.visible-menu {
            background-color: white;
            height: 100dvh;
            & #burger-menu {
                display: none;
            }

            & #close-menu {
                display: block;
            }
            & ul {
                display: flex;

                & a {
                    font-size: 1.5rem;
                }
            }
        }

        &.hidden-menu {
            height: 4rem;
            & #burger-menu {
                display: block;
            }

            & #close-menu {
                display: none;
            }

            & ul {
                display: none;
            }
        }
    }

    header a {
        color: black;
        &:hover {
            color: rgb(255, 255, 255);
        }
        &::before {
            background-color: white;
        }
    }

    footer a {
        color: rgb(255, 255, 255);
    }
    &::before {
        background-color: white;
    }
}
@media screen and (width >= 64rem) {
    /*lg	64rem (1024px)	*/
    #navigation {
        z-index: 3000;
    }
    #burger-menu {
        display: none;
    }
    #close-menu {
        display: none;
    }
    header a,
    footer a {
        color: rgb(255, 255, 255);
    }
    &::before {
        background-color: white;
    }
}

@media screen and (width >= 80rem) {
    /*xl	80rem (1280px)	*/
}

@media screen and (width >= 96rem) {
    /*2xl	96rem (1536px)	*/
}