:root {
    --color-white: rgb(255, 255, 255);
    --color-black: rgb(0, 0, 0);
    --color-primary: #303030;
    --color-secondary: #4b9f91;
    --color-tertiary: #0088a8;
    --color-fourth: #01abc4;
    --color-fifth: #ddd5c8;
    scroll-behavior: smooth;
}

* {
    padding: 0;
    margin: 0;
    font-family: system-ui;
}

body {
    overflow-x: hidden;
}

/* Button styles */
.button_1_style {
    background-color: var(--color-secondary);
    color: var(--color-white);
    cursor: pointer;
    border: none;
    border-radius: 5px;
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}

.button_2_style {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out,border 0.4s ease-in-out;
}

.button_2_style:hover {
    background-color: var(--color-fifth);
    color: var(--color-primary);
    border: 2px solid transparent;
}

.button_1_style:hover {
    background-color: var(--color-fifth);
    color: var(--color-primary);
}
/* ################## */

.menu_container {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 100;
    position: fixed;
    clip-path: circle(0% at 100% 0);
    transition: all .6s ease-in-out;

    & img {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 100px;
        cursor: pointer;
    }

    & .nav_links_container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;

        & img {
            display: none;
        }

        & button {
            font-size: 60px;
            color: #e1e1e1;
            font-family: inherit;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            border: none;
            background: none;
            text-transform: uppercase;
            transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
            transition-duration: 400ms;
            transition-property: color;

            & a {
                text-decoration: none;
                color: #fff;
            }
        }

        & button:focus,
        button:hover {
            color: #fff;
        }

        & button:focus:after,
        button:hover:after {
            width: 100%;
            left: 0%;
        }

        & button:after {
            content: "";
            pointer-events: none;
            bottom: -2px;
            left: 50%;
            position: absolute;
            width: 0%;
            height: 2px;
            background-color: #fff;
            transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
            transition-duration: 400ms;
            transition-property: width, left;
        }

        & #hover_link:after {
            width: 100% !important;
            left: 0%;
            color: #fff;
        }
    }
}

.menu_transition {
    clip-path: circle(150% at 100% 0);
}

.nav_container {
    width: 100vw;
    height: 15vh;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;

    & .nav_img_container {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: start;

        & img {
            height: 100%;
        }
    }

    & .nav_links_container {
        width: 30%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        & img {
            display: none;
        }

        & button {
            font-size: 20px;
            color: #e1e1e1;
            font-family: inherit;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            border: none;
            background: none;
            text-transform: uppercase;
            transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
            transition-duration: 400ms;
            transition-property: color;

            & a {
                text-decoration: none;
                color: #fff;
            }
        }

        & button:focus,
        button:hover {
            color: #fff;
        }

        & button:focus:after,
        button:hover:after {
            width: 100%;
            left: 0%;
        }

        & button:after {
            content: "";
            pointer-events: none;
            bottom: -2px;
            left: 50%;
            position: absolute;
            width: 0%;
            height: 2px;
            background-color: #fff;
            transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
            transition-duration: 400ms;
            transition-property: width, left;
        }

        & #hover_link:after {
            width: 100% !important;
            left: 0%;
            color: #fff;
        }
    }
}

.header_container {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.8) 100%
        ),
        url("../assets/imgs/header.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

    & h1 {
        color: var(--color-white);
        width: 80%;
        margin-bottom: 2%;
        text-align: center;
        font-size: 70px;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    }

    & .buttons_header_container {
        width: 38%;
        height: 9%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        & .button_1_style {
            width: 48%;
            height: 80%;
            font-size: 22px;
        }

        & .button_2_style {
            width: 48%;
            font-size: 25px;
            height: 80%;
            color: var(--color-fifth);
            border-color: var(--color-fifth);
        }

        & .button_2_style:hover {
            color: var(--color-primary);
        }
    }
}

