@import url("https://fonts.googleapis.com/css2?family=Roboto+Serif:opsz,wght@8..144,100;8..144,400;8..144,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Young+Serif&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;700&display=swap");

/* Estilos generales*/
* {
  box-sizing: border-box;
  border: 0;
  font-family: "Montserrat", sans-serif;
  padding: 0;
  margin: 0;
}

/* Presentacion - header */

.presentacion {
  display: flex;
}

video {
  background-size: cover;
  width: 100vw;
}

/* Parte del medio */

.first {
  background-color: black;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /*height: 788px;*/
}

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

.logo {
  width: 80%;
  /*height: 360px;
  width: 432px;*/
}

.cartel {
  display: flex;
  width: 100%;
}

.img-presentation {
  width: 100%;
}

/* Parque acuatico */

.parque-acuatico {
  align-items: center;
  background: url("../img/ppuy/fondo-parque.jpg");
  background-size: cover;
  display: flex;
  /*height: 720px;*/
  justify-content: space-evenly;
  padding: 150px 0;
}

.container-parques {
  display: flex;
  flex-direction: row;
  gap: 50px;
  width: 80%;
}

.card {
  box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.7);
}

.card img {
  width: 100%;
}

/* Segunda parte */

.second {
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.base-title {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 25px;
  width: 100%;
}

h1 {
  color: #c69009;
  font-family: "Montserrat", sans-serif;
  font-size: 5rem;
  text-align: center;
}

.cartel {
  display: flex;
  width: 100%;
}

.img-presentation {
  width: 100%;
}

/*************************************************/
/**************** Contacto ***********************/
/*************************************************/

.contacto{
    display: flex;
    margin-top: -1px;
}

.contacto img{
    width: 100%;
}

/*************************************************/
/***************** Footer ************************/
/*************************************************/

footer {
  align-items: flex-end;
  background-color: black;
  display: flex;
  justify-content: space-between;
  height: 120px;
  padding: 50px;
  width: 100%;
}

.copy{
  color: #fff;
  font-size: 0.7rem;
}

.sign{
  color: #fff;
  font-size: 0.7rem;
}

/* ---------------------------------------------------------------------------- */
/*                        Diseño Responsive                                     */
/* ---------------------------------------------------------------------------- */

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

  .first{
    flex-direction: column;
  }

  .base-logo{
    padding: 40px 0;
  }

  .container-parques{
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .card{
    width: 80%;
  }

  .card:nth-child(odd){
    display: none;
  }

  .second{
    flex-direction: column;
  }

}

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

  h1{
    font-size: 2.5rem;
  }

  footer{
    align-items: center;
    flex-direction: column;
    gap: 15px;
  }

}