:root{
--primario: #9C27B0;
--primarioOscuro: #89119D;
--secundario:#FFCE00;
--secundarioOscuro: rgb(233,287,2);
--blanco: #FFF;
--negro:#000;

--fuentePrincipal: 'Staatliches', cursive;


}

/*URL used*/
/*https://www.paulirish.com/2012/box-sizing-border-box-ftw/*/
/* apply a natural box layout model to all elements, but allowing components to change */
    html {
        box-sizing: border-box;
        font-size: 62.5%;
  }

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

  /*Gobales*/

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

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

  a{
      text-decoration: none;
  }

  img{
      width: 100%;
      
  }

  .contenedor{
      max-width: 120rem;
      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{
      margin:2rem 0rem;
      display: flex;
      justify-content: center;
  }

  .header_logo{
      margin: 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;
}

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

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

  .navegacion_enlace:last-of-type{
      margin-right: 0;

  }

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

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

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

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


    .producto__nombre{
        font-size: 4rem;
}

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

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

    /*Graficos*/

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

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

    /*Nosotros*/

    .nosotros{
        display: grid;
        grid-template-rows: repeat(2,auto);
    } 

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

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

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

    /*Nosotros Bloques*/
    .bloques{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 2rem;
    }
    @media (min-width: 768px) {
        .bloques{
            display: grid;
            grid-template-columns: repeat(4,1fr);
            gap: 2rem;
        }
    }

    .bloque{
        text-align: center;
    }

    .bloque__titulo{
        margin:0;
    }

/*Paginas del producto*/

@media (min-width: 768px) {
    .camisa{
        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(--blanco);
font-size: 2rem;
font-family: Arial, Helvetica, sans-serif;
padding: 1rem;
appearance: none;

}

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

.formulario__submit:hover{
    cursor: pointer;
    background-color: var(--secundarioOscuro);
}