@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');

:root {
  --blanco: #fff;
  --rosa-c: #e6d6ff;
  --rosa: #d451f1;
  --rosa-o: #b14fc5;
  --verde-c: #91dd71;
  --verde: #70d44b;
  --naranja: #f18a00;
  --azul: #42a8ce;
  --gris-c: #7c848a;
  --gris: #515151;
  --gris-o: #333;
  --swiper-theme-color: #f18a00 !important;
}

.bg-rosac {
  background-color: var(--rosa-c);
}

b span {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
}

b {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: calc(16px + (23 - 16) * ((100vw - 300px) / (1920 - 300)));
}

section {
  width: 100%;
  backdrop-filter: blur(10px);
}

.plus-size {
  width: calc(320px + (1640 - 320) * ((100vw - 320px) / (1920 - 320)));
  margin: 0 auto;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* header-home */

.start {
  background-image: url(../images/banner.jpg);
  background-size: cover;
  background-position: top center;
  height: 100vh;
}

.start img {
  padding-top: 25vh;
}

/* nav bar */

.nvibar {
  background-color: var(--gris);
  position: relative;
  z-index: 1;
}

.sepb {
  height: 15px;
  width: 100%;
  background-color: var(--gris-o);
  position: absolute;
  top: 166px;
  left: 0;
}


.swiper-slide {
  height: 180px;
  width: 186px !important;
}

.btx {
  position: relative;
  padding-top: 10px;
  font-size: 20px;
  display: inline-block;
  width: 186px;
  height: 170px;
  word-break: break-word;
  text-align: center;
  color: var(--blanco);
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  text-decoration: none;
  transition: .3s;
}

.btx:hover {
  color: var(--blanco);

  transition: .3s;
}

/* header general */

.hist header,
.conoce header,
.ubi header,
.eco header,
.ambi header,
.inno header,
.proy header {
  background-color: var(--gris-o);
  padding-top: 30px;
  font-size: calc(14px + (17 - 14) * ((100vw - 300px) / (1920 - 300)));
}

.zi-9 {
  position: relative;
  z-index: 9;
  color: var(--blanco);
}

.separadorc {
  height: 10px;
  width: 100%;
  position: relative;
z-index: 2;
}

.separadora {
  height: 10px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.separadorc::before {
  content: "";
  width: 113px;
  height: 113px;
  top: -56px;
  left: calc(50% - 56px);
  position: absolute;
  background-image: url(../images/pestana-negra-titulo.svg);
}

.hist .separadorc,
.hist .btx:hover,
.hist .separadora,
.hist .bullet::before,
.hist .gup {
  background-color: var(--rosa);
}

.conoce .separadora,
.conoce .btx:hover,
.conoce .separadorc,
.conoce .bullet::before,
.conoce .gup {
  background-color: var(--verde-c);
}

.ubi .separadora,
.ubi .btx:hover,
.ubi .separadorc,
.ubi .bullet::before,
.ubi .gup {
  background-color: var(--naranja);
}

.eco .separadora,
.eco .btx:hover,
.eco .separadorc,
.eco .bullet::before,
.eco .gup {
  background-color: var(--gris-c);
}

.ambi .separadora,
.ambi .btx:hover,
.ambi .separadorc,
.ambi .bullet::before,
.ambi .gup {
  background-color: var(--verde);
}

.inno .separadora,
.inno .btx:hover,
.inno .separadorc,
.inno .bullet::before,
.inno .gup {
  background-color: var(--rosa-o);
}

.proy .separadora,
.proy .btx:hover,
.proy .separadorc,
.proy .bullet::before,
.proy .gup {
  background-color: var(--azul);
}

.goup {
  display: block;
  position: relative;
}

.gup {
  position: absolute;
  font-size: 28px;
  line-height: 36px;
  width: 36px;
  height: 36px;
  text-align: center;
  border-radius: 18px;
  left: 100%;
  top: -80px;
  z-index: 10;
  color: var(--gris-o);
  transition: .3s;
}

.gup:hover {
  font-size: 28px;
  line-height: 30px;
  top: -85px;
  transition: .3s;
  color: var(--blanco);
}

/*textos y contenido*/

.bullet {
  position: relative;
}

.bullet::before {
  content: "";
  height: 15px;
  width: 15px;
  border-radius: 15px;
  position: absolute;
  left: -20px;
  top: 7px;
}

.corners {
  border-top-left-radius: 100px;
  border-bottom-right-radius: 100px;
}

footer {
  background-color: var(--gris-o);
  background-image: url(../images/footer-hoja-fondo.svg);
  background-repeat: no-repeat;
  background-position: center;
  padding: 70px 0;
}

.rsico {
  display: inline-block;
  font-size: 20px;
  line-height: 36px;
  width: 36px;
  height: 36px;
  text-align: center;
  border-radius: 18px;
  background-color: var(--verde);
  color: var(--blanco);
  margin: 0 5px;
  transition: .3s;
}

.rsico:hover {
  background-color: var(--naranja);
  color: var(--blanco);
  transition: .3s;
}

@media (min-width: 1367px) {}

@media (min-width: 1200px) and (max-width: 1366.98px) {}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .start {
    height: calc(100vh - 180px);
  }

  .gup {
    left: 96%;
  }
  }

  @media (min-width: 768px) and (max-width: 991.98px) {
    .start {
      height: calc(100vh - 180px);
    }
.gup {
    left: 96%;
  }
  }

  @media (min-width: 576px) and (max-width: 767.98px) {
    .start {
      height: calc(100vh - 180px);
    }
.gup {
    left: 96%;
  }
  }

  @media (min-width: 411px) and (max-width: 575.98px) {
    .start {
      height: calc(100vh - 180px);
    }

    .gup {
      left: 45%;
      top: -5px;
      z-index: 99;
    }

    .gup:hover {
      font-size: 28px;
      line-height: 30px;
      top: -5px;
    }
  }

  @media (min-width: 375px) and (max-width: 410.98px) {
    .start {
      height: calc(100vh - 180px);
    }

    .gup {
      left: 45%;
      top: -5px;
      z-index: 99;
    }

    .gup:hover {
      font-size: 28px;
      line-height: 30px;
      top: -5px;
    }
  }

  @media (max-width: 374.98px) {
    .start {
      height: calc(100vh - 180px);
    }

    .gup {
      left: 45%;
      top: -5px;
      z-index: 99;
    }

    .gup:hover {
      font-size: 28px;
      line-height: 30px;
      top: -5px;
    }
  }

  /* * {
  background-color: rgba(255, 0, 0, 0.2);
}

* * {
  background-color: rgba(0, 255, 0, 0.2);
}

* * * {
  background-color: rgba(0, 0, 255, 0.2);
}

* * * * {
  background-color: rgba(255, 0, 255, 0.2);
}

* * * * * {
  background-color: rgba(0, 255, 255, 0.2);
}

* * * * * * {
  background-color: rgba(255, 255, 0, 0.2);
}

* * * * * * * {
  background-color: rgba(255, 0, 0, 0.2);
}

* * * * * * * * {
  background-color: rgba(0, 255, 0, 0.2);
}

* * * * * * * * * {
  background-color: rgba(0, 0, 255, 0.2);
} */