:root{
    --primario: #272521;
    --primarioObscuro: #000000;
    --secundario: #ff8000;
    --secundarioObscuro: #f96300;
    --blanco: #ffffff;

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

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

  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{
    max-width: 100%;
  }
  .contenedor {
    max-width: 90rem;
    margin: 0 auto;
  }
  h1, h2, h3 {
    text-align: center;
    color: var(--secundario);
    font-family: var(--fuentePrincipal);
  }
  h1{
   font-size: 3rem;
  }
  h2{
   font-size: 2rem;
  }
  h3{
   font-size: 1.5rem;
  }
  /*header*/
  .header {
    display: flex;
    justify-content: center;
  }
  .header__logo {
    margin-top: 3rem;
    width: 25rem;
  }
  /*navegacion*/

  .navegacion {
   background-color: var(--primarioObscuro);
   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(--secundario);
  }
  .footer{
    background-color: var(--primarioObscuro);
    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: 1fr 1fr;
    row-gap: 2rem;
    column-gap: 0rem;
    justify-items: center;
}
@media (min-width: 768px){
    .grid{
        grid-template-columns: 1fr 1fr 1fr;
    }
}
  /*productos*/
  .producto{
     background-color: var(--primarioObscuro);
     padding: 1rem;
     text-align: center;
     width: 18rem;
  }
 
  .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;
    line-height: 1.2;
  }
  .grafico{
   min-height: 30rem;
   min-width: 35rem;
   background-size: cover;
   background-repeat: no-repeat;
   grid-column: 1 / 3;
  }
  .grafico--aguila{
   grid-row: 2 / 3;
   background-image: url(../img/motobike.jpg);
  }

  .grafico--casco{
    background-image: url(../img/motobik.jpg);
    grid-row: 8 / 9;
    
  }
  @media (min-width: 768px){
    .grafico--casco{
        grid-row: 5 / 6;
        grid-column: 2 / 4;
       
      }
      .grafico{
        min-width: 48rem;
      }
  }

  .articulo{
    display: grid;
    grid-template-rows: repeat(2, auto);
    max-height: 90rem;
    text-align: center;
  }
  .articulo img {
    grid-row: 1 / 2;
    margin: 1rem auto;
    
  }
  .articulo p {
    margin-top: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  @media (min-width: 768px){
    .articulo{
      display: flex;
      max-width: 90rem;
      margin: auto;
      text-align: left;
    }
  }
 
 .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;
 }
 .img {
  width: auto;
 }
 /*pagina del producto*/

 @media (min-width: 768px){
    .camiseta {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      
      justify-items: center;
    }
    .camiseta-imagen{
      min-width: 30rem;
      grid-row: 1 / 3;
      
    }
    .formulario {
      grid-column: 2 / 3;
      height: 12rem;
      min-width: 50rem;
    }
    .formulario-submit {
      width: 30rem;
    }
 }
 .camiseta {
  text-align: center;
 }
 .formulario{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
  max-width: 30rem;
 margin: auto;
 }
 .formulario-campo {
   background-color: var(--primario);
   border: 1rem solid var(--primarioObscuro);
   font-size: 1.5rem;
   color: var(--blanco);
   padding: .5rem;
   font-family: Arial, Helvetica, sans-serif;
   appearance: none;
 }
 .formulario-campo-cantidad {
  width: 15rem;
 }
 .formulario-submit {
    background-color: var(--secundario);
    border: none;
    grid-column: 1 / 3;
    font-size: 2rem;
    font-family: var(--fuentePrincipal);
    padding: 2rem;
    transition: .3s ease;
    width: 30rem;;
    margin: 0 auto;
 }
 .formulario-submit:hover {
   cursor: pointer;
   background-color: var(--secundarioObscuro);
 }