* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}
@font-face {
  font-family: "Valorant";
  src: url(../font/Valorant\ Font.ttf);
}
.font-valorant {
  font-family: Valorant;
}
.textNav li a {
  text-decoration: none;
  font-size: 1.2rem;
  color: #ffffff;
  font-weight: bold;
}
.icontFoot a img {
  height: 45px;
}
.icontFoot a {
  text-decoration: none;
  color: #ffffff;
  display: flex;
  font-size: 1.2rem;
  gap: 15px;
  font-weight: bold;
  width: 310px;
  padding-top: 10px;
  &:nth-child(2n) {
    color: black;
  }
}
.icontFoot a p {
  margin: 0px;
  padding-top: 7px;
}
.bg-image {
  background-image: url(../media/bgImage.png);
  background-position: center;
  object-fit: cover;
}
.navIcon {
  max-height: 50px;
}
.grisPrincipal {
  color: #101823;
}

.rojoPrincipal {
  color: #ff4654;
}

.sepia {
  color: #382f27;
}
.blanco {
  color: #ffffff;
}
.bg-grisPrincipal {
  background-color: #101823;
}

.bg-rojoPrincipal {
  background-color: #ff4654;
}

.bg-sepia {
  background-color: #382f27;
}
.bg-blanco {
  background-color: #ffffff;
}
.footer {
  width: 100%;
  min-height: 20%;
}
.header {
  width: 100%;
  height: 5%;
}
.btnFav {
  z-index: 10;
  position: sticky;
  top: 400px;
  left: 90vw;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color: #ff4656a9;
  box-shadow: 0px 0px 10px white;
  backdrop-filter: blur(2px);
  animation: aparicionFav 2s linear;
  animation-delay: 250ms;
  transition: 200ms;
  &:hover {
    scale: 1.09;
  }
}
.btnFav svg {
  width: 30px;
  height: 30px;
  color: #ffffff;
}

@keyframes aparicionFav {
  0% {
    opacity: 0.2;
  }
  5% {
    opacity: 0.4;
  }
  30% {
    scale: 1.18;
    opacity: 1;
  }
  80% {
    scale: 0.97;
  }
  100% {
    scale: 1;
  }
}

.nav-link {
  font-family: valorant;
  &:hover {
    color: #ff4654;
  }
}
.btnEM {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 1.3rem;
  color: #ffffff;

  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btnEM:hover {
  color: #ff4654;
}

.cover img {
  height: 30vh;
  object-fit: cover;
}

.textoIntro {
  min-height: 10vh;
  background-color: #ff4656;
}

.contenedorAgentes {
  min-height: 500px;
  display: flex;
  align-items: center;
}
.contenedorAgentes img {
  width: 230px;
  flex-grow: 1;
  object-fit: cover;
  transition: 0.5s ease;
  opacity: 0.8;
}
.contenedorAgentes img:hover {
  cursor: default;
  width: 320px;
  opacity: 1;
  filter: contrast(120%);
}
.contenedorAgentes p {
  font-weight: bold;
  color: #ffffff;
  translate: -160px 130px;
  font-family: valorant;
}
.armas {
  transform: skewY(-10deg);
}

.contenedorArmas img {
  object-fit: contain;
  width: 305px;
  height: 150px;
  transition: 0.4s;
  box-shadow: 2px 2px 9px rgb(0, 0, 0);
  background-color: #ff4656b6;
  border-radius: 5px;
}
.contenedorArmas img:hover {
  cursor: default;
  scale: 1.15;
  transform: skewY(10deg);

  filter: contrast(120%);
}
.mapaDiv img {
  height: 230px;

  object-fit: cover;
}

.mapaB {
  width: 300px;
  height: 260px;
  object-fit: cover;
}

.mapaDiv {
  width: 23vh;
  flex-grow: 1;
  object-fit: cover;
  transition: 0.5s ease;
}

.mapaDiv {
  max-width: 25%;

  &:hover .mapaB {
    transform: scale(1.12);
    opacity: 1;
    filter: contrast(120%);
    transition: 400ms;
  }
}
.guardadoFav {
  background-color: #ffffff;
}