/*PALETA DE COLORES Y TEMAS PRINCIPALES*/
/*ANOTACION: CUANDO TIENES HEADER Y FOOTER, COPIAR Y PEGAR EN LAS DEMAS PAGINAS*/

:root {
    --primario: #424242;
    --primarioOscuro: #1F1F1F;
    --secundario: #0AB3FF;
    --secundarioOscuro: #00F0FF;
    --blanco: #FFF;
    --negro: #000;

    --fuentePrincipal: "Staatliches", sans-serif;

}

/* GLOBALES*/

html {
  box-sizing: border-box;
  font-size: 62,5%;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/*CUERPO DE LA PÁGINA*/

body{
    background-color: var(--primario);
    font-size: 1.6rem;
    line-height: 1.5; /*Internlineado*/

}

p{
    font-size: 1.8rem;
    font-family: Arial, Helvetica, sans-serif ;
    color: var(--blanco);
}

a{
    text-decoration: none;
}

img{
    max-width: 100%;
}
/*LO METO YO APARTE PARA CONFIGURAR EL TAMAÑO DE LA IMAGEN*/
header img {
    width: 20rem;
    height: auto;
    
}

.contenedor{
    max-width: 90rem;
    margin: 0 auto;
    /*text-align: center;*/         
    
}

h1, h2, h3{
    text-align: center;
    color: var(--secundario);
    font-family: var(--fuentePrincipal);
}
h1{
    font-size: 4rem;
}

h2{
    font-size: 3.2rem;
}

h3{
    font-size: 2.4rem;
}

/*----------------------------HEADER------------------------------*/

.header{
   
    display: flex;
    justify-content: center;
    height: 15rem;
    

}
.header__logo{
    margin-top: 3rem 0;
}

/*------------------------FOOTER-----------------------------------*/

.footer{

    background-color: var(--primarioOscuro);
    padding: 1rem 0;
    margin-top: 2rem;

}

.footer__texto{
    font-family: var(--fuentePrincipal);
    text-align: center;
    font-size: 2.2rem;
}
/*-----------NAVEGACIÓN----------------------------*/

.navegacion{
    background-color:var(--primarioOscuro);
    padding: 1rem 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem; /*Separa los elementos*/
    margin-top: 2rem;
    justify-content: space-evenly;
}

.navegacion__enlace{
    font-family: var(--fuentePrincipal);
    color: var(--blanco);
    font-size: 2rem;

}
.navegacion__enlace--activo,
.navegacion__enlace:hover{
    color:var(--secundario);
}

/*PARA SELECCIONAR UN ENLACE O UN ELEMENTO DE LA NEVAGACIÓN:
.navegacion__enlace:last-of-type{
*/

/*---------------GRID---------------------------------*/

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem; /*Separación entre columnas*/
  row-gap: 2rem; /*Separación entre filas*/
  /*gap: 2rem Todo junto es igual que lo de arriba*/ 
    
}


@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1rem;
    row-gap: 1rem;
  }
}


/*---------------------PRODUCTOS---------------------*/

.producto{
    background-color: var(--primarioOscuro);
    
}

.producto__imagen{
    width: 100%;

}


.producto__nombre{ /*----------He metido esto por mi cuenta--------*/
 text-align: center;
 font-size: 2rem;
}

.producto__precio{
    text-align: center;
    font: 1rem;
    color: var(--secundario);

}

.producto__nombre,
.producto__precio{
    font-family: var(--fuentePrincipal);
    margin: 1rem 0;;
    line-height: 1.6rem;
}

/*-----------METEMOS LAS IMAGENES GRANDES DENTRO DEL GRID-----------*/

.grafico{
    min-height: 30rem;
    background-repeat: no-repeat;
    background-size: cover;
}

.grafico--camisas{
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    background-image: url(../img/grafico1.jpg)
    
}

.grafico--node{
    background-image: url(../img/grafico2.jpg);
    grid-column: 1 / 3;
    grid-row: 8 / 9;
    
}

@media (min-width: 768px) {
    .grafico--node{
grid-row: 5 / 6;
grid-column: 2 / 4;
} 
}

/*----------NOSOTROS-----------*/
.nosotros{
    display: grid;
    grid-template-rows: (2, 1fr);
}

@media (min-width: 768px) {
     .nosotros{
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
    align-items: center;
}
}

.nosotros__imagen{
    width: 100%;
    grid-row: 1 / 2;
}

@media (min-width: 768px) {
    .nosotros__imagen {
        grid-column:  2 / 3;
    }
     
}

.nosotros__contenido p{
    font-size: 1.5rem;
}

/*-----------Bloques---------*/

.bloques{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
@media (min-width: 768px) {
    .bloques{
        grid-template-columns: repeat(4, 1fr);
        
    }
}
.bloque{
    text-align: center;
}
.bloque__titulo{
    margin: 0;
}
.bloque__imagen{
    width: 100%;
}