/*ya se cargo el script de JS modernizr. la función de este script es determinar si el navegador
que esta entrando al sitio soporta o no webp. en caso de que sí lo soporte, genera una clase
llamada webp, en caso contrario genera una clase llamada no-webp*/

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

.no-webp{
    background-image: url(../img/banner.jpg);
}

.header{    
    height: 50rem;/*altura de la imagen*/
    background-size: cover;/*para que cubra todo el espacio disponible*/
    background-repeat: no-repeat;
    background-position: center center;
}

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

/*con este meidaquery se baja un poco más el texto para que se vea más centrado*/
@media (min-width:768px){
    .header__texto{
        margin-top: 10rem;
    }
}

@media (min-width:768px){
    .barra{
        display: flex;/*alinea los elementos horizontalmente uno después del otro*/
        justify-content: space-between;/*separa los elementos a los extremos izq - der*/
        align-items: center;/*alinea los elementos verticalmente tomando como referencia
                            el alto de la caja*/
        
    }
}

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

.logo__nombre{
    font-weight: 400;
}

.logo__bold{
    font-weight: 700;
}

@media (min-width:768px){
    .navegacion{
        display: flex;
        gap: 2rem;
    }
}

/*En la barra de navegacion, cuando se visualiza en moviles, los menus deben mostrarse uno
debajo del otro. entonces para lograr eso se utiliza display:block*/
.navegacion__enlace{
    display: block;
    text-align: center;
    font-size: 1.8rem;
    color: var(--blanco);
}

.barra{
    padding: 2rem 0;
}