@import url('../../basics/basics.css');

@import url('../../components/header.css');



@import url('../../components/botones-flotantes.css');
@import url('../../components/footer.css');



.container {
  width: 100%;
  height: 100%;
  position: relative;
}

.container-main {
  width: 100%;
  height: 100%;
}

/* Testimonios */

.main-testimonios {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 15px;
  gap: 40px;
  background-color: #f0f0f0;
}

.section-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}

.section-title {
  font-size: 40px;
  text-align: center;
}

.section-text {
  font-size: 20px;
  color: rgb(0, 0, 0, 0.5);
  text-align: justify;
}

.testimonio-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.testimonio-video {
  width: 100%;
}

.testimonio-text {
  font-size: 18px;
  color: rgb(0,0,0,0.5);
  text-align: center;
}

/* Galeria */

.main-galeria {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 15px;
  gap: 40px;
}

.galeria-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.galeria-img {
  width: 100%;
}

/* Transformaciones */

.main-transform {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 15px;
  gap: 40px;
  background-color: #f0f0f0;
}

.transform-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transform-video {
  width: 100%;
}

@media (min-width: 767px) {

  /* Testimonios */
  .main-testimonios {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding: 100px;
    gap: 40px;
    background-color: #f0f0f0;
  }

  .section-title {
    font-size: 50px;
  }

  .section-text {
    font-size: 20px;
  }

  .testimonio-video {
    width: 50%;
    max-width: 70%;
  }

  /* Galeria */

  .main-galeria {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding: 100px;
    gap: 40px;
  }

  .galeria-img {
    width: 90%;
  }

  /* Transformaciones */

  .main-transform {
    display: grid;
    padding: 100px;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: auto auto;
    gap: 40px;
    background-color: #f0f0f0;
  }

  .transform-video {
    width: 60%;
    aspect-ratio: 9/12;
    object-fit: contain;
  }

}