/*Para crear snippets para css : Ctrl+shift+P - Snippets-Configure Snippets - css(para que se cree el archivo css.json)*/

/*Para saber las medidas estandar de dispositivos ver :https://getbootstrap.com/docs/5.3/layout/breakpoints/ 
o https://css-tricks.com/snippets/css/media-queries-for-standard-devices/*/


*{
    margin: 0 ;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
}
:root{
    --bgColor:#f7f7f7;
    --headerColor:#C0C0C0;
    --secondColor:#eaeaea;
    --textColor:#3f3844;
    --mainColor:#e354f3;
    --secondaryColor:#17b6f9;
    --otherColor:#5d6c83;
}
html{
    font-size: 62.5%;/*1rem=10px, Con el porcetaje es más dinamico*/
    overflow-x:hidden ;/*Oculta el texto si hay desbordamiento*/
}
body{
    background-color: var(--bgColor);
    color: var(--textColor);
    font-size: 1.6rem;
    font-family: "AR One Sans", sans-serif;

}

@media (max-width: 768px ){
    body{
        font-size: 1.4rem;
    }    
}
section{
    min-height:100vh ;
    padding: 10rem 10% 2rem;
}
@media (max-width: 768px ){
    section{
        min-height: auto;
        padding: 11rem 3% 2rem;
    }
}

/*Utilidades 
==============================*/
.heading{
    font-size: 3.5rem;
    text-align: center;
    
}
.heading-description{
    font-size: 1.8rem;
    margin-bottom: 3rem;
    text-align: center;
}

span{
    color: var(--mainColor);
}

@media (max-width: 768px ){
    .heading{
        font-size: 3rem;
    }

    .heading-description{
        font-size: 1.4rem;
    }

}

/*Header
====================*/
.header{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 10%;
    background-color: var(--headerColor);
    box-shadow: 0 1px .3rem var(--textColor);/*margen izq tamañoborde TamañoSombra Color  */
}
@media (max-width: 768px ){
    .header{
        flex-direction: column;
        padding: 1rem 2%;
    }
}
.fotoLogo{
    width: 8rem;
    
}
.logo{
    font-size: 4rem;
    color: var(--mainColor);
    font-weight: 700;
    transition-duration: 0.5s;
}

@media (max-width: 768px ){
    .logo{
        font-size: 3.5rem;
        margin-bottom: 1rem;
    }    
}
.logo:hover{
    transform: scale(1.05);
}
.nav-bar{
    display: flex;
    gap: 1.5rem;/*espacio entre los elementos del nav*/
}
.nav-bar a{
    color: var(--bgColor);
    font-weight: 600;
    transition: 0.3 ease;/*ease es para que se haga en todas partes*/
    border-bottom: .2rem solid transparent;
    text-transform: uppercase;

}
@media (max-width: 768px ){
    .nav-bar{
        gap: 1rem;
    }
    .nav-bar a{
        font-size: 1.2rem;
    }
}
.nav-bar a:hover,.nav-bar a.active{/*a.active, Cuando el elemento tenga la clase active*/
    border-bottom-color: var(--mainColor);
    color: var(--mainColor);
}
/* 




/* Redes Sociales
==========================*/

.socialMedia a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4.2rem;
    height: 4.2rem;
    border: .2rem solid var(--mainColor);
    border-radius: 50%;
    font-size: 2rem;
    color: var(--mainColor);
    margin: 3rem 1.5rem 3rem 0;
    transition: .3s ease;/* la transición comenzará lentamente, acelerará en la parte media y luego desacelerará al final
     Otras opciones
    linear:La animación se mueve a una velocidad constante de principio a fin. 
    ease-in:La animación comienza lentamente y acelera progresivamente. 
    ease-out:La animación comienza rápido y desacelera hasta el final. 
    ease-in-out:Comienza y termina lentamente, siendo más rápido en el medio. 
    */

}

.socialMedia a:hover{
    transform: scale(1.2) translateY(-1rem);/*se transforma 1.2 puntos más grande y se traslada hacia arriba(con el numero negativo, un punto)*/
    background-color: var(--mainColor);
    color: var(--bgColor);
    box-shadow: 0 0 2.5rem var(--mainColor); /*añade la sombra (entodos los sitios, con el 0 0) el tamaño con el 2.5 y el color*/
}



/*Modulos
==================*/

.modulos{
    background-color: var(--secondColor);
    margin:0 auto;
}

.modulosContenedor{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    margin-top: 4rem;
}

.modulo{
    /*width: calc(90%/3);/*Para calcular el 94%/2 : lo hemos cambiado a la hora de ajustar a pantallas pequeñas
    sin utilizar media query*/
    flex: 0 0  30rem;
    /* flex: <flex-grow> <flex-shrink> <flex-basis>;
    flex-grow: 1;       el ítem puede crecer si hay espacio extra 
    flex-shrink: 1;    el ítem puede encogerse si no hay suficiente espacio 
    flex-basis: 30rem; tamaño base preferido del ítem */
    /* 
    ?opciones para utilizar Flex
    ?.div1 { flex: 1 1 30rem; } --- crece y encoge normalmente 
    ?.div2 { flex: 2 1 30rem; } --- crecerá el doble que .div1 
    ?.div3 { flex: 1 0 30rem; } --- no se encoge, pero sí crece 
    ?.div4 { flex: 0 0 30rem; }  --- nunca crece ni se encoge, fijo en 30rem */
    
    background-color: var(--bgColor);
    align-items: center;
    border-radius: 1rem;
    border: .1rem solid transparent;
    padding: 2rem;
    box-shadow: 0 0 .5rem var(--mainColor);
    transition: all .5s ease;
    height: 25rem;
}
.modulo:hover{
    cursor: pointer;
    transform: translateY(-.5rem) scale(1.02);
}

.modulo img{
    display: block;
    align-items: center;
    border-radius: 1rem;
    margin: 0 auto 1rem auto;
    border: 1px solid black;
    height: 10rem;

}
.moduloTitulo{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.moduloTitulo h4{
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.4;
}
.moduloTituloEnlace{
    color: var(--textColor);
    width: 80%;
    background-color: var(--bgColor);
}
.github{
    display: inline-flex;
    font-size: 2.5rem;
    border-radius: 50%;
    padding: .5rem;
    margin-bottom: 1rem;
    color: var(--textColor);
    background-color: var(--mainColor);
    
}

.github:hover{
    color: var(--mainColor);
    background-color: var(--textColor);

}
.modulo p{
    margin-bottom: 2rem;
}
.modulo p a{
    color: var(--textColor);
}
.moduloCuerpo{
   display: block;/* para poder darle dimensiones al enlace */
  width: 100%; 
  height: 85%;
  margin-bottom: 0;
}





/*Footer
===============*/

.footer{
    background-color: var(--secondColor);
    padding:0 ;
    text-align: center;
    border-top: 0.2rem solid var(--mainColor);
}

.footerContent{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.flecha a{
    display: inline-flex;
    color: var(--mainColor);
    border: 0.2rem solid var(--mainColor);
    font-size: 3rem;
    padding: 1rem;
    border-radius: 2rem;
    transition: .3s ease;
}

.flecha a:hover{
    box-shadow: 0 0 2.5rem var(--mainColor);
    transform: scale(1.1) translateY(-1rem);
}
.footer p{
    color: var(--textColor);
}