:root {
  --fuenteHeading: "PT Sans", sans-serif;

  --fuenteParrafos: "Open Sans", sans-serif;

  --primario: #784d3c;
  --gris: #e5e7e9;
  --blanco: #fff;
  --negro: #000000;
}

html {
  box-sizing: border-box;
  font-size: 62.5%; /*1rem = 10px*/
}

*,
*::before *::after {
  box-sizing: inherit;
}

body {
  font-family: var(--fuenteParrafos);
  font-size: 1.6rem;
  line-height: 2;
}

/* Globales*/

.contenedor {
  /* max-width: 120rem; /*Maximo 1200 px mientras tenga ese espacio disponible, pero si es menos usa un width del 90%*/
  /* width: 90%; El width al 90% hace que el contenido no se desborde */
  width: min(90%, 120rem);
  margin: 0 auto;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fuenteHeading);
  line-height: 1.2;
}

h1 {
  font-size: 4.8rem;
}

h2 {
  font-size: 4rem;
}

h3 {
  font-size: 3.2rem;
}

h4 {
  font-size: 2.8rem;
}

img {
  max-width: 100%;
}
/*Lo que se va a utilzar mas de una vez lo mas conveniente es escribirlas en globales*/

/*Utlidades*/

.no-margin {
  margin: 0; /*Elimina los margin automaticos*/
}

.no-padding {
  padding: 0; /* Elimina los padding automaticos*/
}

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

/*Header*/

.webp,
.header {
  background-image: url(../media/images/banner.webp);
}

.no-webp,
.header {
  background-image: url(../media/images/banner.jpg);
}
.header {
  height: 60rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center; /*center center: centrara la imagen horizontalmente y verticalmente, funciona con background-size: cover;*/
}

.header__texto {
  text-align: center;
  color: var(--blanco);
  margin-top: 5rem;
}

@media (min-width: 768px) {
  .header__texto {
    margin-top: 15rem;
  }
}

.barra {
  padding: 4rem 0;
}
@media (min-width: 768px) {
  .barra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 4rem;
  }
}

.logo {
  color: var(--blanco);
}

.logo__nombre {
  font-weight: 400;
}

.logo__bold {
  font-weight: 700;
}
@media (min-width: 768px) {
  .navegacion {
    display: flex;
    gap: 2rem;
  }
}
.navegacion__enlace {
  display: block;
  text-align: center;
  font-size: 1.8rem;
  color: var(--blanco);
}

@media (min-width: 768px) {
  .contenido-principal {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 4rem;
  }
}

.entrada {
  border-bottom: 1px solid var(--gris);
  margin-bottom: 2rem;
}

.entrada:last-of-type {
  /*Selecciona el ultimo elemento de la clase entrada*/
  border: none;
  margin-bottom: 0;
}

.boton {
  display: block; /* Para que ocupe todo el ancho*/
  font-family: var(--fuenteHeading);
  color: var(--blanco);
  text-align: center;
  padding: 1rem 3rem;
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 2rem;
  border: none;
}

@media (min-width: 768px) {
  .boton {
    display: inline-block; /*Para que no ocupe todo el ancho*/
  }
}

.boton:hover {
  cursor: pointer;
}

.boton--primario {
  background-color: var(--negro);
}

.boton--secundario {
  background-color: var(--primario);
}

/* el -- signica que esta heredando de otra clase, pero en algo va a cambiar*/

/*Naranja: Margin*/
/*Verde: Padding*/

.cursos {
  list-style: none; /* Elimina estilo de viñetas*/
}

.widget-curso {
  border-bottom: 1px solid var(--gris);
  margin-bottom: 2rem;
}

.widget-curso:last-of-type {
  /*Siempre tomara el ultiumo elemento*/
  border: none;
  margin-bottom: 0;
}
.widget-cursos__label {
  font-family: var(--fuenteHeading);
  font-weight: 700;
}

.widget-cursos__info {
  font-weight: 400;
}
.widget-cursos__label,
.widget-cursos__info {
  font-size: 2rem;
}

.footer {
  background-color: var(--negro);
  padding-bottom: 3rem;
  margin-top: 4rem;
}

/*Se puede reutilizar las clases de : barra de navegacion y el logo, gracias a BEM, ya que utiliza bloques y cada uno tiene sus propios estilos*/

/*Sobre Nosotros*/

@media (min-width: 768px) {
  /* -- Forma de hacerlo con Flex: Esto se vera bien en un dispositivo que nos soporte gap --

   .sobre-nosotros {
    display: flex;
    justify-content: space-between;
  }
  .sobre-nosotros__imagen,
  .sobre-nosotros__texto {
    flex-basis: calc(50% - 1rem);
  }

  -- Factor de crecimiento: si la imagen crece 1 px el texto crecera 2 px --

  .sobre-nosotros__texto {
    flex: 2;

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

  .sobre-nosotros__imagen {
    flex: 1;

    -- otra forma: --
    flex: 0 0 calc(50% - 1rem);
  } */

  /*Forma de hacerlo con grid*/

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

/*Nuestros Cursos*/

.curso {
  padding: 3rem;
  border-bottom: 1px solid var(--gris);
}

@media (min-width: 768px) {
  .curso {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 1fr 2fr: 1fr es el 33% y 2fr es el 66%*/
    column-gap: 2rem; /*Espacio entre columnas*/
  }
}
.curso:last-of-type {
  border: none;
}

.cursos__label {
  font-family: var(--fuenteHeading);
  font-weight: 700;
}

.cursos__info {
  font-weight: 400;
}
.cursos__label,
.cursos__info {
  font-size: 2rem;
}

/*Contacto*/

.contacto-bg {
  background-image: url(../media/images/contacto.jpg);
  background-size: cover; /*Para que la imagen se ajuste al contenedor*/
  background-repeat: no-repeat; /*Para que no se repita la imagen*/
  background-position: center center; /*Para que la imagen se centre*/
  height: 40rem;
}

/*Que es un ID? Es un selector que se utiliza para identificar un elemento unico en el documento, no se puede repetir en el documento, solo se puede utilizar una vez*/

.formulario {
  background-color: var(--blanco);
  margin: -5rem auto 0 auto; /*Para que se vea bien en dispositivos moviles*/
  padding: 5rem;
  width: 95%;
}

.campo {
  display: flex; /*Para que los elementos se alineen en una sola linea*/
  margin-bottom: 2rem;
}

.campo__label {
  flex: 0 0 9rem; /*Para que ocupe el 0% del espacio disponible, no crezca ni se encoja y tenga un ancho de 9rem*/
  text-align: right;
  padding-right: 2rem;
}

.campo__field {
  flex: 1; /*Para que ocupe todo el espacio disponible*/
  border: 1px solid var(--gris);
}

.campo__field--textarea {
  height: 20rem;
}