:root{
    --blanco: #ffffff;
    --oscuro: #212121;
    --primario:#5dc21e;
    --primarioOscuro:rgb(16, 124, 16 ) ;
    --secundario: #00ebf3;
    --secundarioOscuro: rgb(6, 162, 201);
    --gris: #757575;
    --grisclaro:#DFE9F3;
    --fuente: 'Staatliches', cursive;
}

html{
    font-size: 62.5%;
    box-sizing: border-box; /* Hack para Box Model */
   
}

*, *:before, *:after {
    box-sizing: inherit;
  }

body{
     font-size: 1.6rem;
      font-family: 'Krub', sans-serif;;
      background: var(--primario);
      line-height: 1.5;

}

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

a{
    text-decoration: none;
}

img{
    width: 100%;
}

.contenedor{
    max-width: 120rem;
    margin: 0 auto;
}

h1, h2, h3{
    text-align: center;
    color: var(--oscuro);
    font-family: var(--fuente);
}
   
h1{    font-size: 4rem ;}
h2{    font-size: 3.2rem ;}
h3{    font-size: 2.4rem ;}
/*Header*/
.header{
    display: flex;
    justify-content: center;
}


.header__logo{
    margin: 3rem 0;

}

/*Footer*/
.footer__texto{
    background-color: var(--primarioOscuro);
    padding: 1rem;
    margin-top: 2rem;
    text-align: center;
    font-family: var(--fuente);
    font-size: 1.5rem;
    color: var(--blanco);
}


.navegacion{
    background-color: var(--primarioOscuro);
    padding: 1rem;
    display: flex;
    justify-content: center;
    gap: 2rem; /*Separacion forma new*/
}

.navegacion__enlace{
    font-family: var(--fuente);
    color: var(--blanco);
    font-size:3rem;

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


/**Grid **/

.grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

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

/** Productos **/

.producto{
    background-color: var(--primarioOscuro);
    padding: 1rem;

}




.producto__precio{
    font-size: 2.5rem;
    color: var(--secundario);
}

.producto__informacion{

}

.producto__nombre{
    font-size: 4rem;
}

.producto__nombre, .producto__precio{
    font-family: var(--fuente);
    margin: 1rem 0;
    text-align: center;
    
}

/* Graficos */

.grafico{
    min-height: 30rem;
    background-repeat: no-repeat;
    background-size: cover;
    grid-column: 1/3;
}

@media (max-width: 390px) {
.producto__imagen{
    min-height: 18rem;
}
}

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

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

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


/* Nosotros Informacion*/


.nosotros{
    display: grid;
 
}



.nosotros__imagenprincipal{
    grid-row: 1/2;
    
}



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


.nosotros__articulos{

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2;
}

@media (min-width: 768px) {
    .nosotros__articulos{
        grid-template-columns: repeat(4, 1fr);
    }
}



.nosotros__texto{
    margin: 2rem;
    text-align: justify;
   
}/* Nosotros Fin*/


.nosotros__logo{
    text-align: center;
}

.nosotros__titulo{
    margin: auto;
}

/*Pagina del Producto**/

.playera {
    padding: 2rem; /** Para que todo el contenido se despegue un poco en la vista móvil **/
}
 
@media (min-width: 768px) {
    .playera {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2rem;
     }
}
 
.formulario {
    display: grid;
    grid-template-columns: repeat(2, 1fr); gap: 2rem;
}
 
.formulario__campo {
    border: 1rem solid var(--primarioOscuro);
    background-color: transparent;
    color: var(--oscuro);
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    padding: 1rem;
    appearance: none;
    width: 100%; /** Aquí sucede la magia de los input **/
}
 
.formulario__submit {
    background-color: var(--secundario);
    border: none;
    font-size: 2rem;
    font-family: var(--fuente);
    padding: 2rem;
    transition: background-color .5s ease;
    grid-column: 1 / 3;
}
 
.formulario__submit:hover {
    cursor: pointer;
    background-color: var(--secundarioOscuro);
}