html,
body {
  font-family: Lexend;
  margin: 0;
  background-color: #000;
  scroll-behavior: smooth;
}

p {
  margin: 0
}

@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: .5s;
}

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

.icono-menu {
  display: none;
}

.cerrar {
  display: none;
}

.portada {
  display: grid;
  grid-template-columns: 60% 40%;
  background-color: #000;
  margin: 5% 0;
  padding: 0 10%;
}

.presentación {
  margin: auto;
}

h1 {
  font-size: 3rem;
  color: #F9F9F9;
  margin: 1% 0;
  font-weight: 500;
}

h1:hover {
  color: #DA4167;
  transition: .5s;
}

.descripcion {
  font-size: 2rem;
  color: #F9F9F9;
  margin: 0;
  font-weight: 200;
}

.forma-contacto {
  grid-column: 2;
  border: solid 2px #006D77;
  margin: 4rem;
  text-align: center;
  padding: 10% 1rem 8% 1rem;
  border-radius: 35px;
}

.forma-contacto h2 {
  font-size: 2rem;
  color: #F9F9F9;
}

.forma-contacto h3 a {
  border: solid 2px #006D77;
  color: #F9F9F9;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 400;
  padding: 6px 12px;
  border-radius: 25px;
}

.forma-contacto h3 a:hover {
  background-color: #006D77;
  transition: .6s;
}

.forma-contacto h3 {
  padding: 1rem 0 0 0;
}

button {
  cursor: pointer;
}

