:root {
    --fuenteHeading: 'pt Sans', sans-serif;
    --fuenteParrafo: 'open Sans', sans-serif;

    --primario: #784D3C;
    --gris: #e1e1e1;
    --blanco: #ffffff;
    --negro: #000000;
}

/* ACA HACEMOS QUE EL BORDER, EL PADING, ETC NO AFECTE EL ANCHO DE NUESTROS ELEMENTOS */
html {
    box-sizing: border-box;
    /* ACA HACEMOS QUE 1REM MIDA 10PX RECORDAR ES IMPORTANTE HACERLO SIEMPRE*/
    font-size: 62.5%;
}

/* esto hace heredar del padre html lo que es la fuente    */
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: var(--fuenteParrafo);
    font-size: 1.6rem;
    /* aca le pasamos un inter lineado*/
    line-height: 2;
}


/** GLOBALES**/

/* aqui fijamos estos globales para que el codigo funciones bien en cualquier dispositivo, max-width es el 
maximo en el ancho de la pantana 1200px, width 90% es el porcentaje que ocupara el contenido cuando 
achiquemos la pantalla */
.contenedor {
    max-width: 120rem;
    width: 90%;
    /* codigo nuevo reemplaza las dos lineas de arriba*/
    width: min(90%, 120rem);
    margin: 0 auto;
}

/* aca le quitamos los interlineados a los enlaces*/
a {
    text-decoration: none;
}

/* definimos fuente y tamaño*/
h1,h2,h3,h4 {
    font-family: var(--fuenteHeading);
    /* aqui achicamos un poquito el interlineado para que la letras al achicar el dispositivo quede mas juntita*/
    line-height: 1.2;
    

}

h1 {
    font-size: 4rem;
}

@media (min-width: 768px) {
    h1 {
        font-size: 3.5rem;
    }
}
h2 {
    font-size: 3.8rem;
    width: 100%;
    
    
}
h3 {
    font-size: 3.2rem;
    color: var(--negro);
    text-align: center;
    margin: 0;
}
h4 {
    font-size: 2.8rem;
}

img {
    max-width: 100%;
}

/** UTILIDADES **/

.no-margin {
    margin: 0;
}

.no-padding {
    padding: 0;
}

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

.espacio {
    margin-top: 7rem;
}


.espacioMenor {
    margin-top: 4rem;
}
span {
    font-weight: bold;
}



.header {
    background-image: url(../img/header.jpg);
    height: 90%;
    /* que tome todo el espacio disponible */
    background-size: cover; 
    background-repeat: no-repeat; 
    /* este hace que si achicamos la imagen siempre se muestra el centro de la img*/
    background-position: center;
    position: relative;
    
    
}

.barraHeader {
    padding-top: 2rem;
    background-color: var(--negro);
}


@media (min-width: 768px) { 
    .barraHeader {
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: var(--negro);
        color: var(--blanco);
        height: 5rem;
        padding: 0;
        
        
    }
}

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


.navegacion {
    display: flex;
    justify-content: center;
}

@media (min-width: 768px) {
    .navegacion {
        color: var(--blanco);
        font-size: 2.5rem;
        display: flex;
        column-gap: 3rem;
    }
}
.navegacion {
    color: var(--blanco);
    font-size: 2.5rem;
    display: flex;
    column-gap: 3rem;
}
    



.header__texto {
    text-align: center;
    color: var(--blanco);


}


@media (min-width: 768px) {
    .header__texto {
        text-align: center;
        color: var(--blanco);
        margin-top: 15rem;

    }
}

.redes {
  display: flex;
  justify-content: center;
  column-gap: 2rem;
  position: absolute;
  bottom: 5%;
  width: 100%;
  
}


@media (min-width: 768px) {
    .redes {
        width: 20rem;
        height: 20rem;
        display: grid;
        align-items: center;
        margin-left: 0;
        justify-content: start;
        margin-left: 2rem;
        position: 0;
        padding-bottom: 3rem; 

        
        

    }
}

.red {
    color: var(--negro);
}
    



/************     MAIN    **************/

@media (min-width: 768px) {
    section {
        display: flex;
        width: auto;
        height: 430px;
    }
        
}

@media (min-width: 768px) {
    section img {
        width: 20rem;
        flex-grow: 1;
        object-fit: cover;
        opacity: .8;
        transition: .5s ease;
    }
}

@media (min-width: 768px) {
    section img:hover {
        cursor: crosshair;
        width: 350px;
        opacity: 1;
        filter: contrast(120%);
    }
}



footer {
    margin-top: 5rem;
}

.textoGaleria {
    background-color: var(--negro);
    color: var(--blanco);
}