@font-face {
  font-family: 'Montserrat-Bold';
  src: url('../recursos/Montserrat-Bold.ttf') format('opentype');
}

@font-face {
  font-family: 'Montserrat-Black';
  src: url('../recursos/Montserrat-Black.ttf') format('opentype');
}

@font-face {
  font-family: 'Montserrat-Regular';
  src: url('../recursos/Montserrat-Regular.ttf') format('opentype');
}

@font-face {
  font-family: 'Montserrat-SemiBold';
  src: url('../recursos/Montserrat-SemiBold.ttf') format('opentype');
}

@font-face {
  font-family: 'Montserrat-Light';
  src: url('../recursos/Montserrat-Light.ttf') format('opentype');
}

@font-face {
  font-family: 'Montserrat-Medium';
  src: url('../recursos/Montserrat-Medium.ttf') format('opentype');
}

@font-face {
  font-family: 'Montserrat-MediumItalic';
  src: url('../recursos/Montserrat-MediumItalic.ttf') format('opentype');
}

.navigation {
  position: relative;
}

.navigation__checkbox {
  display: none;
}

.navigation__button {
  background-color: #DDDDDD;
  /* height: 7rem;
  width: 7rem;*/
  height: 4.3rem;
  width: 4.3rem;
  position: fixed;
  top: 1rem;
  right: 1rem;
  border-radius: 50%;
  z-index: 2000;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer;
}

#bn2_t1 {
  font-family: 400;
}

.navigation__background {
  /* height: 6rem;
  width: 6rem;*/
  height: 3.3rem;
  width: 3.3rem;
  border-radius: 50%;
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  /*background-image: radial-gradient(#03A9F4, #03A9F4);*/
  z-index: 1300;
  transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}

.navigation__nav {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;
  visibility: hidden;
  opacity: 0;
  width: 0;
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.navigation__list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
  width: 100%;
  display: contents;
}

.navigation__item {
  margin: 1rem;
}

/*
.navigation__link:link,
.navigation__link:visited {
  display: inline-block;
  font-size: 3rem;
  font-weight: 300;
  padding: 1rem 2rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  background-image: linear-gradient(120deg, transparent 0%, transparent 50%, red 50%);
  background-size: 220%;
  transition: all 0.4s;
}*/

.navigation__link {
  display: inline-block;
  font-size: 2rem;
  padding: .5rem 2rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Montserrat-Regular';
}

.navigation__link:hover {
  background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
  background-size: 220%;
  transition: all 0.4s;
}

.navigation__link:link span,
.navigation__link:visited span {
  margin-right: 1.5rem;
  display: inline-block;
}

.navigation__link:hover,
.navigation__link:active {
  background-position: 100%;
  color: #90CAF9;
  transform: translateX(1rem);
}

/*este abre */
.navigation__checkbox:checked~.navigation__background {
  transform: scale(80);
}

/*este pone las letras*/
.navigation__checkbox:checked~.navigation__nav {
  opacity: 1;
  width: 100%;
  visibility: visible;
}

.navigation__icon {
  position: relative;
  margin-top: 2.0rem;
}

.navigation__icon,
.navigation__icon::before,
.navigation__icon::after {
  width: 2rem;
  height: 2px;
  background-color: #B0BEC5;
  display: inline-block;
}

.navigation__icon::before,
.navigation__icon::after {
  content: "";
  position: absolute;
  left: 0;
  transition: all 0.2s;
}

.navigation__icon::before {
  top: -0.8rem;
}

.navigation__icon::after {
  top: 0.8rem;
}

.navigation__button:hover .navigation__icon::before {
  top: -1rem;
}

.navigation__button:hover .navigation__icon::after {
  top: 1rem;
}

.navigation__checkbox:checked+.navigation__button .navigation__icon {
  background-color: transparent;
}

.navigation__checkbox:checked+.navigation__button .navigation__icon::before {
  top: 0;
  transform: rotate(135deg);
}

.navigation__checkbox:checked+.navigation__button .navigation__icon::after {
  top: 0;
  transform: rotate(-135deg);
}

.shape {
  width: 200px;
  height: 75px;
  overflow: hidden;

  position: fixed;
  top: 0.8rem;
  right: 3.0rem;
}

.shape::before {
  content: '';
  position: absolute;
  left: 78%;
  width: 40%;
  height: 100%;
  border-radius: 100%;
  box-shadow: 0px 0px 0px 150px #DDDDDD;
}

#menu2Pago {
  display: flex;
  flex-direction: row;
  width: 210px;
  height: 80px;
  position: fixed;
  top: 10px;
  right: 70px;
  z-index: 90;
}

.submenu2 {
  display: none;
  /* Ocultar los submenús por defecto */
}

.navigation__item:hover .submenu2 {
  display: block;
  /* Mostrar el submenú al hacer hover */
}

@media (max-width: 768px) {
  .navigation__button {
    top: 0.5rem;
    right: 0.5rem;
  }

  .navigation__background {
    top: 1rem;
    right: 1rem;
  }

  #menu2Pago {
    display: flex;
    flex-direction: row;
    width: 210px;
    height: 80px;
    position: fixed;
    top: 2px;
    right: 60px;
    z-index: 90;
  }

}