landing.css

* {
  /*background: #f4c4f3;  /* fallback for old browsers */
  /*background: -webkit-linear-gradient(to bottom, #ffffff, #f4c4f3);  /* Chrome 10-25, Safari 5.1-6 */
  /*background: linear-gradient(to bottom, #ffffff, #f4c4f3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*background-attachment: fixed;*/
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  color: #000000;
}

body {
  background: rgb(225, 208, 255);
}

/* INICIO HEADER */
header {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  border-bottom:1px solid #000000;
  text-transform: uppercase;
  font-family: "Source Code Pro", monospace;
}
.nav-bar {
  width: 90%;
  height: 120px;
  /* color: #000000; */
  display: flex;
  justify-content: center;
  margin: 0 auto;
  align-items: center;
}

.logo {
    width: 30%;
    min-width: 120px;
    max-width: 175px;
    cursor: pointer;
}

.menu-logo {
  max-width: 120px;
}

.nav-bar > li {
  display: flex;
  justify-content: space-evenly;
}

.nav-bar > ul {
  gap: 47px;
  width: 65%;
    display: flex;
    list-style: none;
    align-items: center;
    justify-content: flex-start;
}

.nav-bar > a {
  cursor: pointer;
  transition: 0.3s;
}

.home, .redes, .info, .pro {
  text-decoration: none;
}

#menu__toggle {
  display: none;
}

/* HOVER LINKS NAV-BAR */
.home:hover {
  color: #9b5de5;
}

.redes:hover {
  color: #f15bb5;
}

.pro:hover {
  color: #fee440;
}

.info:hover {
  color: #00bbf9;
}
/* FIN HOVER LINKS NAV-BAR */
/* FIN HEADER */

/* COMIENZO MEDIA QUERY */
@media screen and (max-width: 600px) {

.nav-bar {
    width: 90%;
    height: 120px;
    color: #000000;
    display: flex;
    justify-content: flex-start;
    margin: 0 auto;
    align-items: center;
  }

.nav-bar > ul {
  display: none;
}

/*ACA DESCANSA MI INTENTO DE MENU DESPEGABLE*/
#menu__toggle {
  opacity: 0;
}

#menu__toggle:checked ~ .menu__btn > span {
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
  top: 0;
  transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
visibility: visible;
    right: 0;
}

.menu__btn {
    display: flex;
    align-items: center;
    position: absolute;
    /* top: 14px; */
    right: 20px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    z-index: 1;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;

  width: 100%;
  height: 2px;
  background-color: #616161;
  transition-duration: 0.50s;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}

.menu__box {
    display: block;
    position: fixed;
    visibility: hidden;
    top: 0;
    right: -100%;
    width: 25%;
    height: auto;
    margin: 0;
    /* padding: 80px 0; */
    list-style: none;
    background-color: #ECEFF1;
    box-shadow: 1px 0px 6px rgb(0 0 0 / 20%);
    transition-duration: 0.50s;
}

.menu__item {
  display: block;
  padding: 12px 24px;
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: 0.50s;
}
.menu__item:hover {
  background-color: #CFD8DC;
}
/*ACA DESCANSA MI INTENTO DE MENU DESPEGABLE*/
.nd_img {
  display: none;
}
}
/* FIN MEDIA QUERY */



/* INICIO SEGUNDA SECCION */
.contenedor {
  width: 90%;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
}

.hero {
  font-family: 'Dosis', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}

.card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 300px;
  padding: 10%;
  gap: 30px;
}

.text {
    text-align: center;
}

.text > p {
  line-height: 33px;
  font-size: 23px;
}

.img_principal {
    width: 100%;
    max-width: 330px;
    display: flex;
    flex: 1 1 330px;
    margin: 0 auto;
}

.img_principal {
    max-width: 500px;
}

.img_p {
    width: 100%;
}

