* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Mulish", sans-serif;
}

body {
  background-color: #cce5ff;
  height: 100%;
}

main {
  flex: 1;
}

h1 {
  font-size: 40px;
  padding: 30px;
  text-align: center;
}

h2 {
  text-align: center;
  font-size: 30px;
  padding: 20px;
}

span {
  color: #0084FF;
}

/* BARRA DE NAVEGACION */
nav {
  background-color: #0084FF;
}
nav .navbar-brand img {
  width: 90px;
  padding: 15px 0 15px 0;
}
nav .navbar-brand img:hover {
  transform: scale(1.05);
}
nav .nav-item:hover {
  transform: scale(1.05);
}
nav .nav-link {
  color: white;
}

/* INICIO */
.contenedor-logo-inicio {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
}
.contenedor-logo-inicio .logo-inicio {
  width: 80px;
}

.titulo-inicio {
  padding: 0 0 30px 0;
  font-weight: bolder;
}

.contenedor-imagen-inicio {
  width: 100%;
  height: 200px;
}
.contenedor-imagen-inicio .imagen-inicio {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

p {
  font-size: 18px;
  text-align: center;
  padding: 20px;
}

.contenedor-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  align-items: center;
  margin-bottom: 30px;
}
.contenedor-info .imagen-donde-estamos {
  height: 500px;
  width: auto;
  border-radius: 20px;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
}
.contenedor-info .imagen-gimnasio {
  height: 500px;
  width: auto;
  border-radius: 20px;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
}

/* MI CUENTA */
.contenedor-gestion-login {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 10% 0 10% 0;
}
.contenedor-gestion-login .gestion-de-cuentas {
  font-size: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contenedor-gestion-login .gestion-de-cuentas .logo-mi-cuenta {
  width: 300px;
  height: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}
.contenedor-gestion-login .gestion-de-cuentas .lista-gestion-de-cuentas {
  padding-top: 20px;
}
.contenedor-gestion-login .login-usuario {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: center;
  border: 1px solid #000000;
  border-radius: 10px;
  width: 700px;
  height: 100%;
  justify-content: center;
  align-items: center;
  margin: 20px;
  padding-bottom: 20px;
}
.contenedor-gestion-login .login-usuario h1 {
  font-weight: bolder;
}
.contenedor-gestion-login .login-usuario .btn-entrar {
  background-color: black;
  color: white;
  border-radius: 50px;
  width: 100%;
  padding: 10px;
  font-weight: bold;
}
.contenedor-gestion-login .login-usuario .btn-entrar:hover {
  background-color: black;
  color: white;
  transform: scale(1.02);
}
.contenedor-gestion-login .login-usuario .btn-entrar:active {
  transform: scale(0.95);
  background-color: black;
}

/* PLAN */
.titulo-planes {
  padding: 30px;
}

.container-grid-plan .container-planes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  border-bottom: 5px solid black;
  padding: 15px;
  margin: 0 100px 0 100px;
}
.container-grid-plan .container-ventajas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  text-align: center;
  border-bottom: 5px solid black;
  padding: 15px;
  margin: 0 100px 0 100px;
}
.container-grid-plan .container-ventajas svg {
  width: 30px;
}
.container-grid-plan .container-precios {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  padding: 30px;
  margin: 0 100px 0 100px;
}
.container-grid-plan .container-precios .precio {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 60px;
  background-color: #0084FF;
  border-radius: 20px;
}
.container-grid-plan .container-precios .precio:hover {
  transform: scale(1.05);
}

/* PLAN (VISTA MOBILE) */
.container-cards {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 30px;
  display: none;
}
.container-cards .card-1,
.container-cards .card-2,
.container-cards .card-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 300px;
  padding-top: 30px;
  text-align: center;
  border: 1px solid black;
  border-radius: 10px;
}
.container-cards .card-1:hover,
.container-cards .card-2:hover,
.container-cards .card-3:hover {
  transform: scale(1.05);
}
.container-cards .card-1 .titulo-cards-mobile,
.container-cards .card-2 .titulo-cards-mobile,
.container-cards .card-3 .titulo-cards-mobile {
  padding-bottom: 10px;
}
.container-cards .card-1 .ul-cards-mobile,
.container-cards .card-2 .ul-cards-mobile,
.container-cards .card-3 .ul-cards-mobile {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.container-cards .card-1 .ul-cards-mobile .li-cards-mobile,
.container-cards .card-2 .ul-cards-mobile .li-cards-mobile,
.container-cards .card-3 .ul-cards-mobile .li-cards-mobile {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding-right: 5px;
}
.container-cards .card-1 .ul-cards-mobile .li-cards-mobile .svg-mobile,
.container-cards .card-2 .ul-cards-mobile .li-cards-mobile .svg-mobile,
.container-cards .card-3 .ul-cards-mobile .li-cards-mobile .svg-mobile {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  align-self: center;
}
.container-cards .card-1 .precio-card,
.container-cards .card-2 .precio-card,
.container-cards .card-3 .precio-card {
  width: 100%;
  background-color: #0084FF;
  border-radius: 0 0 10px 10px;
}
.container-cards .card-1 .precio-card .precio-card-1,
.container-cards .card-2 .precio-card .precio-card-1,
.container-cards .card-3 .precio-card .precio-card-1 {
  text-align: start;
  padding-bottom: 0;
  margin: 0;
  font-size: 12px;
}
.container-cards .card-1 .precio-card .precio-card-2,
.container-cards .card-2 .precio-card .precio-card-2,
.container-cards .card-3 .precio-card .precio-card-2 {
  padding: 0;
}
.container-cards .card-1 .precio-card .precio-card-2 b,
.container-cards .card-2 .precio-card .precio-card-2 b,
.container-cards .card-3 .precio-card .precio-card-2 b {
  font-size: 20px;
}

/* ACTIVIDADES */
section h1 {
  font-weight: bolder;
}

.contenedor-flyers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  align-items: center;
  margin-bottom: 30px;
}
.contenedor-flyers .actividad-1 img {
  width: 500px;
  height: auto;
  border-radius: 10px;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
}
.contenedor-flyers .actividad-2 img {
  width: 500px;
  height: auto;
  border-radius: 10px;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
}

