/* IMPORTACIONES */
/* VARIABLES */
/* FUENTES */
/* PALETA */
/* HEADER */
ul li {
  list-style-type: none;
}

header {
  width: 100%;
}
header nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
header nav span {
  font-weight: bold;
  font-size: 1.5rem;
  color: #FE7EC9;
  margin-left: 3rem;
}
header nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
header nav ul li {
  margin-right: 3rem;
  padding: 1rem;
  border-radius: 50px;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}
header nav ul li:hover {
  background-color: #FE7EC9;
  color: white;
  cursor: pointer;
}

body {
  margin: 0;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
body main {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
body main section:first-of-type {
  position: relative;
}
body main section:first-of-type div img {
  width: 35rem;
  z-index: 1;
}
body main section:first-of-type div::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 35rem;
  height: 30rem;
  background: linear-gradient(45deg, #FECA02, #FE7EC9);
  top: 3rem;
  left: 4rem;
}
body main section:last-of-type {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-left: 5rem;
}
body main section:last-of-type p {
  color: #488DF4;
  font-size: 3rem;
  margin: 0;
  width: 20rem;
  margin-bottom: 1rem;
}
body main section:last-of-type ul {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 13rem;
  right: -10rem;
}
body main section:last-of-type ul #caja1, body main section:last-of-type ul li:nth-child(4), body main section:last-of-type ul li:nth-child(3), body main section:last-of-type ul li:nth-child(2) {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 2rem 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #38C4C1;
  -webkit-transition: -webkit-transform 500ms;
  transition: -webkit-transform 500ms;
  transition: transform 500ms;
  transition: transform 500ms, -webkit-transform 500ms;
}
body main section:last-of-type ul #caja1 img, body main section:last-of-type ul li:nth-child(4) img, body main section:last-of-type ul li:nth-child(3) img, body main section:last-of-type ul li:nth-child(2) img {
  height: 3rem;
  margin-bottom: 1rem;
}
body main section:last-of-type ul #caja1 span, body main section:last-of-type ul li:nth-child(4) span, body main section:last-of-type ul li:nth-child(3) span, body main section:last-of-type ul li:nth-child(2) span {
  color: white;
}
body main section:last-of-type ul #caja1:hover, body main section:last-of-type ul li:hover:nth-child(4), body main section:last-of-type ul li:hover:nth-child(3), body main section:last-of-type ul li:hover:nth-child(2) {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
body main section:last-of-type ul li:nth-child(2) {
  background-color: #FECA02;
}
body main section:last-of-type ul li:nth-child(3) {
  background-color: #FE7EC9;
}
body main section:last-of-type ul li:nth-child(4) {
  background-color: #488DF4;
}
body footer {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #38C4C1;
  margin-top: 6rem;
  color: white;
  padding: 2rem 7rem;
  font-family: Arial, Helvetica, sans-serif;
}
body footer div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
body footer div span {
  margin-right: 3rem;
}
body footer div p {
  width: 70%;
  letter-spacing: 1.5px;
  line-height: 1.5rem;
  text-align: justify;
}