@media screen and (min-width: 976px){ /*Indicamos que no se vea en pantallas de más de 768px)*/

    .bars-menu{ /*Es el contenedor del menú superior derecho con las tres líneas*/
        display: none;
    }

    .main-nav{
        display: none;
    }

}

@media screen and (max-width: 976px){ /*No es la medida común, pero lo hago así para que se adapte a tablet*/
    
.container-menu .bars-menu{ /*Indicamos adónde va a estar ubicado el menu hamburguesa dentro del CONTAINER-MENÚ*/
        grid-column: 5 / 6;
        justify-self: end;
        grid-row: 1 / 2;
        align-self: center;
        margin-right: 25px;   
    }    

.container-menu .botonera{
        display: none;
    }

    
.container-menu{ /*hacemos que la barra que contiene el menú quede fija cuando hagamos scroll*/
        /*position: fixed;*/
        background-color: rgb(141, 37, 37, 0.4);
        padding-bottom: 10px;
        padding-top: 10px;
        
    }
 
    
    /* ENCABEZADO */

.container-nombre{
        width: 100%;
        padding-top: 0px;
        display: grid;
        grid-gap: 0px;
        grid-template-columns: repeat(24, 1fr);
        grid-template-rows: 40px 30px 50px;
    
    }

.container-nombre .nombre{
    font-family: 'Gotham Black', sans-serif;
    font-size: 230%;
    color: white;
    grid-column: 1 / 25;
    grid-row: 1 / 2;
    justify-self: center;
    align-self: center;
}

.container-nombre .agencia-digital{
    display: none;
}

.container-nombre .imagen-logo{
    width: 50px;
    grid-column: 1 / 25;
    grid-row: 2 / 4;
    justify-self: center;
    align-self: center;
}

/* MAIN: PROPUESTA */

.container-propuesta{
    width: 90%;
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 200px;

}

.container-propuesta p{
    font-family: 'Gotham', sans-serif;
    color: #585353;
    font-size: 95%;
    line-height: 30px;
    text-align: justify;

}

.container-propuesta .texto-destacado{
    font-family: 'Gotham', sans-serif;
    font-weight: 900;
    color: #A72F2E;
    font-size: 95%;
    line-height: 30px;
}

/* MAIN: ILUSTRACIONES */

.container-ilustraciones{
    width: 100vw;
    display: grid;
    margin: auto;
    grid-gap: 0px;
    padding-bottom: 0px;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 350px 350px 350px 350px;
    padding-top: 30px;

}

.container-ilustraciones .container-tarjeta{
   justify-self: center;
}

/*MAIN: Quiénes somos*/

main .container-quienes-somos{
    width: 100%;
    margin: auto;
    background-image: url(images/background-2.png);
    background-size: cover;
    background-color: #A72F2E;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: repeat(11, 50px);

}

main .container-quienes-somos .boton-contacto{
    grid-column: 1 / 25;
    grid-row: 9 / 14;
    justify-self: center;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 15px);
}

main .container-quienes-somos .boton-contacto a:link, a:visited{
    grid-column: 4 / 10;
    grid-row: 3 / 6;
    font-size: 105%;
    padding: 8px;
    
}

main .container-quienes-somos .boton-contacto p{
    grid-column: 4 / 10;
    grid-row: 1 / 3;
    justify-self: center;
    align-self: center;
    font-size: 130%;
}

main .container-quienes-somos .container-tarjeta-profile{ /*Tanto la tarjeta de Gonza como la de Yago comparten el mismo estilo*/
    background-color: white;
    border-radius: 10px;
    box-shadow: 3px 3px 12px black;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(5, 1fr);

}

main .container-quienes-somos .container-tarjeta-profile img{
    grid-column: 1 / 7;
    grid-row: 1 / 6;
    justify-self: center;
    align-self: center;
    width: 130px;

}

main .container-quienes-somos .container-tarjeta-profile .nombre-profile{
    grid-column: 6 / 13;
    grid-row: 1 / 3;
    align-self: end;

}

main .container-quienes-somos .container-tarjeta-profile .linea-divisoria-profile{
    height: 10%;
    grid-column: 8 / 11;
    grid-row: 3 / 4;
    background-color:#A72F2E;
    align-self: start;

}

main .container-quienes-somos .container-tarjeta-profile p{
    grid-column: 7 / 12;
    grid-row: 2 / 7;
    align-self: center;
    font-size: 13px;

}

main .container-quienes-somos .yago-profile{ /*Creamos una clase específica para indicar donde se va a posicionar la tarjeta profile de Yago*/
    grid-column: 3 / 23;
    grid-row: 3 / 6;
}

main .container-quienes-somos .gonza-profile{ /*Creamos una clase específica para indicar donde se va a posicionar la tarjeta profile de Gonza*/
    grid-column: 3 / 23;
    grid-row: 6 / 9;
}

/*MAIN: Sección Proyectos - Tarjetas con scroll horizontal*/

main .seccion-proyectos{
    width: 100%;
    margin: auto; 
    display: grid;
    padding-top: 10px;
    padding-left: 0px;
    grid-gap: 10px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(28, 50px);
    background-color: white;
}

.titulo-proyectos-integrales p{
    width: fit-content; /*Con esto le indicamos que el background solo vaya hasta donde va el texto*/
    color: white;
    font-family: 'Gotham', sans-serif;
    font-size: 100%;
    font-weight: 600;
    background-color: #8d2525;
    grid-row: 1 / 2;
    margin-left: 15px;
}

