@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Pixelify+Sans:wght@400..700&display=swap');



:root{
    --color-primario: rgb(0, 0, 0);
    --color-secundario: rgb(255, 255, 255);
    --color-tercieario: #22D4FD; 
    --color-quaternario: #272727;
    --color-quintenario: #ff0000 ;
    --color-sextoario: #009200;

    --fuente-montserrat:'Montserrat',sans-serif;
    --fuente-krona-one: 'Krona One', sans-serif;
    --fuente-pixelify :'Pixelify Sans', sans-serif;

}

* {
    padding: 0;
    margin:0;
}


body {
    box-sizing: border-box;
    background-color:var(--color-primario);
    color: var(--color-secundario);
}

.heder{
    padding: 3.4%
}

.heder-menu{
    display: flex;
    gap: 2%;
    justify-content:flex-start;
    
}

.heder-menu-link{
    font-family:var(--fuente-montserrat);
    font-size: 1rem;
    font-weight:600;
    color: var(--color-tercieario);
    text-decoration: none;
    padding: auto;
    margin: 0.5rem

}
.color-rojo{
    font-family:var(--fuente-montserrat);
    font-size: 1rem;
    font-weight:600;
    color: var(--color-quintenario);
    text-decoration: none;
    padding: auto;
}

.color-verde{
    font-family:var(--fuente-montserrat);
    font-size: 1rem;
    font-weight:600;
    color: var(--color-sextoario);
    text-decoration: none;
    padding: auto;
}


.presentacion {
    padding: 2%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 0 40px -20px var(--color-tercieario);

}

.presentacion__contenido{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 1.5rem;
    padding:auto;
    
}

.presentacion__contenido__titulo{
    font-size: 0.1rem;
    font-family:var(--fuente-krona-one);
    font-size: 1.2rem;
    padding: 3% 1% 1% 1%;
    
}

.titulo-destaque {
    color:var(--color-tercieario) ;
}

.texto-p1{
    font-size: 0.9rem;
    font-family: var(--fuente-montserrat);
    list-style: none;
    padding: 1%;
}

.interactive-icon{
    width: 5rem;
    text-align: end;
}



.texto-link{
    width: 12rem;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    border-radius: 0.5rem;
    font-size: 1.3rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.1rem;
    color: var(--color-secundario);
    font-family: var(--fuente-montserrat);
    border: 0.1rem solid var(--color-tercieario);
    gap: 0.2em;

}

.texto-link img {
    height: auto;
    display: block;
}

.texto-link:hover {
    background-color: var(--color-quaternario);
    color: var(--color-tercieario);
    font-family: var(--fuente-pixelify);
    

}

.mi-foto{
    width: 30rem;
    width: 25rem;
    border-radius: 16px;
    box-shadow: 0px 0px 40px -20px var(--color-tercieario);
}

.Buton-enlaces{
    display: flex ;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
    
}

.texto-redes{
    font-family: var(--fuente-krona-one);
    font-size:  1rem;
    font-weight: 300;
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 1.2rem;
}

.footer {
    background-color: var(--color-tercieario);
    color:var(--color-primario);
    text-align: center;
    padding: 0.1rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    font-family: var(--fuente-krona-one);
    font-weight: 300;
    font-size: 0.7rem;
}
/*---------------------------------------------------------------*/

.cards_container--proyectos {
    margin-bottom: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.proyectos h1{
    font-size: 1.5rem;
    font-family: var(--fuente-montserrat);
    color: var(--color-tercieario);
    text-align: center;
    margin-bottom: 30px;
    
}

.proyectos{
    box-shadow: 0px 0px 40px -20px var(--color-tercieario);
}

.proyectos--contenedor {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 3.4%;

}

.proyectos--contenedor2 {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-bottom: 10.4%;
}

.cards{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 400px;
    height: 500px;
    background-color: var(--color-);
    border-radius: 10px;
    
    
}

.container_textCard--proyectos{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    height: 100px;
    width: 400px;
    font-family: var(--fuente-montserrat);
    word-break: break-word; 
    text-overflow: ellipsis;
}



.container_imgCard--proyectos img{
    height: 303px;
    width: 400px;
    border-radius: 10px;
    margin: 10px;
}    

.container_btn--proyectos{
    display: flex;
    gap: 50px;
}


.btn_demo, .btn_repo{
    border-radius: 20px;
    background-color: transparent;
    border: none;
    color: var(--color-tercieario);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    gap: 10px;
}




@media (max-width: 800px) { 
    .presentacion{
        flex-direction: column-reverse;
        padding: 5%;
    }

    .heder-menu{
        display: flex;
        gap: 2%;
        justify-content:center;
        padding: 5% ;
    }
    
    .presentacion__contenido{
        width: auto;
        text-align: center;
        
    }

    .presentacion__contenido__titulo{
        text-align: center;
    }

    .texto-p1{
        text-align: center;
    }
}