:root{ /*sirve para guardar "variables" como paletas de colores o medidas*/
    --negro: hsl(0, 0%, 16%);
    --negroclaro: hsl(0, 0%, 37%);
    --azulgervi: rgb(48, 122, 206);
    --blanco: #FFFFFF;
    --amarillo:  rgb(235, 177, 53);
    --naranja: rgb(241, 171, 39);
}

/* Fuentes */
.krub-bold {
    font-family: "Krub", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.krub-regular {
    font-family: "Krub", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.vt323-regular {
    font-family: "VT323", monospace;
    font-weight: 400;
    font-style: normal;
}

/* Globales */
html{
    font-size: 62.5%;/*esta medida en especifico sirve para usar rems más facilmente con respecto a pixeles*/
    box-sizing: border-box; /* box model, nos evita el problema de sumar paddings y margins*/
    /*scroll-snap-type: y mandatory;*/
}

/*### Scroll Snap ###
    .servicios, .navegacion_principal{
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }*/

*, *:before, *:after {/*Boxmodel pt.2*/
    box-sizing: inherit;
}

body{
    font-size: 16px; /*1rem = 10px*/
    font-family: "Krub", sans-serif;
    /*background-image: linear-gradient(to bottom, var(--negro) 40%, var(--negroclaro) 100%);/*aplicar un gradiente de color*/
    background: var(--negro);
    background-repeat: no-repeat;
    background-size: cover;
}

.pencilBackground {
    margin: 0;
    background-image: url(../images/pencilback.png) ;
    background-repeat: repeat-x;
    background-size:348px 100%;
    background-attachment: fixed;
}

.contenedor {
    max-width: 120rem;
    margin: 0 auto;/*centra el elemento*/
}

/* design systems */
/* tipografía */
h1 {
    font-size: 3.8rem;
}
h2 {
    font-size: 2.8rem;
    margin-top: 0;
    margin-bottom: 0px;
}
h3 {
    font-size: 1.8rem;
}
h1,h2,h3 {
    text-align: center;
}

a:hover{
    cursor: pointer;
}

header{
    background-color: var(--negro);
    padding: 2.5rem;
}
header h1{
    margin: 0;
}

.boxstyle { /*<main>*/
    background-color: #ececec;
    /*sombra*/
    -webkit-box-shadow: 0px 6px 8px 1px rgba(0,0,0,0.85);
    -moz-box-shadow: 0px 6px 8px 1px rgba(0,0,0,0.85);
    box-shadow: 0px 6px 8px 1px rgba(0,0,0,0.85);
    /*borde redondeado*/
    border-radius: .8rem;
    /*Box Model*/
    padding: 2rem;
    margin-bottom: 2rem;
}

/* Titulos */
.titulo {
    font-family: "VT323", monospace;
    font-weight: bold;
    letter-spacing: .2rem;
    color: #FFFFFF;
}

.titulo span {
    font-size: 2rem;
    font-weight: normal;
    text-align: justify;
}

.boton {
    background-color: var(--azulgervi);
    color: var(--blanco);
    padding: 1rem 3rem;
    margin-top: 1rem;
    font-size: 2rem;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: .5rem;
    width: 90%;
    text-align: center;
    border: none;
}
@media (min-width: 768px) {/*Media Queries "mq" (mientras la pantalla no sea menor) */
    .boton {
        width: auto;
    }
    
}
.boton:hover{
    background-color: var(--amarillo);
    color: var(--negro);
    cursor: pointer;
}
/*Utilidades*/
.w-sm-100{
    width: 100%;
}
@media (min-width: 768px) {
    .w-sm-100 {
        width: auto;
    }
}
.alinear-derecha{
    justify-content: flex-end;
}
.flex{
    display: flex;
}

/* Navegación */
.nav-bg{
    background-color: var(--azulgervi);
}

.navegacion_principal{
    display: flex; /*Activación del flex*/
    flex-direction: column;/*los elementos hijos los ordena en columnas*/
    align-items: center;/*mueve al centro los elementos*/
}
@media (min-width: 768px) {
    .navegacion_principal{
        flex-direction: row;/*cambia el orden de los elementos a filas*/
        justify-content: space-between;/*alinea los elementos verticalmente*/
    }
}

.navegacion_principal a {
    padding: 1rem;
    color: var(--blanco);/*aplicación de las variables del root:*/
    text-decoration: none;/*quita el subrayado de los enlaces*/
    font-size: 2rem;
    font-weight: 700;/*negritas*/
}

.navegacion_principal a:hover{/*cuando el cursor está encima del elemento*/
    background-color: var(--amarillo);
    color: var(--negro);
}

/* HERO */
.hero {
    background-image: url(../images/forest.png); /** el "../" indica regresar al directorio anterior **/
    background-repeat: no-repeat;/*evita que se repita la imagen de fondo*/
    background-size: cover;/*hace que la imagen cubra todo el espacio*/
    height: 450px;
    position: relative;/*posición como objeto padre para que el objeto hijo tenga una pos. absoluta*/
    margin-bottom: 2rem;
}

.welcome {
    max-width: 90rem;
}
.welcome a{
    text-decoration: none;
    color: blue;
    font-weight: bold;
}

.contenido-hero {
    position: absolute;/*permite que se modifique la posicion del elemento de forma absoluta con respecto al espacio padre*/
    background-color: rgba(0, 0, 0, 0.438);/**anterior forma de hacerlo**/
    background-color: rgb(0 0 0 / 48%); /** nueva forma mas corta de transparencias **/
    width: 100%;
    height: 100%;

    display: flex;/**vv permite centrar tanto vertical como horizontalmente elementos vv**/
    flex-direction: column;
    align-items: center;
    justify-content: center;/*Alineación vertical*/
}

.contenido-hero h2, /**seleccionar dos elementos dentro de un elemento con cierta etiqueta**/
.contenido-hero p {
    color: var(--blanco);
}

.contenido-hero h2{
    font-size: 6rem;
    text-align: left;
}

.contenido-hero .ubicacion{
    padding: 1px;
    display: flex;
    align-items: center;
}

/*Servicios*/
.servicio {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.servicio h3 {
    color: var(--azulgervi);
    font-weight: bold;
}
.servicio p {
    line-height: 2;/*Interlineado*/
    text-align: center;
    margin-bottom: 1rem;
}

.servicio .iconos {
    height: 10rem;
    width: 10rem;
    background-color: var(--amarillo);
    border-radius: 30%; /*crea un circulo*/
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (min-width: 768px) {
    .servicios {
        display: grid;/*activar el grid*/
        grid-template-columns: 33.3% 33.3% 33.3%;
        grid-template-columns: 1fr 1fr 1fr;/*manera simplificada donde 1fr es una fraccion del 100%*/
        grid-template-columns: repeat(4, 1fr);/*aun más simplificado donde se repite 3 veces "1fr"*/
        column-gap: 1rem;/*crear separacion entre los elementos*/ 
        
    } 
    .servicio p{
        text-align: left;
    }
}
/*Contacto*/
.redes {
    display: grid;/*activar el grid*/
    grid-template-columns: repeat(2, 1fr);/*aun más simplificado donde se repite 3 veces "1fr"*/
    column-gap: 1rem;/*crear separacion entre los elementos*/ 
}

@media (min-width: 728px) {
    .redes{
        grid-template-columns: repeat(4, 1fr);
    }
}


.red{
    display: flex;
    justify-content: center;
    align-items: center;
}
.linkstyle {
    text-decoration: none;
    color: var(--azulgervi);
    text-align: center;
}
.red p {
    margin:0;
    font-weight: bold;
}

.footer {
    text-align: center;
}

/*########### SOBRE MÍ ###########*/
.seccion {
    max-width: 100rem;
    margin: 0 auto;/*centra el elemento*/
}
.seccion h2{
    color: var(--blanco);
    font-family: "Krub", sans-serif;
    font-weight: bold;
    font-size: 4rem;
    margin-top: 4rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

@media (min-width: 728px) {
    .seccion h2{
        text-align: left;
    }
}

.linea {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.linea-centrada {
    display: flex;
    flex-direction: row;/*cambia el orden de los elementos a filas*/
    justify-content:space-evenly;/*alinea los elementos verticalmente*/
}
.linea-centrada_elemento{
    text-align: center;
}
.linea-centrada_elemento img{
    height: 5rem;
}

.linea p {
    margin-top: 2rem;
    font-size: 1.8rem;
    max-width: 70rem;
    margin-left: 0rem;
    text-align: justify;
}
.linea_imagen {
    /*width: 30rem;*/
    height: 30rem;
    border-radius: 3rem;
}

/*Cuando el ancho de la pantalla es mallor a 728 px*/
@media (min-width: 728px) {
    .linea {
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: flex-start;   
    }
    .linea p {
        max-width: 80rem;
        margin-top: 0rem;
        font-size: 1.8rem;
        margin-left: 2rem;
    }
    .threecolumns{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
    }

}
.column p{
    text-align: center;
}

.linea_imagen-PencilHero {
    max-height: 20rem;
    max-width: 80%;
}

/*########## PENCIL HERO #############*/
.two_columns {
    display: grid;
    column-gap: 2rem;
    margin: 2rem;
    justify-items: center;
}
.twoxtwo_grid{
    display: grid;
    gap: 1rem;
    margin: 2rem;
    justify-items: center;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr);
}
.twoxtwo_grid img{
    max-width: 100%;
    max-height: 30rem;
}
.togrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 728px) {
    .togrid{
        display: flex;
    }
}
.c80-20{
    grid-template-columns: 80% 20%;
}
.c50-50{
    grid-template-columns: 1fr 1fr;
}
.login-register{
    max-height:25rem;
    margin: auto 0;
    justify-content: center;
}

.two_columns img{
    border-radius: 2rem;
    max-width: 80%;
    margin: auto 0;
}

.two_columns .boxstyle {
    margin-bottom: 0;
}

.seccion-pencil {
    max-width: 120rem;
    margin: 0 auto;/*centra el elemento*/
    text-align: center;
}

.section_title-pencil {
    background-color: rgb(0 0 0 / 48%);
    border-radius: 1rem;
    max-width: 34rem;
    color: white;
    margin: 0 auto;

}
@media (min-width:728px){
    .section_title-pencil{
        margin-left: 2rem;
    }
}

.section_title-pencil h2{
    text-align: center;
    margin-bottom: 1rem;
}

.projectlogo {
    margin-top: 3rem;
    height: 20rem;

}
.flexing{
    display: flex;
}
.imgflexing{
    width: 20rem;
    height: 20rem;
    max-width: 20rem;
    max-height: 100%;
    margin-left: 2rem;
}

.linea_rightup{
    display: flex;
    flex-direction: column-reverse;
}
.linea_rightup img {
    margin: 0 auto;
}


@media (min-width: 728px) {
    .linea_rightup{
        flex-direction: row;
    }
    .linea_rightup p {
        margin-right: 2rem;
    }
}




.proximamente{
    margin: 0 auto;/*centra el elemento*/
    text-align: center;
    background-color: rgb(0 0 0 / 48%);
    border-radius: 1rem;
    width: 34rem;
    color: white;
    margin-bottom: 2rem;
}


.Screenshot{
    width: 70%;
}
.parrafo-justified{
    font-size: 1.5rem;
    text-align: justify;
}
@media (min-width:728px){
    .parrafo-justified{
        font-size: 1.8rem;
    }
}


.lista{
    text-align: left;
    line-height: 3rem;
}
.lista ol li {
    margin-bottom: 1.5rem;
    line-height: 1.5rem;
}

.lista ol li::marker {
    font-weight:bold;
}
/*
.servicio .iconos svg{
    scale: 2;
}*/
/*###manera larga pero facil de hacer un grid ###
    grid-template-columns: 300px 300px;
    grid-template-rows: 200px 800px;
    
#### manera corta de hacer el grid ###
    grid: 200px 800px / 300px 300px;*/