/* ----------------------*/
/*: Telecommunication    */
/* ----------------------*/
section.telco {
  padding-top: 2.5rem; /* 40px */
}

.telco {
  position: relative;
  width: 100%;
  max-width: 1200px;
  min-height: var(--section-height);
  margin: auto;
}
.telco .title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.telco .title h2 {
  font-family: var(--font-titulos);
  color: var(--text-color);
  background-color: transparent;
  margin-top: 6rem;
}
.telco .row {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.telco .row .col50 {
  position: relative;
  width: 48%;
}
.telco .row .col50 h3 {
  color: var(--text-color);
  font-size: 1.5em;
  font-weight: 300;
  text-align: center;
  line-height: 1.5;
}
.telco .row .col50 h3 span {
  color: var(--color-pagina);
  font-weight: 700;
  font-size: 1.5em;
}
.telco .row .col50 .imgBx {
  position: relative;
  width: 100%;
  min-height: 100%;
}
.telco .row .col50 .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.telco .row .col50 .mainUL {
  text-align: center;
  font-size: 1.5em;
  color: var(--text-color);
  list-style: none;
  line-height: 45px;
}
.telco .row .col50 .mainUL li span {
  color: var(--color-pagina);
  font-weight: 700;
  font-size: 1.2em;
}
.telco .row .col50 .secondaryUL {
  text-align: left;
  margin-left: 160px;
  font-size: 0.8em;
  color: var(--text-color);
  list-style: square;
  line-height: 30px;
}
.telco .row .col50 .secondaryUL li span {
  color: var(--color-pagina);
  font-weight: 700;
  font-size: 1em;
}

/* -----------------------------------*/
/*: Telecommunication Swiper Effect   */
/* -----------------------------------*/

.telco .slideshow2 {
  position: absolute;
  top: 0;
  padding-top: 40px;
  width: 100%;
  height: 100%;
}

.telco .slideshow2 .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: transparent;
}

.telco .swiper-container-horizontal {
  position: relative;
}

.telco .swiper-button-next,
.telco .swiper-button-prev {
  color: var(--swiper-bg-color);
  position: absolute;
  top: 30%;
  margin-left: -10px;
  margin-right: -10px;
}

.telco .swiper-button-next::after,
.telco .swiper-button-prev::after {
  font-size: 1.5em;
  font-weight: 700;
}

.telco .swiper-container-horizontal > .swiper-pagination-fraction {
  color: var(--swiper-bg-color);
  font-weight: 700;
  position: absolute;
  bottom: 320px;
}

/*! Media Query for laptops & PC styles */
@media screen and (min-width: 769px) {
  .nav__list {
    flex-direction: row;
    column-gap: 1rem;
  }
}

/* --------------------------------*/
/*: GALERÍA Fotos de proveedores   */

section.proveedores {
  width: var(--container-width-lg);
  margin: 0 auto;
  padding: 6rem 0;
}

.proveedores__container {
  position: relative;
  width: 100%;
  height: 15rem;
  margin: auto;
  overflow: hidden;
  border: none;

  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../../img/bg-texture.jpg");
}

/*: Rutina de Animacion */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 4)); /* largo de la cinta */
  }
}

.proveedores__container .slider {
  background: transparent;
  height: 15rem;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 960px;
}

.proveedores__container .slider::before,
.proveedores__container .slider::after {
  position: absolute;
  background: transparent;
  content: "";
  width: 200px;
  height: 15rem;
  z-index: 2;
}

.proveedores__container .slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.proveedores__container .slider::before {
  left: 0;
  top: 0;
}
.proveedores__container .slider .slide-track {
  animation: scroll 20s linear infinite;
  display: flex;
  width: calc(250px * 9); /* cantidad de imagénes/fotos */
}

/* largo y ancho de la cinta transportadora */
.proveedores__container .slider .slide {
  width: 15rem;
  height: 10rem;
  margin: 40px 0; /* margen entre imagénes y borde de la cinta */
}

/* largo y ancho de las imagénes en la cinta transportadora */
.proveedores__container .slide img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

/*! iPad Pro o iPad in landscape mode  */
@media screen and (max-width: 1024px) {
  section.telco {
    min-width: 100%;
    min-height: auto;
  }
}

/*! iPad Pro o iPad in Portrait mode  */
@media screen and (max-width: 768px) {
  section.telco {
    min-width: 100%;
    min-height: auto;
  }
  .telco .title h2 {
    font-size: 2rem;
    margin-top: 2rem;
  }
  .telco .row .col50 h3 {
    font-size: 1.2rem;
  }
  .telco .row .col50 .mainUL li {
    font-size: 1.2rem;
  }
  .telco .row .col50 p {
    line-height: 1.5;
  }
  .telco .row .col50 .secondaryUL li {
    font-size: 1rem;
  }
  .telco .swiper-button-next,
  .telco .swiper-button-prev {
    top: 25%;
  }
  .telco .swiper-container-horizontal > .swiper-pagination-fraction {
    bottom: 250px;
  }
}

/*! Samsung Galaxy J2 */
@media screen and (max-width: 540px) {
  .telco .swiper-button-next,
  .telco .swiper-button-prev {
    top: 51%;
  }
}

/*! PC in smallest viewport mode */
@media screen and (max-width: 500px) {
  .telco .title h2 {
    font-size: 1.5rem;
  }
  .telco .row {
    flex-direction: column;
    width: 90%;
  }

  .telco .row .col50 {
    position: relative;
    width: 90%;
    margin: 0 auto;
  }
  .telco .row .col50 h3 {
    width: 80%;
    margin: 0 auto;
  }
  .telco .row .col50 .secondaryUL {
    width: 90%;
    margin: 0 30% 2rem;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
  }
  .telco .swiper-button-next,
  .telco .swiper-button-prev {
    top: 50%;
    margin-left: 8px;
    margin-right: 8px;
    color: #fff;
    z-index: 2;
  }
  .telco .sombra__swiper-button-prev {
    background: rgba(39, 96, 124, 0.5);
    width: 50px;
    height: 50px;
    position: absolute;
    top: 42.5%;
    margin-left: 10px;
    margin-right: 10px;
    z-index: 1;
    border-radius: 50%;
  }
  .telco .sombra__swiper-button-next {
    background: rgba(39, 96, 124, 0.5);
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0;
    top: 42.5%;
    margin-left: 10px;
    margin-right: 10px;
    z-index: 1;
    border-radius: 50%;
  }
  .telco .swiper-container-horizontal > .swiper-pagination-fraction {
    color: var(--swiper-bg-color);
    font-weight: 700;
    position: absolute;
    bottom: 0;
  }
}

/*! iPhone XS Max */
@media screen and (max-width: 414px) {
  .telco .title h2 {
    font-size: 1.75rem;
  }
  .proveedores .title {
    font-size: 0.75rem;
  }
  .telco .swiper-button-next,
  .telco .swiper-button-prev {
    top: 53%;
  }
}