:root {
     --negro :#000000 ;
     --primario : #32393d ;
     --blanco : #ffffff;
     --primario_oscuro: #2d2d2d;
     --primario_oscurorgba: #2d2d2d5e;
     --secundario0scuro: rgb(223, 287, 2);

     --fuentePrincipal: 'Staatliches', cursive;
     
}

html {
     box-sizing: border-box;
     font-size: 62.5%; /* 1rem= 10px */
   }

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


   /** GLOBALES **/

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

   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: 120rem;
     margin: 0 auto;
   }

   h1, h2, h3 {
     text-align: center;
     color: var(--blanco);
     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 **/
   
   .navegacion{
     background-color:  var(--primario_oscuro);
     padding: 1rem 0;
     display: flex;
     justify-content: center;
     gap: 2rem;
   }

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

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

   /** FOOTER **/

   .footer{
     background-color: var(--primario_oscuro);
     padding: 1rem 0;
     margin-top: 2rem;
   }
   
   .footer__texto{
     text-align: center;
     font-family: var(--fuentePrincipal);
     font-size: 2.2rem;
   }

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

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

   /** SECCIONES **/
   .producto{
     background-color: var(--primario_oscuro);
     padding: 1rem;
   }

   @media  (max-width: 768px){
     .producto{
       padding: 3.5rem;
     }
     
   }
   .producto__imagen{
     width: 100%;
     height: 65%;
   }

   .producto__informacion{

   }

     .producto__nombre{
          font-size: 4rem;
     }

   .producto__precio{
     font-size: 2.8rem;
     color: var(--secundario0scuro);
   }

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

   @media (max-width: 768px){
     .producto__nombre{
       font-size: 3rem;
     }

     .producto__precio{
       font-size: 2.2rem;
     }
   }

   /** Graficos **/

   .grafico {

   }

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

   /** Nosotros **/
   .nosotros{
     height: auto;
     background-color: var(--primario_oscurorgba);
     padding: 0.5rem;
   }
   .nosotros__contenido{
     display: grid;
     grid-template-rows: repeat(2, auto);
   }
   @media (min-width: 768px){
     .nosotros__contenido{
          
          grid-template-columns: repeat(2, 1fr);
          column-gap: 2rem;
     }
   }


   .nosotros__texto{
     font-family: Arial, Helvetica, sans-serif;
     line-height: 1.5;
   }


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

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

   .nosotros__contacto{
     margin: 10rem 0;
     display: flex;
     justify-content: center;
     
   }

   .nosotros__boton{
     
     background-color: var(--secundario0scuro);
     border: none;
     font-size: 3rem;
     font-family: var(--fuentePrincipal);
     padding: 1rem;
     cursor: pointer;
     transition: background-color .3s ease;
   }

   .nosotros__boton:hover{
     background-color: rgb(163, 287, 2);
   }

   /** Bloques **/

   .comprar__titulo{
     font-weight: 200;
     color: var(--secundario0scuro);
     font-size: 5rem;
   }

   .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;
     font-weight: 200;
     color: var(--secundario0scuro);
   }

   /** Formulario **/

   @media (min-width: 768px){
     .cable{
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       column-gap: 2rem;
     }
   }
   .cable__imagen{
     border-radius: 2rem;
     width: 100%;
     height: auto;
   }
   .formulario{
     display: grid;
     grid-template-columns: (2,1fr);
     gap: 2rem;
   }

   .formulario__campo{
     appearance: none;
     padding: 1rem;
     font-size: 2rem;
     font-family: Arial, Helvetica, sans-serif;
     color: var(--blanco);
     background-color: transparent;
     border: 1rem solid var(--primario_oscuro); /** Ancho del borde + Tipo de borde + Color del borde **/
   }

   .formulario__sumbit{
     background-color: var(--secundario0scuro);
     border: none;
     font-size: 2rem;
     font-family: var(--fuentePrincipal);
     padding: 2rem;
     transition: background-color .3s ease;
     grid-column: 1/3;
   }

   .formulario__sumbit:hover{
     cursor: pointer;
     background-color: rgb(163, 287, 2)
   }