/* DISEÑO BOTON */
.boton > a {
  text-decoration:none;
  color:#FFF;
}
.rainbow-button {
    width: 290px;
    height: 70px;
    /* background-image: linear-gradient(85deg, #9b5de5 0%, #f15bb5 49%, #fee440 80%, #00bbf9 100%); */
    background-image: linear-gradient(90deg, #9b5de5 0%, #f15bb5 15%, #fee440 25%, #00bbf9 50%, #fee440 65%, #f15bb5 75%, #9b5de5 100% );
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-weight: bold;
}
.rainbow-button:after {
    content: attr(alt);
    width: 280px;
    height: 60px;
    border-radius: 13px;
    background-color: #191919;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rainbow-button {
  animation:slidebg 3.7s linear infinite;
}

@keyframes slidebg {
  to {
    background-position:50vw;
  }
}
/* FIN DISEÑO BOTON */
/* FIN SEGUNDA SECCION */

/* INICIO TERCERA SECCION */
.quote {
    font-family: 'Dosis', sans-serif;
    background: #ffffff;
    width: 90%;
    height: 250px;
    margin: 0 auto;
    /* border: 1px solid #000000; */
    display: flex;
    align-items: center;
}

.quote_txt {
    background: #ffffff;
    font-size: 20px;
    width: 100%;
    height: 250px;
    text-align: center;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.quote_txt > p > span {
  font-weight: 600;
}
/* FIN TERCERA SECCION */

.ventajas, .metodo, .clientes {
    margin: 0px auto;
    width: 90%;
    /* height: 553px; */
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: space-evenly;
    gap: 20px;
    margin-top: 100px;
    margin-bottom: 100px;
    font-size: 20px;
    flex-wrap: wrap;
}

.ventajas img {
  width: 160px;
  height: auto;
}

.txt > h2 {
  font-family: 'Dosis', sans-serif;
  text-transform: uppercase;
}

.txt {
  font-family: 'Dosis', sans-serif;
  text-align: center;
  line-height: 43px;
}

.beneficios {
    display: flex;
    justify-content: space-around;
    text-align: center;
    width: 90%;
    height: auto;
    flex-wrap: wrap;
}

.pasos img {
  width: 135px;
  height: auto;
}

.pasos {
  margin: 0px auto;
    display: flex;
    text-align: center;
    width: 90%;
    height: auto;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    font-family: 'Dosis', sans-serif;
}

.bene > p {
    font-family: 'Dosis', sans-serif;
    text-transform: uppercase;
}

/*                   GALERIA */
.clientes_img {
    width: 95%;
    display: flex;
}

.galeria {
    width: 90%;
    height: auto;
    display: flex;
    gap: 70px;
    margin: 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.galeria_contenedor {
  width: 290px;
    /* height: 450px; */
    position: relative;
    display: block;
    overflow: hidden;
    filter: grayscale(100%);
    transition: all 0.8s ease;
    cursor: pointer;
    flex-wrap: wrap;
    font-family: 'Dosis', sans-serif;
}

.eva {
  width: 100%;
  height: auto;
}

.galeria_text {
width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    top: 0%;
    left: 0%;
    transition: all 0.8s ease 0s;
}

.galeria_text > p {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.galeria_text > p > a {
  padding: 10px;
  border-radius: 13px;
  background: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
}

.galeria_text:hover {
 opacity: 1;
}

.galeria_contenedor:hover {
  	filter: grayscale(0%);
}
/*                   FIN GALERIA */

/* COMIENZO END */
.end {
    font-family: 'Dosis', sans-serif;
    width: 90%;
    height: 460px;
    margin: 0 auto;
    margin-bottom: 33px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    /* gap: 50px; */
    font-size: 19px;
}

.end_txt {
display: inline-block;
    width: auto;
    /* height: 100%; */
}

.nd_img {
    width: 250px;
    height: 100%;
    object-fit: cover;
}

.end_img {
      width: auto;
    height: 100%;
}

.direc {
    display: flex;
    width: auto;
    height: 350px;
    gap: 30px;
}

.end_lista {
display: flex;
    flex-direction: column;
    justify-content: space-around;
    list-style: none;
    align-items: center;
}
/* FIN END */

/* COMIENZO FOOTER */
footer {
  width: 100%;
  height: auto;
  background-color: white;
  display: flex;
  justify-content: center;
}

.footer_img {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer_img > p {
  font-family: 'Dosis', sans-serif;
}
/* FIN FOOTER */