.about_socios_container {
    width: 100vw;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;

    & .about_socios_text_container {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        & h2 {
            font-size: 40px;
            width: 80%;
            height: 11%;
            text-align: left;
        }

        & p {
            font-size: 18px;
            width: 80%;
            letter-spacing: 1px;
            text-align: left;
        }

        & .button_socio_about_container {
            width: 80%;
            height: 11%;
            display: flex;
            align-items: center;
            justify-content: left;
        
            & button {
                height: 70%;
                width: 40%;
                font-size: 20px;
            }
        }
    }

    & .about_socios_img_container {
        width: 50%;
        height: 100%;
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 15% 100%);

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

.beneficios_socios_container {
    width: 100vw;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;

    & .beneficios_socios_img_container {
        width: 50%;
        height: 100%;
        clip-path: polygon(0 0, 100% 0%, 85% 100%, 0 100%);

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    & .beneficios_socios_text_container {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        & h2 {
            font-size: 40px;
            width: 80%;
            height: 11%;
            text-align: left;
        }

        & p {
            font-size: 18px;
            width: 80%;
            letter-spacing: 1px;
            text-align: left;
        }
    }
}

.socio_container {
    width: 100vw;
    height:60vh;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 60px 10px rgba(0, 0, 0, .3);
    background-image:url('../assets/imgs/papel-arrugado.webp');
    background-position: center;
    background-size: cover;

    & h2{
        font-size: 50px;
        width: 80%;
        height: 30%;
        text-align: center;
    }

    & .buttons_socio_container {
        width: 40%;
        height: 40%;
        display: flex;
        align-items: center;
        justify-content: center;

        & button {
            width: 47%;
            height: 35%;
            font-size: 20px;   
        }
    }
}

.footer_container {
    width: 100vw;
    height: 15vh;
    background-color: var(--color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    & .footer_redes_container {
        width: 40%;
        height: 70%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        & img {
            height: 50px;
            object-fit: contain;
        }
    }

    & .footer_copyright_container {
        width: 100%;
        height: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-fifth);
    }
}

@media (max-width: 900px) {
    .nav_container {
        & .nav_links_container {
            & img {
                display: inline-block;
                width: 80px;
            }

            & button {
                display: none;
            }
        }
    }

    .header_container {
        & .buttons_header_container {
            width: 70%;
            height: 10%;
            margin: 20px 0;
        }
    }

    .about_socios_container {
        & .about_socios_text_container {
            & .button_socio_about_container {
                width: 100%;
                margin-left: 20%;
            }
        }
    }

    .socio_container {
        height: 40vh;

        & h2 {
            height: 20%;
        }

        & .buttons_socio_container {
            width: 70%;
            height: 50%;
        }
    }

    .footer_container {
        & .footer_redes_container {
            width: 80%;

            & img {
                height: 70px;
            }
        }
    }

}

@media (max-width: 450px) {
    .menu_container {
        & img {
            width: 80px;
        }

        & .nav_links_container {
            & button {
                font-size: 50px;
            }
        }
    }

    .nav_container {
        & .nav_links_container {
            & img {
                display: inline-block;
                width: 80px;
            }

            & button {
                display: none;
            }
        }
    }

    .header_container {
        & h1 {
            width: 95%;
            font-size: 40px;
        }

        & .buttons_header_container {
            width: 95%;

            & .button_1_style {
                font-size: 18px;
            }
        }
    }

    .about_socios_container {
        height: 80vh;
        & .about_socios_img_container {
            display: none;
        }

        & .about_socios_text_container {
            width: 90%;
            border-bottom: 2px solid rgba(0, 0, 0, .3);

            & h2 {
                height: 20%;
                width: 90%;
                text-align: center;
            }

            & .button_socio_about_container {
                & button {
                    width: 50%;
                    height: 80%;
                }
            }
        }
    }

    .beneficios_socios_container {
        height: 80vh;

        & .beneficios_socios_img_container {
            display: none;
        }

        & .beneficios_socios_text_container {
            width: 90%;

            & h2 {
                height: 20%;
                width: 90%;
                text-align: center;
            }
        }
    }

    .socio_container {
        height: 50vh;

        & h2 {
            width: 95%;
            height: 35%;
            font-size: 40px;
        }

        & .buttons_socio_container {
            width: 90%;
        }
    }

    .footer_container {
        height: 20vh;
    }
}