body {
          margin: 0;
          font-family: Lexend;
          background-color: #006d77;
      }

      @font-face {
          font-family: Lexend;
          src: url(https://navega.com.mx/fonts/Lexend-VariableFont_wght.ttf);
      }

      .menu {
          display: flex;
          background-color: #001011;
          border-bottom: solid 1px #006d77;
      }

      .logo {
          width: 90px;
          display: flex;
          margin: 1rem 3rem;
      }

      .menu-options {
          display: flex;
          color: #f9f9f9;
          list-style: none;
          margin: 0 3rem 0 auto;
          align-items: center;
      }

      .menu-options li {
          margin: 1rem;
      }

      .menu-options li a {
          text-decoration: none;
          color: #f9f9f9;
          font-size: 1rem;
      }

      .menu-options li a:hover {
          color: #006d77;
          transition: 0.5s;
      }

      .li-solo-movil {
          display: none;
      }

      .icono-menu {
          display: none;
      }

      .cerrar {
          display: none;
      }

      .nuevo {
          display: grid;
          grid-template-areas: "x x x" "a b c" "a b d" "a e f" "a e g" "h i j" "k i l";
          grid-template-columns: 55% 18% 27%;
          grid-template-rows: 10% 17% 13% 17% 13% 17% 13%;
          margin: 2% auto;
          padding: 2%;
          height: auto;
          width: 60%;
          background-color: #1e2b3d;
          color: #f9f9f9;
          border-radius: 25px;
      }

      a {
          text-decoration: none;
      }

      .h2-nuevo {
          grid-area: x;
          font-size: 1.2rem;
          color: #da4167;
          font-weight: 400;
          margin: 0;
      }

      .nuevo-img1 {
          grid-area: a;
      }

      .nuevo-titulo1 {
          grid-area: h;
      }

      .nuevo-fechaYAutor1 {
          grid-area: k;
      }

      .nuevo-img2 {
          grid-area: b;
      }

      .nuevo-titulo2 {
          grid-area: c;
      }

      .nuevo-fechaYAutor2 {
          grid-area: d;
      }

      .nuevo-img3 {
          grid-area: e;
      }

      .nuevo-titulo3 {
          grid-area: f;
      }

      .nuevo-fechaYAutor3 {
          grid-area: g;
      }

      .nuevo-img4 {
          grid-area: i;
      }

      .nuevo-titulo4 {
          grid-area: j;
      }

      .nuevo-fechaYAutor4 {
          grid-area: l;
      }

      .nuevo-img1,
      .nuevo-img2,
      .nuevo-img3,
      .nuevo-img4 {
          width: 95%;
          height: 92%;
          object-fit: cover;
          margin-right: 5px;
          border-radius: 20px;
      }

      .nuevo-img1:hover,
      .nuevo-img2:hover,
      .nuevo-img3:hover,
      .nuevo-img4:hover {
          filter: brightness(1.05);
          transition: .3s;
      }

      .nuevo-titulo1,
      .nuevo-titulo2,
      .nuevo-titulo3,
      .nuevo-titulo4 {
          font-weight: normal;
          font-size: 1.1rem;
          margin: auto 0;
          color: #f9f9f9;
          text-decoration: none;
          align-items: center;
          height: 100%;
          display: flex;
      }

      .nuevo-titulo1:hover,
      .nuevo-titulo2:hover,
      .nuevo-titulo3:hover,
      .nuevo-titulo4:hover {
          color: #da4167;
          transition: .3s;
          text-decoration: none;
      }

      .nuevo-fechaYAutor1,
      .nuevo-fechaYAutor2,
      .nuevo-fechaYAutor3,
      .nuevo-fechaYAutor4 {
          margin: 0;
          font-size: 0.8rem;
          font-weight: normal;
          color: #f9f9f990;
      }

      .secundario {
          display: grid;
          grid-template-columns: 60% 40%;
          width: 60%;
          margin: auto;
          color: #f9f9f9;
      }

      .secundario p {
          font-size: 0.8rem;
          color: #f9f9f990;
      }

      .destacado {
          display: grid;
          grid-template-areas: "x x" "a b" "a c" "d e" "d f" "g h" "g i" "j k" "j l";
          grid-template-columns: 35% 65%;
          grid-template-rows: 12% 13% 9% 13% 9% 13% 9% 13% 9%;
          border-radius: 25px;
          margin: 0 1rem 1rem 0;
          padding: 2rem;
          background-color: #1e2b3d;
      }

      .destacado h3,
      .historial h3 {
          font-weight: 400;
          font-size: 1.1rem;
      }

      .h2-destacado {
          grid-area: x;
          color: #da4167;
          font-size: 1.2rem;
          margin: 1rem 0 2rem;
          font-weight: 400;
      }

      .destacado-img1 {
          grid-area: a;
      }

      .destacado-titulo1 {
          grid-area: b;
      }

      .destacado-fechaYAutor1 {
          grid-area: c;
      }

      .destacado-img2 {
          grid-area: d;
      }

      .destacado-titulo2 {
          grid-area: e;
      }

      .destacado-fechaYAutor2 {
          grid-area: f;
      }

      .destacado-img3 {
          grid-area: g;
      }

      .destacado-titulo3 {
          grid-area: h;
      }

      .destacado-fechaYAutor3 {
          grid-area: i;
      }

      .destacado-img4 {
          grid-area: j;
      }

      .destacado-titulo4 {
          grid-area: k;
      }

      .destacado-fechaYAutor4 {
          grid-area: l;
      }

      .destacado-img1,
      .destacado-img2,
      .destacado-img3,
      .destacado-img4 {
          width: 90%;
          height: 90%;
          border-radius: 18px;
      }

      .destacado-img1:hover,
      .destacado-img2:hover,
      .destacado-img3:hover,
      .destacado-img4:hover {
          filter: brightness(1.05);
          transition: .3s;
      }

      .destacado-titulo1,
      .destacado-titulo2,
      .destacado-titulo3,
      .destacado-titulo4 {
          color: #f9f9f9;
      }

      .destacado-titulo1:hover,
      .destacado-titulo2:hover,
      .destacado-titulo3:hover,
      .destacado-titulo4:hover {
          color: #da4167;
          transition: .3s;
      }


      .destacado-fechaYAutor1,
      .destacado-fechaYAutor2,
      .destacado-fechaYAutor3,
      .destacado-fechaYAutor4 {
          margin: 0;
      }


      .historial {
          grid-column: 2;
          border-radius: 25px;
          margin: 0 0 1rem 1rem;
          padding: 2rem;
          background-color: #1e2b3d;
      }

      .h2-historial {
          color: #da4167;
          font-weight: 400;
          font-size: 1.2rem;
      }

      .historial-titulo1,
      .historial-titulo2,
      .historial-titulo3,
      .historial-titulo4 {
          color: #f9f9f9;
      }

      .historial-titulo1:hover,
      .historial-titulo2:hover,
      .historial-titulo3:hover,
      .historial-titulo4:hover {
          color: #da4167;
          transition: .3s;
      }

      footer {
          background-color: #001011;
          padding: 3% 25%;
      }

      .enlaces-sociales {
          display: flex;
          justify-content: space-around;
          margin: 0 30% 2rem;
      }

      .fb,
      .ig,
      .wa {
          padding: 10px 10px 6px;
          border-radius: 50%;
      }

      .fb:hover,
      .ig:hover,
      .wa:hover {
          background-color: #006d77;
          transition: 0.5s;
      }

      .icono-social {
          width: 35px;
      }

      footer p a {
          font-size: 1rem;
          color: #f9f9f9;
          text-decoration: none;
      }

      footer p a:hover {
          color: #006d77;
          transition: 0.5s;
      }

      footer p {
          text-align: center;
      }

      @media screen and (max-width: 1500px) {
          .nuevo {
              width: 75%;
          }

          .secundario {
              width: 80%;
          }
      }

      @media screen and (max-width: 1160px) {
          .nuevo {
              width: 90%;
          }

          .nuevo-titulo1,
          .nuevo-titulo2,
          .nuevo-titulo3,
          .nuevo-titulo4 {
              font-size: 1rem;
          }

          .secundario {
              width: 95%;
          }

          .destacado h3,
          .historial h3 {
              font-size: 1rem;
          }

          .enlaces-sociales {
              margin: auto;
          }
      }

      @media screen and (max-width: 820px) {
          .menu-options {
              display: flex;
              position: fixed;
              flex-direction: column;
              width: 100%;
              height: 100vh;
              background-color: #001011;
              transform: translateX(100%);
              margin: auto;
              padding: 10% 0;
              text-align: right;
              transition: 0.6s;
          }

          .menu-options li a {
              font-size: 1.2rem;
          }

          .icono-menu {
              display: block;
              width: 30px;
              height: 30px;
              margin: auto 3rem auto auto;
          }

          .li-solo-movil {
              display: block;
          }

          .cerrar {
              display: flex;
              width: 30px;
              background-color: #001011;
              border: none;
              padding: 0;
          }

          .nuevo {
              grid-template-areas: "x x" "a a" "h h" "k k" "b c" "b d" "e f" "e g" "i j" "i l";
              grid-template-columns: 35% 65%;
              grid-template-rows: 6% 30% 3% 7% 9% 9% 9% 9% 9% 9%;
          }

          .nuevo-img1 {
              margin: auto 0;
          }

          .h2-nuevo {
              margin: auto 0;
          }

          .nuevo-titulo2,
          .nuevo-titulo3,
          .nuevo-titulo4 {
              margin: auto 0;
          }

          .secundario {
              grid-template-columns: 100%;
              grid-template-rows: auto auto;
              height: auto;
          }

          .historial {
              grid-column: 1;
              height: auto;
          }

          .destacado,
          .historial {
              margin: 16px 0;
          }
      }

      @media screen and (max-width: 480px) {
          .logo {
              width: 60px;
              margin: 1rem;
          }

          .icono-menu {
              width: 20px;
              height: 15px;
              margin: auto 1rem auto auto;
          }

          .nuevo {
              grid-template-rows: 8% 28% 9% 7% 8% 8% 8% 8% 8% 8%;
              padding: 3%;
          }

          .h2-nuevo,
          .h2-destacado,
          .h2-historial {
              font-size: 1rem;
          }

          .nuevo-titulo1,
          .nuevo-titulo2,
          .nuevo-titulo3,
          .nuevo-titulo4 {
              font-size: 0.8rem;
          }

          .nuevo-fechaYAutor1,
          .nuevo-fechaYAutor2,
          .nuevo-fechaYAutor3,
          .nuevo-fechaYAutor4 {
              font-size: 0.6rem;
          }

          .destacado {
              padding: 1rem;
              margin: 0 0 1rem;
          }

          .historial {
              margin: 0 0 1rem;
          }

          .destacado h3,
          .historial h3 {
              font-size: 0.8rem;
          }

          .secundario p {
              font-size: 0.6rem;
          }

          .icono-social {
              width: 20px;
          }

          footer p a {
              font-size: 0.7rem;
          }

          .menu-options li a {
              font-size: 13px;
          }

          .cerrar {
              width: 18px;
          }
      }