/* apply a natural box layout model to all elements, but allowing components to change */
html {
  height: 100%;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  height: 100%;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#207cca+34,7db9e8+70,7db9e8+79 */
  background: #207cca; /* Old browsers */
  background: -moz-linear-gradient(
    top,
    #207cca 34%,
    #7db9e8 70%,
    #7db9e8 79%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    top,
    #207cca 34%,
    #7db9e8 70%,
    #7db9e8 79%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to bottom,
    #207cca 34%,
    #7db9e8 70%,
    #7db9e8 79%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207cca', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
  background-attachment: fixed; /* Para el color quede fijo en el background*/
}
header {
  text-align: center;
  padding: 40px 0;
}

img {
  max-width: 100%;
}

.contenedor {
  max-width: 1200px;
  margin: 0 auto; /* Centrar contenido */
}

.hero {
  margin-bottom: 40px;
}

h2 {
  text-align: center;
  text-transform: uppercase;
}

.lista-productos {
  padding: 0;
  list-style: none;
}

.lista-productos li {
  float: left;
  width: 50%;
  padding: 20px;
  text-align: center;
}

/** 2(0) + 1 **/
.lista-productos li:nth-child(2n + 1) {
  /* Solo se lo va aplicar al primero*/
  clear: both; /*Limpiar */
}

@media (min-width: 768px) {
  .lista-productos li {
    width: 33.3%;
  }
  .lista-productos li:nth-child(2n + 1) {
    /* Solo se lo va aplicar al primero*/
    clear: unset; /* Lo quita */
  }
  .lista-productos li:nth-child(3n + 1) {
    /* Solo se lo va aplicar al primero*/
    clear: both; /*Limpiar */
  }
}

.lista-productos li img {
  border: 10px solid rgba(1, 108, 195, 0.45);
  transition: border-color 0.3s ease;
}

.lista-productos li img:hover {
  border: 10px solid rgba(1, 108, 195, 1);
}

.lista-productos li p {
  font-size: 28px;
  font-weight: bold;
  margin: 10px 0 0 0;
}

span.precio {
  color: #ffce00;
  font-size: 40px;
}

.boton {
  background-color: #ffce00;
  text-decoration: none;
  padding: 10px 40px;
  margin-top: 10px;
  display: inline-block;
  text-transform: uppercase;
  font-weight: bold;
  color: aliceblue;
  transition: background-color 0.3s ease;
}

.boton:hover {
  background-color: #ebbc00;
}