.titulo-fotografia p {
    width: fit-content; /*Con esto le indicamos que el background solo vaya hasta donde va el texto*/
    color: white;
    font-family: 'Gotham', sans-serif;
    font-size: 100%;
    font-weight: 600;
    background-color: #8d2525;
    grid-row: 9 / 10;
    margin-left: 15px;
}

.titulo-desarrollo p {
    width: fit-content; /*Con esto le indicamos que el background solo vaya hasta donde va el texto*/
    color: white;
    font-family: 'Gotham', sans-serif;
    font-size: 100%;
    font-weight: 600;
    background-color: #8d2525;
    margin-left: 15px;
}

.wrapper-1{ /*Esta es una GRID que posee la información del contenedor de tarjetas, no de las tarjetas ni de sus elementos.*/
    height: 450px; /*Le damos un tamaño para que entre todo el contenido de dentro*/
    display: grid; /*Le indicamos que es una Grid*/
    grid-template-columns: repeat(6, 260px); /*Le decimos que son 9 elementos de 320px cada uno, si queremos agregar más tarjetas, debemos
    aumentar la cantidad de elementos*/
    overflow-x: auto; /*Le indicamos el scroll horizontal*/

}

.wrapper-2{ /*Esta es una GRID que posee la información del contenedor de tarjetas, no de las tarjetas ni de sus elementos.*/
    height: 450px; /*Le damos un tamaño para que entre todo el contenido de dentro*/
    display: grid; /*Le indicamos que es una Grid*/
    grid-template-columns: repeat(4, 260px); /*Le decimos que son 9 elemenos de 320px cada uno, el tamaño es este ya que permite ver en pantalla de
    ordenador 4 tarjetas y media de una que indica que se puede scrollear*/
    overflow-x: auto; /*Le indicamos el scroll horizontal*/
    
}

.wrapper-3{ /*Esta es una GRID que posee la información del contenedor de tarjetas, no de las tarjetas ni de sus elementos.*/
    height: 450px; /*Le damos un tamaño para que entre todo el contenido de dentro*/
    display: grid; /*Le indicamos que es una Grid*/
    grid-template-columns: repeat(5, 260px); /*Le decimos que son 9 elemenos de 320px cada uno, el tamaño es este ya que permite ver en pantalla de
    ordenador 4 tarjetas y media de una que indica que se puede scrollear*/
    overflow-x: auto; /*Le indicamos el scroll horizontal*/
    
}

.tarjetas { /*Esta es una SUB-GRID con la información de las tarjetas, no de sus elementos*/
    height: 380px; /*Indicamos el largo de la tarjeta. Si hay que agregar más info, podemos hacerla más larga desde acá*/
    padding: 20px 20px 0px 20px; /*El padding es interno al elemento y extiende el background, queda lindo para hacer botones o tarjetas*/
    margin: 20px; /*Es externo al elemento y separa del resto de las tarjetas*/
    border-radius: 10px; /*Indicamos bordes redondeados de la tarjeta*/
    display: grid; /*Indicamos que es una grid*/
    grid-template-columns: 60px 60px 60px; /*Para que todo este alineado, generamos columnas que miden lo mismo que la imagen, así podremos agrupar
    tanto la imagen como los otros elementos en el mismo espacio*/
    grid-template-rows: 230px 30px 30px 40px 40px; /*Generamos filas*/
    box-shadow: 3px 3px 12px black;
}

.tarjetas img {/*Estilos de la imagen con link*/
    min-width: 110px;
    width: 180px;
    height: 210px;
    border-radius: 10px;
    box-shadow: 3px 3px 12px black;
    grid-column: 1 / 4;
    grid-row: 1 / 4;
    justify-self: center;
    
}

.tarjetas #nombre-proyecto{ /*Estilo del nombre del proyecto*/
    color: white;
    font-family: 'Gotham', sans-serif;
    font-size: 130%;
    font-weight: 700;
    grid-column: 1 / 4; /*Le indicamos donde se ubica dentro de la SUB GRID "Tarjetas"*/
    grid-row: 2 / 3;
    justify-self: start;
    align-self: center;
}

.tarjetas #tipo-de-proyecto{ /*Estilo del tipo de proyecto*/
    color: white;
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: 90%;
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    background-color: #A72F2E;
    justify-self: start;
    align-self: center;
}

.tarjetas #mas-info { /*Estilo del link a más info*/
    color: white;
    font-family: 'Gotham Light', sans-serif;
    grid-column: 2 / 4;
    grid-row: 5 / 6;
    justify-self: end;
    align-self: center;

}

.tarjetas #mas-info2 { /*Estilo del link a más info*/
    color: white;
    font-family: 'Gotham Light', sans-serif;
    grid-column: 2 / 4;
    grid-row: 4 / 5;
    justify-self: end;
    align-self: center;

}

/*FOOTER*/

footer .container-footer .informacion-copyright{
    font-family: 'Gotham', sans-serif;
    font-size: 85%;
    font-weight: 600;
    color: white;
}

footer .container-footer .informacion-telefono{
    font-family: 'Gotham', sans-serif;
    font-size: 75%;
    color: white;
    text-decoration: none;
}
}

@media screen and (max-width: 360px){

main .container-quienes-somos .container-tarjeta-profile p{
    grid-column: 7 / 12;
    grid-row: 2 / 7;
    align-self: center;
    font-size: 12px;

}
}