/*Globales*/

:root{

    --fuenteHeading: "PTsans", sans-serif;
    --fuenteParrafo: "Open ans", sans-serif;
    --colorPrimario: #784D3C;
    --colorBlaco: #ffffff;
    --colorNegro: #000000;
    --colorGris: #e1e1e1;


}

html{
 
    box-sizing: border-box; /*padding y margin no afecte ancho de elementos*/
    font-size: 62.5%;


}

*,*:before,*:after{

    box-sizing: inherit;

}

body{

    font-family: var(--fuenteParrafo);
    font-size: 1.6rem;
    line-height: 2;
}

/*Globales*/

.contenedor{
    max-width: 120rem;
    width: 90%;
    margin: 0 auto;
    width: min(90%,120rem);

}

a{

    text-decoration: none;

}
h1,h2,h3,h4{

font-family: var(--fuenteHeading);
line-height: 1.2;

}
h1{

    font-size: 4.8rem;
    font-family: var(--fuenteHeading);
}
h2{

    font-size: 4rem;
    font-family: var(--fuenteHeading);
}
h3{

    font-size:3.2rem;
    font-family: var(--fuenteHeading);
}
h4{

    font-size: 2.8rem;
    font-family: var(--fuenteHeading);
}
img{

    max-width: 100%;

}

.no-margin{

    margin: 0rem;

}
.no-padding{

padding: 0rem;

}

.centrar-texto{

    text-align: center;

}




/*Header*/
.webp .header{

    background-image: url(../img/banner.webp);

}
.no-webp .header{

    background-image: url(../img/banner.jpg);

}



.header{

    background-image: url(../img/banner.jpg);
    height: 60rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;/*parte que se enfoca la imagen , horizontal vertical*/


}

.header__texto{

    text-align: center;
    color: var(--colorBlaco);
    margin-top: 5rem;
    line-height: 4rem;

}

@media (min-width: 768px){

    .header__texto{

        margin-top: 15rem;
        line-height: 5rem;
    }
  
}
.barra {
    padding-top: 4rem;
}

@media (min-width: 768px){
    .barra{

        display: flex;
        justify-content: space-between;
        align-items: center;

        } 
}

.logo{

color: var(--colorBlaco);


}

.logo__nombre{
    font-weight: normal;

}

.logo__bold{

    font-weight:bold;

}


@media (min-width: 768px){

    .navegacion{

        display: flex;
        gap: 2rem;
        margin-top: 0;
    }
  
}
.navegacion__enlace{
margin-right: 2rem;
display: block;
text-align: center;
font-size: 1.8rem;
color: var(--colorBlaco);

}

/*BLOG*/

@media (min-width: 768px){

    .contenido-principal{

        display: grid;
        grid-template-columns: 2fr 1fr;
        column-gap: 4rem;


    }
  
}

.entrada{

border-bottom: 1rem solid var(--colorGris) ;
margin-bottom: 2rem;

}
.entrada:last-of-type{

    border-bottom: 0rem;
    margin-bottom: 0rem;
    
}

.boton{

    display: block;
    font-family: var(--fuenteHeading);
    color: var(--colorBlaco);
    text-align: center;
    padding: 1rem 3rem;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 2rem;
    border: none;
}

.boton:hover{

cursor: pointer;

}

@media (min-width: 768px){
 .boton{

display: inline-block;

 } 
}
.boton--primario{

background-color: var(--colorNegro);


}

.boton--secundario{

    background-color: var(--colorPrimario);
    text-transform: uppercase;
    
    }

.cursos{


    list-style: none;
}
.widget-curso{

    border-bottom: 1rem solid var(--colorGris) ;
    margin-bottom: 2rem;
}
.widget-curso:last-of-type{

    border-bottom: 0rem ;
    margin-bottom: 0rem;
}

.widget-curso--label{

font-family: var(--fuenteHeading);
font-weight: bold;

}
.widget-curso--info{

    font-weight:normal;
}
.widget-curso--label
,.widget-curso--info{

    font-size: 2rem;
 }
    
     
    


/*Footer*/

.footer{

background-color: var(--colorNegro);
padding: 3rem 1rem;
margin-top: 5rem;
}

.barra--footer{

padding-top: 0rem;

}

/*Sobre nosotros*/

@media (min-width: 768px){
 .sobre-nosotros{
     
    display: flex;
    gap:2rem;
    justify-content: space-between;

} 

.sobre-nosotros__imagen,
.sobre-nosotros__texto{

flex-basis: calc(50% - 1rem);

}
.sobre-nosotros__imagen{

    flex: 0 0 calc(50% - 1rem);

}
.sobre-nosotros__text{

    flex: 0 0 calc(50% - 1rem);
}

.sobre-nosotros{

 display: grid;
 grid-template-columns: repeat(2 , 1fr);
 column-gap: 2rem;    
}

}

.curso{

padding: 3rem;
border-bottom: 1rem solid var(--colorGris);

}
@media (min-width: 768px){
 .curso{

    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 2rem;
 } 
}
.curso:last-of-type{

    border:none
}

.curso--label{

    font-family: var(--fuenteHeading);
    font-weight: bold;
    
    }
    .curso--info{
    
        font-weight:normal;
    }
    .curso--label
    ,.curso--info{
    
        font-size: 2rem;
     }
        

     /*Contacto*/

     .contacto-bg{

        background-image: url(../img/contacto.jpg);
        height: 40rem;
        background-size: cover;
        background-repeat: no-repeat;

     }

     /*Formulario*/

     .formulario{

        background-color: var(--colorBlaco);
        margin: -5rem auto 0 auto;
        width: 95%;
        padding: 5rem;

     }

     .campo{

            display: flex;
            margin-bottom: 2rem;
           

     }

    .campo__label{

            flex: 0 0 9rem;
            text-align: right;
            padding-right: 2rem;

    }

    .campo__field{

        flex: 1;
        border: 2px solid var(--colorGris);
    }

    .campo__field--textarea{

        height: 20rem;
        

    }
    .campo--enviar{
    margin-left: auto;
    margin-right: 2rem;

    }