@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Barlow", sans-serif;
}
p {
  font-size: 1.3rem;
  text-align: center;
  color: #3b9ded;
  font-weight: 400;
}
button {
  background: none;
  border: none;
  color: white;
}
body {
  position: relative;
  background-color: #fcf7f0;
  background-image: url(https://encasa.parqueexplora.org/wp-content/uploads/2021/12/seccion_1_fondo_lineas_b.png);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
/* -------- Fondos (11 - SF) ----------*/
.bg-item-11 {
  background-color: #ffffff00;
  background-image: url(https://encasa.parqueexplora.org/wp-content/uploads/2021/12/seccion_1_flotante_a.png);
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-size: 30% auto;
}
.bg-item-12 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 250px;
  height: 600px;
  background-image: url(https://encasa.parqueexplora.org/wp-content/uploads/2021/12/seccion_1_flotante_b.png);
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg-item-21 {
  background-color: #ffffff00;
  background-image: url("assets/bg21.png");
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-size: 16% auto;
}
.bg-item-22 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 600px;
  background-image: url("assets/bg22.png");
  background-position: 122% 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bg-item-31 {
  background-image: url("assets/bg31.png");
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-size: 30% auto;
}
.bg-item-41 {
  position: relative;
  background-color: #ffffff00;
  background-image: url("assets/bg41.png");
  background-position: 0% 50%;
  background-repeat: no-repeat;
  background-size: 25% auto;
}
.bg-item-42 {
  position: absolute;
  top: 8%;
  right: 0;
  width: 200px;
  height: 600px;
  background-image: url("assets/bg42.png");
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg-especial {
  position: relative;
  max-width: 898px;
  width: 100%;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #4d98d399;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
}

.bg-as {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  background-image: url("assets/cuadricula.png");
  background-repeat: repeat;
  background-size: 106px 128px;
  opacity: 0.5;
}
@media (max-width: 764px) {
  .bg-especial {
    border: none;
  }
  .bg-as {
    background-image: none;
  }
}
@media (max-width: 524px) {
  .bg-item-11 {
    background-position: -143% 0%;
    background-size: 75% auto;
  }
  .bg-item-12 {
    bottom: 75px;
    width: 80px;
    height: 258px;
  }
}
/* ------- Secciones -------- */
.part-1,
.part-2,
.part-3,
.part-4 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.part-1 {
  padding: 13rem 0 3rem 0;
}
.part-1 img {
  width: 100%;
  height: 100%;
  max-width: 600px;
  max-height: 317.4px;
}
.part-1 .content,
.part-2 .content,
.part-3 .content,
.part-4 .content {
  max-width: 740px;
  margin: 5rem 4rem;
}
.part-2,
.part-3 {
  padding: 0 0 3.8rem 0;
}
.part-3 {
  padding-top: 5rem;
}
.part-3 img {
  max-width: 640px;
}
.part-4 .content-section {
  text-align: center;
}
.part-4 .content-section h1 {
  color: #f36e27;
  font-family: "Barlow", Sans-serif;
  font-weight: 900;
  font-size: 2rem;
}
.part-4 .content-section p {
  margin: 2rem 0;
}
.title {
  color: #3b9ded;
  font-family: "Barlow", Sans-serif;
  font-weight: 900;
  letter-spacing: 10px;
  font-size: 3.6rem;
}
.manga {
  padding-bottom: 5rem;
}
@media (max-width: 524px) {
  .title {
    font-size: 2.2rem !important;
  }
  .part-1 img {
    width: 300px !important;
  }
}
/* ------- Slider ------- */
.podcast .swiper {
  max-width: 640px;
  width: 100%;
  height: 210px;
}
.experiments .swiper {
  width: 640px;
  height: 410px;
}
.experiments .swiper img {
  width: 100%;
}
.manga .swiper {
  text-align: center;
  max-width: 700px;
  max-height: 600px;
  width: 100%;
  height: 100%;
}
.manga .swiper img {
  max-width: 600px;
  max-height: 600px;
  min-width: 286px;
  min-height: 286px;
  width: 100%;
  height: 100%;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: 0 !important;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: 0 !important;
}

.swiper-button-prev:after {
  left: 0;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  color: black;
  font-size: 1.3rem !important;
}
.iframe .swiper-slide {
  text-align: center;
}
.iframe iframe {
  width: 90%;
}
@media (max-width: 724px) {
  .podcast .swiper {
    width: 80% !important;
  }
  .experiments .swiper {
    width: 640px;
  }
  .manga .swiper img {
    width: 282px !important;
  }
}
@media (max-width: 524px) {
  .podcast .swiper {
    width: 55% !important;
  }
  .experiments .swiper {
    width: 314px !important;
    height: 221px;
  }
  .manga .swiper {
    width: 100%;
  }
}
/* ------- Modal --------- */
:root {
  --lightgray: #efefef;
  --blue: steelblue;
  --white: #fff;
  --black: rgba(0, 0, 0, 0.8);
  --bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15);
}
.open-modal {
  font-weight: bold;
  background: var(--blue);
  color: var(--white);
  padding: 0.75rem 1.75rem;
  margin-bottom: 1rem;
  border-radius: 5px;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--black);
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: all 0.35s ease-in;
  z-index: 1;
}
.modal.is-visible {
  visibility: visible;
  opacity: 1;
}
.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 1271px;
  max-height: 80vh;
  overflow: auto;
  cursor: default;
  text-align: center;
}
.close-modal {
  position: absolute;
  font-size: 1.5rem;
  top: 2%;
  right: 2%;
  color: white;
  border: none;
  background: transparent;
  z-index: 2;
}
/* Modal Slider  */
.prev,
.next {
  position: absolute;
  z-index: 2;
}
.prev {
  top: 50%;
  left: 5%;
}
.next {
  top: 50%;
  right: 5%;
}
#manga1,
#manga2,
#manga3,
#manga4 {
  max-width: 600px;
  max-height: 600px;
  width: 100%;
}
@media (max-width: 1424px) {
  .modal-dialog {
    max-width: 825px;
  }
  .modal-dialog iframe {
    height: 534px !important;
  }
}
@media (max-width: 724px) {
  .fa-solid {
    color: black !important;
  }
}
/* ------- Footer ------- */
footer {
  background-image: url("assets/bg51.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 100px 50px 150px 50px;
}
footer .logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

footer .logos img {
  width: 80%;
}

@media (max-width: 723px) {
  footer .logos {
    flex-direction: column;
  }
  footer .logos div {
    text-align: center;
  }
  footer .logos img {
    width: 80%;
  }
}