.sitios {
  margin: 2% 0 8%;
  padding: 3% 0 0;
  border-top: 1px solid;
  border-image: linear-gradient(to right, #001011, #006D77, #001011) 1;
}

.menu-sitios {
  display: flex;
  justify-content: space-around;
  padding: 2% 0;
  background-color: #000;
}

.menu-sitios h3 button {
  font-size: 1.4rem;
  color: #F9F9F9;
  border: solid 2px #DA4167;
  background-color: #000;
  font-weight: bold;
  padding: 20px;
  border-radius: 40px;
}

.menu-sitios h3 button:hover {
  background-color: #DA4167;
  transition: ease .45s;
}


.menu-sitios-texto {
  margin: 2%;
  color: #F9F9F9;
  text-align: center;
  font-size: 2rem;
  font-weight: 400;
}

.area-producto {
  display: none;
  grid-template-areas: "a a b" "c c b" "d e b";
  grid-template-columns: 25% 25% 50%;
  background-color: #000;
  margin: 0;
  margin: 0 5%;
}

.objetivo {
  grid-area: a;
  color: #F9F9F9;
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 0 1rem
}

.propuesta {
  grid-area: c;
  color: #F9F9F9;
  font-size: 1.1rem;
  font-weight: 200;
  margin: 0 0 2rem
}

.caracteristicas {
  grid-area: d;
  width: 90%;
  border: solid 2px #FF7E6B;
  color: #F9F9F9;
  border-radius: 25px;
  padding: 1rem;
}

.caracteristicas-header {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 1rem;
}

.caracteristicas-texto {
  font-size: 1rem;
  font-weight: 300;
}

.informacion {
  border-radius: 25px;
  border: solid 2px #F9F9F9;
  color: #F9F9F9;
  grid-area: e;
  width: 90%;
  padding: 1rem;
}

.informacion-header {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 1rem;
}

.informacion-texto {
  font-size: 1rem;
  font-weight: 300;
}

.v-tel,
.v-s,
.v-lp {
  grid-area: b;
  width: 98%;
  border-radius: 30px;
  margin: auto;
}

.contacto {
  margin: 0 20%;
  padding: 3% 0 7%;
  border-top: 1px solid #13C4A3;
  border-image: linear-gradient(to right, #000, #13C4A3, #000) 1;
}

.contacto h2 {
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
  margin: 45px 0;
  color: #F9F9F9;
}

.metodos-contacto {
  display: flex;
  justify-content: space-between;
}

.metodo-contacto {
  width: 160px;
  text-align: center;
  padding: 30px;
  border: solid 2px #13C4A3;
  border-radius: 20%;

}

.metodo-contacto:hover {
  background-color: #13C4A3;
  border-radius: 50%;
  transition: .6s;
}

.icono-contacto {
  display: flex;
  margin: auto;
  width: 50px;
  padding: 20px;
}

.metodo-contacto p {
  margin: 1rem;
  font-size: 1rem;
  color: #F9F9F9;
}

.metodos-contacto a {
  text-decoration: none;
}

.opiniones {
  margin: 0 15%;
  padding: 5% 0;
  border-top: solid 1px #DA4167;
  border-image: linear-gradient(to right, #000, #DA4167, #000) 1;
  color: #F9F9F9;
  text-align: center;
}

.opiniones h2 {
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
  margin: 0 0 4rem;
}

.opiniones h3 a {
  font-size: 1.3rem;
  font-weight: 400;
  color: #39a6b0;
  text-decoration: none;
}

.opiniones h3 a:hover {
  color: #DA4167;
  transition: ease .4s;
}

.opiniones p {
  font-size: 1rem;
  font-weight: 300;
  text-align: center;
  text-decoration: none;
  margin: 0 0 1rem;
}

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: .5s;
}

.icono-social {
  width: 35px;
}

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

footer p a:hover {
  color: #006D77;
  transition: .5s;
}

footer p {
  text-align: center;
}

@media screen and (max-width: 1520px) {
  .logo {
    width: 80px;
  }

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

  .portada {
    margin: 3% 0;
    padding: 0 6%;
  }

  h1 {
    font-size: 2rem;
  }

  .descripcion {
    font-size: 1.6rem;
  }

  .forma-contacto {
    margin: 3rem 0 3rem 3rem;
    padding: 6% 1rem 4% 1rem;
  }

  .forma-contacto h2 {
    font-size: 1.6rem;
    font-weight: 500;
  }

  .forma-contacto h3 a {
    font-size: 1rem;
    font-weight: 300;
  }

  .sitios {
    margin: 1% 0 6%;
    padding: 1% 0 0;
  }

  .menu-sitios h3 button {
    font-size: 1rem;
    padding: 10px;
  }

  .area-producto {
    margin: 0 3%;
  }

  .menu-sitios-texto {
    font-size: 1.6rem;
  }

  .objetivo {
    font-size: 1.2rem;
  }

  .propuesta {
    font-size: .9rem;
    font-weight: 200;
  }

  .caracteristicas {
    width: 80%;
    border-radius: 20px;
  }

  .caracteristicas-header {
    font-size: 1rem;
    font-weight: 400;
  }

  .caracteristicas-texto {
    font-size: .8rem;
    font-weight: 200;
  }

  .informacion {
    width: 80%;
    border-radius: 20px;
  }

  .informacion-header {
    font-size: 1rem;
    font-weight: 400;
  }

  .informacion-texto {
    font-size: .8rem;
    font-weight: 200;
  }

  .v-tel,
  .v-s,
  .v-lp {
    width: 95%;
    border-radius: 20px;
  }

  .contacto {
    margin: 0 15%;
    padding: 2% 0 5%;
  }

  .contacto h2 {
    font-size: 1.6rem;
    margin: 45px 0;
  }

  .metodo-contacto {
    width: 110px;
    height: 110px;
    padding: 20px;
  }

  .icono-contacto {
    width: 35px;
  }

  .metodo-contacto p {
    margin: 0;
    font-size: .8rem;
  }

  .opiniones {
    margin: 0 10%;
    padding: 5% 0;
  }

  .opiniones h2 {
    font-size: 1.6rem;
    margin: 0 0 3rem;
  }

  .opiniones h3 a {
    font-size: 1.1rem;
  }

  .opiniones p {
    font-size: .9rem;
  }

  .icono-social {
    width: 30px;
  }
}

@media screen and (max-width: 1120px) {

  h1 {
    font-size: 1.8rem;
  }

  .descripcion {
    font-size: 1.4rem;
  }

  .forma-contacto {
    margin: 3rem 0 3rem 3rem;
  }

  .forma-contacto h2 {
    font-size: 1.4rem;
  }

  .forma-contacto h3 {
    margin: 10px 0;
  }

  .menu-sitios-texto {
    font-size: 1.4rem;
  }

  .area-producto {
    grid-template-areas: "a a a" "c c c" "d e b";
  }

  .v-tel,
  .v-s,
  .v-lp {
    width: 95%;
    border-radius: 20px;
  }


  h2 {
    font-size: 1.4rem;
    margin: 25px 0;
  }

  .opiniones h2 {
    font-size: 1.4rem;
    margin: 0 0 3rem;
  }

  .opiniones h3 a {
    font-size: 1rem;
  }

  .opiniones p {
    font-size: .8rem;
  }
}

@media screen and (max-width: 850px) {

  .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: .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;
  }

  .portada {
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
    margin: 10% 6%;
    text-align: center;
  }

  .presentación {
    grid-row: 1;
    margin: 10% 0;
  }

  h1 {
    font-size: 2rem;
  }

  .forma-contacto {
    grid-column: 1;
    grid-row: 2;
    margin: 10%;
    padding: 5%;
  }

  .area-producto {
    grid-template-areas: "a a" "b b" "c c" "d e";
    grid-template-columns: 50% 50%;
  }

  .objetivo {
    grid-area: a;
  }

  .propuesta {
    grid-area: b;
    margin: 0;
  }

  .v-tel,
  .v-s,
  .v-lp {
    grid-area: c;
    width: 100%;
    margin: 5% 0;
  }

  .caracteristicas {
    grid-area: d;
    width: 85%;
  }

  .informacion {
    grid-area: e;
    width: 85%;
  }

  .contacto {
    margin: 0 10%;
  }

  .metodo-contacto {
    padding: 10px;
  }

  .enlaces-sociales {
    margin: 0 20% 2rem
  }
}

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

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

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

  .cerrar {
    width: 20px;
  }

  .portada {
    padding: 0;
  }

  h1 {
    font-size: 1.4rem;
    margin: 0 0 1rem;
  }

  .descripcion {
    font-size: 1rem;
  }

  .forma-contacto {
    margin: 0
  }

  .forma-contacto h2 {
    font-size: 1rem;
    margin: 3% 0;
  }

  .forma-contacto h3 a {
    font-size: .8rem;
  }

  .sitios {
    margin: 0 4%;
  }

  .menu-sitios h3 button {
    font-size: .8rem;
  }

  .menu-sitios-texto {
    font-size: 1.1rem;
  }

  .area-producto {
    grid-template-areas: "a" "b" "c" "d" "e";
    grid-template-columns: 100%;
    margin: 0;
  }


  .objetivo {
    font-size: .9rem;
  }

  .propuesta {
    font-size: .8rem;
  }

  .v-tel,
  .v-s,
  .v-lp {
    grid-area: c;
    width: 100%;
    margin: 5% 0;
  }

  .caracteristicas,
  .informacion {
    width: 93%;
    padding: 3%;
    margin: 0 0 1rem;
  }

  .caracteristicas-header,
  .informacion-header {
    font-size: .8rem;
    margin: 0 0 8px;
  }

  .caracteristicas-texto,
  .informacion-texto {
    font-size: .7rem;
  }

  .contacto {
    margin: 5%;
  }

  .contacto h2 {
    font-size: 1rem;
    margin: 10% 0 5%;
  }

  .info-contacto {
    color: #F9F9F9;
    font-size: .8rem;
    text-align: center;
    margin: 5% 0 10%;
    font-weight: 200;
  }

  .metodo-contacto {
    width: 80px;
    height: 80px;
    border-radius: 30%;
  }

  .icono-contacto {
    width: 25px;
    padding: 8px;
  }

  .metodo-contacto p {
    font-weight: 200;
    font-size: .7rem;
  }

  .opiniones {
    margin: 5%
  }

  .opiniones h2 {
    font-size: 1rem;
    margin: 5% 0 10%;
  }

  .opiniones h3 a {
    font-size: .9rem;
    font-weight: 300;
  }

  .opiniones h3 {
    font-weight: 300;
    margin: 8px;
  }

  .opiniones p {
    margin: 0;
    font-weight: 200;
  }

  footer {
    padding: 5% 10%;
  }

  .icono-social {
    width: 25px;
  }

  footer p a {
    font-size: .8rem;
  }
}

@media screen and (max-width:350px) {
  .portada {
    margin: 5%;
  }

  .presentación {
    margin: 8% 0 12%;
  }

  .menu-sitios h3 button {
    font-size: .7rem;
    padding: 10px 7px;
    border-radius: 25px;
  }

  .metodo-contacto {
    padding: 6px;
    width: 70px;
    height: 70px;
  }

  .icono-contacto {
    padding: 5px;
  }
}