/* PALETA DE COLORES Y CONSTANTES */
:root{
    --fuenteHeadings: 'PT Sans', sans-serif; /* h1 h2 h3 h4 ...*/
    --fuenteParrafos: 'Open Sans', sans-serif; /* p */
    --scotch: #a94007;
    --gris: #e1e1e1;
    --blanco: #ffffff;
    --negro: #000000;
}
/* GLOBALES */
html{
    font-size: 62.5%;
    box-sizing: border-box;
}
*, *:before, *:after{
    box-sizing: inherit;
}  

/* AQUI SE SIGUE EL ENFOQUE DE MOBILE FIRST PARA SITIOS RESPONSIVOS, se pone primero como se ve en celular y en los media query para adaptar a cualquier dispositivo mas grande */

body{
    font-size: 16px; /*1 rem = 10 px*/
    font-family: var(--fuenteParrafos);
    line-height: 2; /*interlineado*/
}
a{ /*todos los enlaces*/
    text-decoration: none;
}
img { /*todas las imagenes*/
    max-width: 100%;
}
h1, h2, h3, h4{ /*todos los headers*/
    font-family: var(--fuenteHeadings);
}
h1{
    font-size: 4.8rem;
}
h2{
    font-size: 4rem;
}
h3{
    font-size: 2.5rem;
}
h4{
    font-size: 2rem;
}
.no-margin{ /*clase creada para quitarle el margen predeterminado que tienen los headers y parrafos en HTML*/
    margin: 0;
}
.no-padding{ /*clase creada para quitarle el padding predeterminado que tienen algunos elementos en HTML*/
    padding: 0;
}
.centrar{ /*clase creada para centrar cualquier elemento de texto*/
    text-align: center;
}
.contenedor{ /*clase creada para centrar todos los elementos de BARRA y main CONTENIDO PRINCIPAL*/
    max-width: 90rem;
    width: 90%;
    margin: 0 auto;
}
.boton{ /*clase que controla el aspecto de todos los botones en la pagina*/
    color: var(--blanco);
    text-align: center;
    font-family: var(--fuenteHeadings);
    font-size: 1.7rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 2rem;
    padding: 1rem;
    border: none;
    display: block; /*para que ocupe todo el espacio disponible en la vista de celular*/
}
@media(min-width: 768px){ /*tableta y computadora*/
    .boton{
        display: inline-block; /*le da solo el tamaño que requiere*/
    }
}
.boton:hover{
    cursor: pointer;
}
.boton--primario{ /*modificador que hereda todas las propiedades de boton y aqui se le cambia el color*/
    background-color: var(--negro);
}
.boton--secundario{
    background-color: var(--scotch);
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/***************************************************** HEADER *****************************************************/
.webp .header{ /*clase que analiza el navegador a ver si soporta webp*/
    background-image: url(../imagenes/banner.webp);
}
.no-webp .header{ /*si no, carga la normal*/
    background-image: url(../imagenes/banner.jpg);
}
.header{ /*clase que coloca la imagen de fondo*/
    height: 50rem; /*altura de la imagen*/
    background-size: cover; /*para que tome todo el espacio disponible*/
    background-position: center center; /*para que se adapte a los tamaños de pantalla (video 78)*/
    background-repeat: no-repeat;
    position: relative;/* para el velo de abajo*/
}
@media(min-width: 768px){ /*tableta y computadora*/
    .header{
        height: 40rem;
        background-position: top center;
    }
}
.header--velo{ /*clase para aplicacion y transparencia del velo sobre la imagen*/
    position: absolute;
    background-color: rgba(0, 0, 0, .5); /*Transparencia de la imagen*/
    width: 100%;
    height: 100%;
}

@media(min-width: 768px){ /*tableta y computadora*/
    .barra{ /*clase que alinea el LOGO y la NAVEGACION en la BARRA*/
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.logo{ /*clase que controla todo el LOGO*/
    color: var(--blanco);
}
.logo__nombre{ /*clase que controla el h1 del LOGO*/
    font-weight: normal;
}
.logo__nombre--negrita{ /*clase que controla el span del h1 del LOGO*/
    font-weight: bold;
}

.navegacion__enlace{ /*clase que controla los enlaces dentro de NAVEGACION*/
    color: var(--blanco);
    font-size: 1.8rem;
    /*celulares*/
    display: block;
    text-align: center;
    margin-bottom: 1rem; /*para agregar separacion entre los enlaces*/
}
.navegacion__enlace:hover{
    font-weight: bold;
}
.navegacion__enlace:last-of-type{
    margin-bottom: 0;
}
@media(min-width: 768px){ /*tableta y computadora*/
    .navegacion{ /*clase que controla la disposicion de los enlaces*/
        display: flex;
        gap: 2rem;
    }
    .navegacion__enlace{
        margin-bottom: 0;
    }
}

.texto{ /*clase que controla los textos debajo de la BARRA*/
    text-align: center;
    color: var(--blanco);
    padding: 1rem;
    padding-top: 0;
}
.texto h2{
    font-size: 3.4rem;
}
@media(min-width: 768px){ /*tableta y computadora*/
    .texto{
        margin-top: 7rem;
    }
    .texto h2{
        font-size: 4rem;
    }
}

/********************************************** CONTENIDO PRINCIPAL ***********************************************/
@media(min-width: 768px){ /*tableta y computadora*/
    .contenido-principal{ /*clase que contiende BLOG y ASIDE y los posiciona en grid columnas*/
        display: grid;
        grid-template-columns: 2fr 1fr; /*2 columnas, una mas grande que otra*/
        column-gap: 4rem;
    }
}
/*************************************************** MAIN *********************************************************/
.entrada{ /*clase que contiene todos los elementos dentro de cada article (ENTRADA) individual*/
    border-bottom: 1px solid var(--scotch); /*linea de separacion entre ENTRADAS*/
    margin-bottom: 2rem;
}
.entrada:last-of-type{ /*en la ultima ENTRADA no se requiere separacion ni margen inferior*/
    border: none;
    margin-bottom: 0;
}
/************************************************** ASIDE *********************************************************/
.cursos{ /*clase que controla la lista de CURSOS (unordered list)*/
    list-style: none; /*le quita el formato de viñetas de lista*/
}

.widget-curso{ /*clase que controla los elementos individuales de lista CURSOS*/
    border-bottom: 1px solid var(--scotch); /*linea de separacion entre cursos*/
    margin-bottom: 2rem;
}
.widget-curso:last-of-type{ /*el ultimo curso no requiere separacion ni margen inferior*/
    border: none;
    margin-bottom: 0;
}
.widget-curso__label{
    font-family: var(--fuenteHeadings);
    font-weight: bold;
}
.widget-curso__span{
    font-weight: normal;
}
/************************************************** FOOTER ********************************************************/
.footer{ /*clase que controla el fondo del footer*/
    background-color: var(--negro);
    margin-top: 2rem;
    padding-bottom: 2rem;
}
@media(min-width: 768px){ /*tableta y computadora*/
    .footer{ /*clase que controla el fondo del footer*/
        padding-bottom: 0;
    }
}
.footer--ad{ /*clase que controla el parrafo de aviso de privacidad*/
    color: var(--blanco);
    text-align: center;
    font-size: 1.2rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
/************************************************** nosotros.html *************************************************/
@media(min-width: 768px){ /*tableta y computadora*/
    .nosotros{ /*clase que controla la disposicion de la imagen y el texto en NOSOTROS*/
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    .nosotros__texto p:first-of-type{ /* el primer p */
        margin-top: 0;
    }
}
/************************************************** cursos.html ***************************************************/
.curso{ /*clase que controla cada CURSO individual dentro del main*/
    border-bottom: 1px solid var(--scotch); /*linea de separacion entre cursos*/
    margin-bottom: 2rem;
}
.curso:last-of-type{ /*el ultimo curso no requiere separacion ni margen inferior*/
    border: none;
    margin-bottom: 0;
}    
.curso__span{
    font-weight: normal;
}
.curso__label{
    font-family: var(--fuenteHeadings);
    font-weight: bold;
}
@media(min-width: 768px){ /*tableta y computadora*/
    .curso{ 
        display: grid;
        grid-template-columns: 1fr 2fr; /*2 columnas, una mas grande que otra*/
        gap: 1rem 2rem;
    }
    .curso__label{
        margin: 0;
    }
    .curso__descripcion{
        margin-bottom: 0;
    }
}
@media(min-width: 900px){ /*computadora*/
    .curso__informacion h4{
        margin-top: 4rem;
    }
}

/************************************************ contacto.html ***************************************************/
.webp .contacto-background{ /*clase que analiza el navegador a ver si soporta webp*/
    background-image: url(../imagenes/contacto.webp);
}
.no-webp .contacto-background{ /*si no, carga la normal*/
    background-image: url(../imagenes/contacto.jpg);
}
.contacto-background{ /*clase que coloca la imagen de fondo*/
    height: 25rem; /*altura de la imagen*/
    background-size: cover; /*para que tome todo el espacio disponible*/
    background-position: center center;
    background-repeat: no-repeat;
}

.formp{
    font-family: var(--fuenteHeadings);
    font-size: 1.6rem;
    margin-bottom: 2rem;
}
.formulario{ /*clase que controla el fondo y todo lo que está dentro del FORM*/
    background-color: var(--blanco);
    margin: -5rem auto 0 auto; /*para que se encime con la imagen de fondo*/
    width: 90%; /*para que no tome todo el ancho disponible y se vean las esquinas de la imagen de fondo*/
    padding: 2rem;
    padding-bottom: 0;
}
.formulario__boton{ /*controla el boton del formulario*/
    width: 100%;
    margin-top: 1.5rem;
}

.campo-especifico__input{ /*controla el box del campo*/
    border: 2px solid var(--gris); /*color del borde del box*/
    width: 100%; /*para que el box ocupe todo el espacio disponible en celulares*/
    height: 3.2rem; /*altura del box en celulares*/
}
.campo-especifico__input--textarea{ /*controla el textarea del mensaje*/
    height: 15rem;
}
@media(min-width: 768px){ /*tableta y computadora*/
    .campo-especifico{ /*clase que controla cada campo individual dentro del FORM*/
        display: flex;
        margin-bottom: 1.5rem; /*margen para separar cada campo*/
        gap: 1rem; /*espacio que separa al label del box*/
    }
    .campo-especifico__label{ /*controla el texto del campo*/
        flex: 0 0 14.3rem; /*factor de crecimiento alch no se video 88*/
        text-align: right;
    }
    .campo-especifico__input{ /*controla el box del campo*/
        flex: 1; /*video 88*/
    }
    .campo-especifico__input--textarea{ /*controla el textarea del mensaje*/
        height: 10rem;
    }
    .formulario__boton{
        width: 15rem;
    }
    .campo-boton{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .formp{
        font-size: 1.7rem;
    }
}

/* ESTO VIENE DE JAVASCRIPT PARA LA VALIDACION DEL FORMULARIO*/
.error{
    color: red;
    text-align: center;
    margin: 0;
}
.valido{
    color:green;
    text-align: center;
    margin: 0;
}
.individual{
    color: red;
    text-align: center;
    font-size: 1.5rem;
    line-height: 2rem;
    margin: 1rem 0;
}
@media(min-width: 768px){ /*tableta y computadora*/
    .individual{
        line-height: 1rem;
        margin: 1.5rem 0;
        margin-left: 14rem;
    }
}
.rojo{
    border: 2px solid red; /*color del borde del box*/
}
.verde{
    border: 2px solid green; /*color del borde del box*/
}
.fecha{
    text-align: center;
    color: var(--scotch);
    margin-bottom: 0;
    line-height: 0.5;
}