/* CONTACTO */
.titulo-contacto {
  padding: 30px;
}

.form p {
  text-align: left;
}

/* FOOTER */
footer {
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  background-color: rgb(20, 20, 20);
  color: white;
  align-items: center;
  justify-content: center;
}
footer .redes-sociales {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 20px;
}
footer .redes-sociales .logo-instagram {
  height: auto;
  width: 30px;
}
footer .redes-sociales .logo-instagram:hover {
  transform: scale(1.05);
}
footer .redes-sociales .logo-facebook {
  height: auto;
  width: 30px;
}
footer .redes-sociales .logo-facebook:hover {
  transform: scale(1.05);
}
footer .redes-sociales .logo-whatsapp {
  height: auto;
  width: 30px;
}
footer .redes-sociales .logo-whatsapp:hover {
  transform: scale(1.05);
}
footer .barra-footer {
  width: 100%;
  background-color: black;
  bottom: 0;
}

/* MEDIA QUERYS */
@media (max-width: 1550px) {
  .contenedor-info {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (max-width: 991px) {
  .contenedor-info {
    grid-template-columns: repeat(1, 1fr);
  }
  .contenedor-flyers {
    grid-template-columns: repeat(1, 1fr);
  }
  /* PLAN */
  .container-grid-plan {
    display: none;
  }
  .container-cards {
    display: block;
    display: flex;
    margin-bottom: 80px;
  }
}
@media (max-width: 480px) {
  /* BARRA DE NAVEGACION */
  nav .nav-item:hover {
    transform: none;
    color: black;
  }
  nav .navbar-brand img {
    width: 50px;
  }
  /* INICIO */
  .text-home {
    padding: 50px 30px 0 30px;
    font-size: 16px;
  }
  .text-home_2 {
    padding-bottom: 10px;
    font-size: 16px;
  }
  .contenedor-info {
    box-sizing: border-box;
  }
  .contenedor-info .imagen-donde-estamos,
  .contenedor-info .imagen-gimnasio {
    width: 300px;
    height: auto;
    align-self: center;
  }
  .contenedor-info .donde-estamos,
  .contenedor-info .nuestro-lugar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .imagen-gimnasio {
    margin-bottom: 30px;
  }
  /* OTRAS ACTIVIDADES */
  .contenedor-flyers .actividad-1,
  .contenedor-flyers .actividad-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .contenedor-flyers .actividad-1 img,
  .contenedor-flyers .actividad-2 img {
    width: 300px;
    height: auto;
    align-self: center;
  }
  .contenedor-flyers .actividad-2 img {
    margin-bottom: 30px;
  }
  /* MI CUENTA */
  .contenedor-mi-cuenta {
    display: flex;
  }
  .contenedor-mi-cuenta .contenedor-gestion-login {
    flex-direction: column;
    padding-bottom: 40px;
    justify-content: center;
    align-items: center;
  }
  .contenedor-mi-cuenta .contenedor-gestion-login .gestion-de-cuentas {
    width: auto;
    padding: 0;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .contenedor-mi-cuenta .contenedor-gestion-login .gestion-de-cuentas .logo-mi-cuenta {
    width: 250px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
    padding-top: 40px;
  }
  .contenedor-mi-cuenta .contenedor-gestion-login .login-usuario {
    width: auto;
  }
  /* PLAN */
  .container-grid-plan {
    display: none;
  }
  .container-cards {
    display: block;
    display: flex;
    margin-bottom: 80px;
  }
  /* CONTACTO */
  /* FOOTER */
  footer {
    height: auto;
  }
}

/*# sourceMappingURL=style.css.map */