:root {
    --headingFont: 'PT Sans', sans-serif;
    --bodyFont: 'Open Sans', sans-serif;
    --primary: #784D3C;
    --secondary: #c0a080;
    --fontColor: #333333;
    --gray: #e1e1e1;
    --white: #ffffff;
    --black: #000000;
}
html {
    box-sizing: border-box; /* para que el padding y border no afecten el tamaño de los elementos */
    overflow-x: hidden; /* evita scroll horizontal */
    font-size: 62.5%; /* 1rem = 10px */
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    display: grid;
    min-height: 100dvh; /* para que el body ocupe toda la altura de la ventana */
    grid-template-rows: auto 2fr auto; /* para que el footer esté al final de la página */
    font-family: var(--bodyFont);
    font-size: 1.6rem;
    line-height: 2; /* para mejorar la legibilidad - ideal para párrafos de blog. Esto es el interlineado */
}

/* Globales */
.container {
    max-width: 120rem; /* para limitar el ancho máximo del contenedor */
    width: 90%; /* para que no ocupe todo el ancho en pantallas pequeñas */
    /* 
    ** Otra forma de ocupar el max-width y width al mismo tiempo es:
    ** width: min(90%, 120rem);
    **/
    margin: 0 auto;
}
a {
    text-decoration: none;
}
h1, h2, h3, h4 {
    font-family: var(--headingFont);
    line-height: 1.2; /* para mejorar la legibilidad de los títulos */
}
h1 {
    font-size: 4.8rem;
}
h2 {
    font-size: 4rem;
}
h3 {
    font-size: 3.2rem;
}
h4 {
    font-size: 2.8rem;
}
img {
    max-width: 100%;
}

/* Utilidades */
.no-margin {
    margin: 0;
}
.no-padding {
    padding: 0;
}
.center-text {
    text-align: center;
}
.bold {
    font-weight: 700;
}
.regular {
    font-weight: 400;
}

/* Header - Puedes guiarte aquí para hacer un hero */
.header {
    background-image: url(../img/banner.webp);
    height: 60rem;
    background-size: cover; /* para que la imagen cubra todo el contenedor */
    background-repeat: no-repeat; /* para que no se repita la imagen */
    background-position: center center; /* para centrar la imagen horizontalmente y verticalmente x,y */
}

.header__text {
    color: var(--white);
    margin-top: 5rem;
}
@media (min-width: 768px) {
    .header__text {
        margin-top: 15rem;
    }
}
.bar {
    padding: 3rem 0;
}
@media (min-width: 768px) {
    .bar {
        display: flex;
        justify-content: space-between; /* para separar los elementos a los extremos */
        align-items: center; /* para centrar los elementos verticalmente */
    }
}

.logo {
    color: var(--white);
}
.logo__name{
    font-weight: 400;
}

@media (min-width: 768px) {
    .navigation {
        display: flex;
        gap: 2rem;
    }
}
.navigation__link {
    display: block; /* para que los enlaces estén uno debajo del otro */
    text-align: center;
    font-size: 1.8rem;
    color: var(--white);
}

@media (min-width: 768px) {
    .main-content {
        display: grid;
        grid-template-columns: 2fr 1fr; /* para que el contenido principal ocupe el doble que la barra lateral */
        column-gap: 4rem;
    }
}

.post {
    border-bottom: 1px solid var(--gray);
    margin-bottom: 2rem;
}
.post:last-of-type { /* para evitar el borde inferior en el último post */
    border-bottom: none;
    margin-bottom: 0;
}
.button {
    display: block;
    font-family: var(--headingFont);
    color: var(--white);
    text-align: center;
    padding: 1rem 3rem;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2rem;
}
@media (min-width: 768px) {
    .button {
        display: inline-block;
    }
}
.button:hover {
    cursor: pointer;
    opacity: .8;
}
.button--primary {
    background-color: var(--black);
}
.button--secondary {
    background-color: var(--primary);
}
.courses {
    list-style: none;
}
.widget-course {
    border-bottom: 1px solid var(--gray);
    margin-bottom: 2rem;
}
.widget-course:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}
.widget-course__label {
    font-family: var(--headingFont);
}
.widget-course__label, 
.widget-course__info {
    font-size: 2rem;
}

.footer {
    background-color: var(--black);
    margin-top: 4rem;
}

@media (min-width: 768px) {
    /*  Método 1 con flexbox
    .about-us {
        display: flex;
        justify-content: space-between; para separar los elementos a los extremos
    }
    .about-us__image,
    .about-us__text {
        flex-basis: calc(50% - 1rem); para que cada elemento ocupe la mitad del contenedor menos el espacio entre ellos
    }    
    */
    
    .about-us {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2rem;
    }
}

/* Cursos */
.course {
    padding: 3rem 0;
    border-bottom: 1px solid var(--gray);
}
@media (min-width: 768px) {
    .course {
        display: grid;
        grid-template-columns: 1fr 2fr;
        column-gap: 2rem;
    }
}
.course:last-of-type {
    border-bottom: none;
}
.course {
    border-bottom: 1px solid var(--gray);
    margin-bottom: 2rem;
}
.course:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}
.course__label {
    font-family: var(--headingFont);
}
.course__label, 
.course__info {
    font-size: 2rem;
}

/* Contacto */
.contact-bg {
    background-image: url(../img/contacto.jpg);
    height: 40rem;
    background-size: cover;
    background-repeat: no-repeat;
    
}

.form {
    background-color: var(--white);
    margin: -5rem auto 0 auto;
    width: 95%;
    padding: 5rem;
}
.field {
    display: flex; /* para alinear el label y el input en una fila */
    margin-bottom: 3rem; /* para separar los campos del formulario */
}
.field__label {
    flex: 0 0 9rem; /* 0 0 (0: no tiene factor de crecimiento, 0: tampoco se hará más pequeño) para que el label ocupe 9rem de ancho y no se expanda */
    text-align: right; /* para alinear el texto a la derecha */
    padding-right: 2rem; /* para separar el label del input */
}
.field__input {
    flex: 1; /* para que el input ocupe el resto del espacio */
    border: 1px solid var(--gray);
}
.field__input--textarea {
    height: 20rem; /* para que el textarea sea más alto */
}