@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;800&display=swap");

:root {
    /* COLORES */
    --color_primario: #0d80a7;
    --color_secundario: #252525;
    --color_negro: #0b0b0b;
    --color_blanco: #fff;

    /* TAMAÑOS */
    --ancho_maximo: 1200px;
    --padding_izquierda_derecha: 20px;
    --padding_arriba_abajo: 100px;
    --altura_header: 80px;

    /* TAMAÑOS DE FUENTE */
    --titulo_h1: 100px;
    --titulos_h2: clamp(1.2rem, 5.6vw, 2rem);
    --subtitulo_seccion_principal: clamp(1.1rem, 4vw, 2rem);
    --parrafo_seccion_principal: clamp(0.6rem, 2.3vw, 1.1rem);
    --parrafo_secciones: clamp(1.2rem, 2.5vw, 1.4rem);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul,
ol {
    list-style: none;
}

a {
    color: var(--color_blanco);
    text-decoration: none;
}

a:hover {
    color: var(--color_blanco);
}

a:visited {
    color: var(--color_blanco);
}

a:active {
    color: var(--color_blanco);
}

html {
    height: 100%;
    scroll-behavior: smooth;

}



body {
    font-family: "Raleway", sans-serif;
    min-height: 100%;
    background-color: var(--color_negro);



}

main {
    min-height: calc(100vh - var(--altura_header));
    display: flex;
    flex-direction: column;
}











/* ESTILOS GLOBALES COMPARTIDOS */
.titulo_h1 {
    font-size: var(--titulo_h1);
    color: var(--color_primario);

}

.titulos_h2 {
    font-size: var(--titulos_h2);
    text-align: center;
    color: var(--color_primario);
    margin: 0 0 45px 0;
}

.titulos_h3 {
    color: var(--color_blanco);
    font-size: clamp(1rem, 4vw, 1.5rem);
}

.estilo_sec_glob {
    margin: 0 auto;
    width: min(100%, var(--ancho_maximo));
    padding: var(--padding_arriba_abajo) var(--padding_izquierda_derecha);
    position: relative;
}




/* ------- HEADER STYLES --------------------------------------------------------------------- */
header {
    width: 100%;
    align-items: center;
    display: flex;
    height: 50px;
    background-color: black;
    z-index: 20;



    .logo_menu_header {
        height: 150px;
        width: 150px;
        margin-top: 100px;
        border-bottom-right-radius: 20px;
        z-index: 20;

    }

    .menu_header {
        min-width: 50%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .item_menu_header {
        cursor: pointer;
        color: var(--color_blanco);
        background-color: black;
        font-size: 10px;
        min-height: 50px;
        min-width: auto;
        padding-left: 50px;
        padding-right: 50px;
        padding-top: 10px;


    }

    .item_menu_header:hover {
        color: var(--color_blanco);
        /* background-color: rgba(255, 255, 255, 0.100); */
        text-shadow: 0px 0px 10px var(--color_primario);

    }

    label {
        cursor: pointer;
    }

}



/* ------- SECCIÓN PRINCIPAL ESTILOS ---------------------------------------------------------------- */

.sec_principal {

    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 80px;

    & article {
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    & .sec_prin_subtitulo {
        text-align: center;
        color: var(--color_blanco);
        font-size: var(--subtitulo_seccion_principal);
    }

    & .sec_prin_parrafo {
        color: var(--color_blanco);
        font-size: var(--parrafo_seccion_principal);
        margin: 20px auto 65px 0;
        padding-right: 15px;
        max-width: 470px;
        text-align: left;

    }






    & .sec_prin_botones {
        gap: 15px;


        display: flex;
        justify-content: center;



        & .boton_sec_prin {
            padding: .9rem 1.5rem;
            background-color: var(--color_primario);
            font-weight: bold;

            border: 3px solid var(--color_primario);
            cursor: pointer;
            border-radius: 10px;



            background-color: var(--color_primario);
            color: var(--color_negro);

            font-size: clamp(1rem, 3vw, 2rem);
            transition: all 0.2s ease-out
        }

        & .boton_sec_prin:hover {
            background-color: transparent;
            color: var(--color_blanco);
            border: 3px var(--color_primario) solid;
            box-shadow: 0px 0px 10px 0px var(--color_primario);
        }



        .boton_contacto {
            width: 58px;
            height: 58px;
            background-color: var(--color_primario);
            border-radius: 100%;
            border: 3px solid var(--color_primario);
            cursor: pointer;
            transition: all 0.5s ease-out
        }

        .boton_contacto:hover {
            color: var(--color_blanco);
            box-shadow: 0px 0px 10px 5px var(--color_primario);
        }
    }










    & .logo_contacto {
        width: 50px;
        height: 50px;

    }

    & .article_contacto {
        display: flex;
        justify-content: center;
    }


    & .imgs_sec_contacto {
        position: relative;

        & .img_sec_contacto {
            width: 400px;
            border-radius: 100%;
            margin-left: 100px;
            box-shadow: 0px 0px 25px 2px var(--color_primario);
        }

        & .img_sec_contacto2 {
            border-radius: 100%;
            width: 120px;
            position: absolute;
            translate: -120px 268px;

        }
    }

    .sec_prin_imagenes {
        position: relative;

        & .img_sec_prin {
            display: grid;
            width: 400px;
            object-fit: cover;
            height: auto;
            box-shadow: 0px 0px 25px 2px var(--color_primario);

            border-radius: 20px;
        }

        & .img_secun_sec_prin {
            border-radius: 20px;
            width: 120px;
            position: absolute;
            translate: -300px -450px;
        }

        & .img_secun_sec_prin2 {
            border-radius: 20px;
            width: 180px;
            position: absolute;
            translate: -280px -60px;
        }

    }

    & h2 {
        font-size: clamp(1.2rem, 4.6vw, 2.8rem);
        text-align: center;
        color: var(--color_primario);
    }

}





















/* ------- SOBRE MÍ STYLES -------------------------------------------------------------- ------- */

.sec_proyecto {
    text-align: center;
    background-color: var(--color_secundario);
    display: flex;
    align-items: start;
    justify-content: space-evenly;
    height: 500px;
    border-radius: 50px;
    margin-top: 50px;
    background: linear-gradient(160deg, rgb(29, 29, 29) 35%, rgb(77, 77, 77) 100%);
    padding: 0;
    position: relative;


    & article {
        width: 45%;
        align-items: center;
        margin: 0px 20px;

        & h2 {
            padding: 18px;
            font-size: 50px;
        }

        & p {
            text-align: start;
            margin-top: -30px;

        }
    }

    & img {
        margin: auto;
        padding: auto;
        width: auto;

        border-radius: 50px;


    }

    & .img_proyecto {
        box-shadow: 8px 0px 10px -5px var(--color_negro);
        width: 55%;
        height: 90%;
        margin-left: 30px;

    }

    & .logo_proyecto {
        width: clamp(3rem, 6.5vw, 6.25rem);
        height: clamp(3rem, 6.5vw, 6.25rem);
        border-radius: 50%;
        position: absolute;
        top: 0rem;
        right: 0rem;
        box-shadow: -0.0625rem 0.0625rem 0.625rem 0.3125rem rgba(14, 14, 14, 0.504);
        z-index: 2;
        object-fit: cover;
        width: 100px;
        height: 100px;

    }



    & .img_masproy {
        margin: auto;
        padding: auto;
        width: auto;
        height: 50px;
        border-radius: 50px;
    }



    & h2 {
        color: var(--color_primario);
        font-size: var(--titulos_h2);
    }



    & p {
        font-size: var(--parrafo_secciones);
        color: var(--color_blanco);
    }

    & .sec_prin_botones {
        margin-top: 70px;
        display: flex;
        justify-content: center;



        & .boton_sec_prin {
            padding: .9rem 1.5rem;
            background-color: var(--color_primario);
            font-weight: bold;

            border: 3px solid var(--color_primario);
            cursor: pointer;
            border-radius: 10px;



            background-color: var(--color_primario);
            color: var(--color_negro);

            font-size: clamp(1rem, 3vw, 2rem);
            transition: all 0.2s ease-out
        }

        & .boton_sec_prin:hover {
            background-color: transparent;
            color: var(--color_blanco);
            border: 3px var(--color_primario) solid;
            box-shadow: 0px 0px 10px 0px var(--color_primario);
        }
    }




}






.sec_proyecto::after {
    content: "";
    position: absolute;
    height: inherit;
    width: inherit;
    background-image: linear-gradient(225deg, rgb(39, 39, 39) 35%, rgb(58, 58, 58) 100%);
    z-index: -2;
    padding: 5px;
    translate: 0px -5px;
    border-radius: 50px;
    box-shadow: 0px 0px 25px 2px rgba(0, 162, 255, 0.38);
}

/* ------- SOBRE MÍ STYLES reverso -------------------------------------------------------------- ------- */




.sec_proyecto_r {
    text-align: center;
    background-color: var(--color_secundario);
    display: flex;
    align-items: start;
    justify-content: space-evenly;
    height: 500px;
    border-radius: 50px;
    margin-top: 50px;
    background: linear-gradient(160deg, rgb(29, 29, 29) 35%, rgb(77, 77, 77) 100%);
    padding: 0;
    position: relative;

    & h2 {
        color: var(--color_primario);
        font-size: var(--titulos_h2);
    }

    & p {
        font-size: var(--parrafo_secciones);
        color: var(--color_blanco);
    }

    & article {
        width: 45%;
        align-items: center;
        margin: 0px 20px;

        & h2 {
            padding: 18px;
            font-size: 50px;
        }

        & p {
            text-align: start;
            margin-top: -30px;

        }
    }

    & img {
        margin: auto;
        padding: auto;
        width: auto;

        border-radius: 50px;

    }

    & .img_proyecto_r {
        box-shadow: -8px 0px 10px -5px var(--color_negro);
        width: 55%;
        height: 90%;
        margin-right: 30px;

    }

    & .logo_proyecto_r {
        width: clamp(3rem, 6.5vw, 6.25rem);
        height: clamp(3rem, 6.5vw, 6.25rem);
        border-radius: 50%;
        position: absolute;
        top: 0rem;
        right: 0rem;
        box-shadow: -0.0625rem 0.0625rem 0.625rem 0.3125rem rgba(14, 14, 14, 0.504);
        z-index: 2;
        object-fit: cover;
        width: 100px;
        height: 100px;

    }

    & .sec_prin_botones {
        margin-top: 120px;
        display: flex;
        justify-content: center;



        & .boton_sec_prin {
            padding: .9rem 1.5rem;
            background-color: var(--color_primario);
            font-weight: bold;

            border: 3px solid var(--color_primario);
            cursor: pointer;
            border-radius: 10px;



            background-color: var(--color_primario);
            color: var(--color_negro);

            font-size: clamp(1rem, 3vw, 2rem);
            transition: all 0.2s ease-out
        }

        & .boton_sec_prin:hover {
            background-color: transparent;
            color: var(--color_blanco);
            border: 3px var(--color_primario) solid;
            box-shadow: 0px 0px 10px 0px var(--color_primario);
        }
    }

}

.sec_proyecto_r::after {
    content: "";
    position: absolute;
    height: inherit;
    width: inherit;
    background-image: linear-gradient(45deg, rgb(39, 39, 39) 35%, rgb(58, 58, 58) 100%);
    z-index: -1;
    padding: 5px;
    translate: 0px -5px;
    border-radius: 50px;
    box-shadow: 0px 0px 25px 2px rgba(0, 162, 255, 0.38);
}


/* ------- SOBRE MÍ STYLES mas -------------------------------------------------------------- ------- */

.sec_proyecto_mas {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 290px;
    border-radius: 50px;
    margin-top: 50px;
    background: linear-gradient(210deg, rgb(29, 29, 29) 35%, rgb(77, 77, 77) 100%);
    padding: 0;
    position: relative;




    & article {
        width: 100%;
        height: 100%;

        margin: 0px;


        & h2 {


            font-size: 50px;
        }

    }

    & img {


        width: 100%;
        height: auto;
        border-radius: 50px;



    }


}

.sec_proyecto_mas::after {
    content: "";
    position: absolute;
    height: inherit;
    width: inherit;
    background-image: linear-gradient(225deg, rgb(39, 39, 39) 35%, rgb(58, 58, 58) 100%);
    z-index: -1;
    padding: 5px;
    translate: 0px -1px;
    border-radius: 50px;
    box-shadow: 0px 0px 25px 2px rgba(0, 162, 255, 0.38);
    transition: all 0.5s ease-in;
}


/* -------  -------------------------------------------------------------- ------- */



.carrusel {
    width: 100%;
    height: auto;
    overflow-x: auto;
    margin: 50px 10px;
    display: flex;
    gap: 1em;
    scroll-behavior: smooth;
    position: relative;

}

.carrusel::-webkit-scrollbar {
    display: none;
}

.carrusel::scroll-button(right),
.carrusel::scroll-button(left) {
    content: ">";
    border: none;
    background-color: var(--color_primario);
    font-family: Consolas;
    font-size: 3rem;
    color: var(--color_blanco);
    height: 60px;
    width: 60px;
    border-radius: 50%;
    padding-bottom: .1em;
    cursor: pointer;
    position: absolute;
    translate: 600px 220px;
}

.carrusel::scroll-button(left) {
    content: "<";
    translate: -600px 220px;
}

.carrusel::scroll-button(right):disabled,
.carrusel::scroll-button(left):disabled {
    opacity: 0.5;
    cursor: auto;
}

.card {
    flex: 0 0 20em;
    height: 400px;
    width: 200px;
    background-color: var(--color_secundario);
    padding: 10px;
    margin: 5px;
    border-radius: 20px 30px 20px 20px;

    position: relative;
    box-shadow: 0px 0px 5px 0px var(--color_negro);


    & article {
        width: 100%;
        translate: -20px;


        & h2 {
            font-size: 35px;
            text-align: center;
            padding: 0px;
        }

        & p {
            margin-top: 1px;
            text-align: start;
            margin-top: -30px;
            font-size: 16px;
        }
    }

    & .img_proy_card {
        box-shadow: 0px 2px 20px 0px var(--color_negro);
        width: auto;
        height: 150px;
        border-radius: 20px;
        margin-top: 20px;



    }

    & .img_large_card {
        width: 300px;
        height: 150px;
        border-radius: 20px;
        margin-top: 20px;
        box-shadow: 0px 2px 20px 0px var(--color_negro);
    }

    & .logo_proy_card {
        margin: 0;
        padding: 0;
        width: 65px;
        height: 65px;
        border-radius: 100%;
        position: absolute;
        translate: 95px -10px;
        z-index: 1;
        /* box-shadow: -1px 1px 10px 5px rgba(14, 14, 14, 0.504); */

    }

}

.card:hover {
    box-shadow: 0px 0px 10px 0px var(--color_primario);
    transition: all 0.5s ease-out
}

.titulo_carrusel {
    margin-top: 50px;
    margin-bottom: -65px;

}