/*Variables*/

:root{

    --primario: rgb(86, 86, 221);
    --primarioOscuro:#0a0064;
    --secundario: orange;
    --secundarioOscuro: rgb(233,287,2);
    --blanco: #ffffff;
    --negro: #000;
    --fuentePrincipal: 'Staatliches', cursive;

}

/*GLOBALES*/

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

  }

  body{
     
    background-color: var(--primario);
    font-size: 1.6rem;
    line-height: 2.5rem;

  }

  p {

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

  }

  a{

text-decoration: none;

  }

  img{

    max-width: 100%;

  }


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


  }
  
  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;
  }

  .header__logo{

    margin:3rem 0;

  }

  /*NAVEGACION*/

  .navegación{

    background-color: var(--primarioOscuro);
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    gap: 2rem /*Separacion entre columnas*/


  }

  .navegación__enlace{

    font-family: var(--fuentePrincipal);
    color: var(--blanco);
   font-size: 3rem;
   margin-right:2rem; /*suplanta el gap*/


  }

  .navegación__enlace:last-of-type{ /*Agarra el ultimo elemnto con esa clase*/

    margin-right: 0;

  }
  .navegación__enlace:hover, .navegación__enlace--activo{

    color: var(--secundario)


  }

    /*FOOTER*/

  .footer{

    background-color: var(--primarioOscuro);
    padding: 2rem;
    margin-top: 1rem;
  }
  .footer__text{

  text-align: center;
  font-family: var(--fuentePrincipal);
  font-size: 2.2rem ;

  }

  .grid{

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

  }

  @media (min-width: 768px){

    .grid{

      display: grid;
      grid-template-columns: repeat( 3 , 1fr);
      column-gap: 3rem;
      row-gap: 3rem;
  
    }
    
  }

  .producto{

    background-color: var(--primarioOscuro);
    padding: 1rem;
  }

  .producto__imagen{

    width: 100%;

  }



 .producto__nombre{

  font-size: 4rem

 }

 .producto__precio{

  font-size: 2.8rem;
  color: var(--secundario)

 }

 .producto__nombre,.producto__precio{

 font-family: var(--fuentePrincipal);
 margin: 3rem 0;
 text-align: center;
 line-height: 1.2rem;

 }

 /*Graficos*/

 .grafico{
  max-width: 100% ;
  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-row: 5 / 6;
 grid-column: 1 / 3;
 
 }
@media (min-width: 768px){
  

  .grafico--node{

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

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem
    }
    
    .nosotros__parrafo{
    
    grid-column: 1 / 2 ;
    
    }
    
    .nosotros__imagen{
      grid-column: 2/3;
     background-image: url(../img/nosotros.jpg);
      background-repeat: no-repeat; }
    
     
      
      }
        


.nosotros{

  display: grid;
  grid-template-columns:1fr;
  grid-template-rows:  1fr;
  gap: 3rem;
  margin-bottom: 2rem;

  }
  .nosotros__parrafo{
    
    grid-column: 1 / 2 ;
    grid-row:  2/3;
    text-align: center;
    
    }
    
    .nosotros__imagen{
      grid-column: 1/2;
     background-image: url(../img/nosotros.jpg);
      background-repeat: no-repeat;
      grid-row: 1 / 2;
      background-size: cover;
      width: 100%;
        }
        @media (min-width: 768px ){
  
          .nosotros{
        
           
            grid-template-columns: 1fr 1fr;
            
            } 
          
          }
            
            .nosotros__parrafo{
            
            grid-column: 1 / 2 ;
            grid-row: 1/ 2;
            }
            
            .nosotros__imagen{
              grid-column: 2 / 3;
              grid-row: 1/ 2;
              
              }
              
           

              .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;
                max-width: 20rem ;

                 }

                 .bloque__titulo{

                  margin: 0;

                 }

                 .bloque__imager{

                  width: 80%;

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

.camisa__imagen{

width: 100%;

}
.formulario{

  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:2rem ;
  max-width: 100%;

}


.formulario__campo{

  border-color: var(--primarioOscuro);
  border-width: 1rem;
  border-style: solid;

  border: 1rem solid var(--primarioOscuro);

  background-color: var(--primario);
  background-color: transparent;
  color: var(--blanco);
  font-size: 2rem;
  font-family: Arial, Helvetica, sans-serif;
  padding: 1rem;
  appearance: none;




}

@media (max-width: 540px ){
  .formulario__campo{

    font-size: 1.2rem;
    
  }
}

.formulario__submit{
background-color: var(--secundario);
border: none;
padding: 2rem;
font-size: 3rem;
font-family: var(--fuentePrincipal);
transition: background-color  .7s ease ;
transition: font-size  .7s ease ;
grid-column: 1/3;
max-width: auto;
}

.formulario__submit:hover{

cursor: pointer;
background-color: var(--secundarioOscuro);
font-size: 3.7rem;

}
.formulario__campo--option{

color: var(--negro);

}
@media (max-width: 540px ){
  .formulario__submit{

    font-size: 2rem;
    padding: 1.5rem;
    
    
  }

  .formulario__submit:hover{

  
    font-size: 2.7rem;
    
    }
}