/* Estilos generales para el popup */


:root {
  --card-head-color: rgba(0, 0, 0, .03)
}

.multi-color-banner {
  background-color: var(--card-head-color) !important;
  color           : #e5e5e5;

  border-top-left-radius : 14px !important;
  border-top-right-radius: 14px !important;
}

.card {
  border-radius: 14px;
}

/* Estilos para el botón de cerrar */
#close-popup {
  position   : absolute;
  top        : 20px;
  right      : 37%;
  font-size  : 26px;
  font-weight: bold;
  color      : white;
  cursor     : pointer;
}

.algo {
  position      : relative;
  border-radius : 5px;
  margin-left   : 31px;
  padding-left  : 0px;
  padding-top   : 10px;
  padding-bottom: 10px;
  width         : 700px;
  height        : 80px;
}

.algo::before {
  content         : "";
  position        : absolute;
  top             : 0;
  left            : 0;
  width           : 100%;
  height          : 100%;
  background-color: #000000;
  opacity         : 0.5;
  border-radius   : 5px;
  backdrop-filter : blur(5px);
  z-index         : -1;
}


.img-flayer {
  width: 100%;
}

#ModalFlayer button {
  position: absolute;
  right   : 2%;
  color   : white;
}

.carousel-item {
  min-height: 70vh;
}


.carousel-caption {

  bottom: 14%;

}



body {
  background-color: white;
  /* Color por defecto */
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
    /* Para celulares */
  }


  .carousel-item {
    min-height: 100vh;
  }

  #popup img {
    width: 100%;
  }

  #close-popup {
    right: 10%;
  }

  .carousel-item h3 {
    font-size: 1rem;
  }

  .carousel-item h6 {
    letter-spacing: 0px !important;
    font-size     : 0.8rem !important;
  }

  .pricing-header .lead {
    font-size: 0.8rem;
  }

  .pricing-header .display-4 {
    font-size: 2rem;
  }

  .carousel-item h5 {
    font-size: 1.6rem !important;
  }

  .algo {
    width      : 100%;
    height     : auto;
    margin-left: 0px;
    padding    : 10% 5%;
  }

  /* .carousel-item .btn-outline-light {
    padding: 6% 2% !important;
    margin: 0 !important;
  } */

  .ocultar-responsive {
    display: none !important;
  }
}

@media only screen and (min-width: 601px) and (max-width: 1468px) {
  body {
    background-color: lightgreen;
    /* Para tablets */
  }


  .pricing-header .display-4 {
    font-size: 2.5rem;
  }

  .pricing-header .lead {
    font-size: 1rem;
  }

  .pt-md-5,
  .py-md-5 {
    padding-top: 1rem !important;
  }


  .card-header {
    padding-bottom: 0.3rem;
    padding-top   : 0.3rem;
  }

  .card-body {
    padding: 1rem;
  }

  .card-title {
    font-size: 1rem;
  }

  .carousel-item {
    min-height: 88vh;
  }

  .card-body button {
    font-size: 0.8rem;
  }

  .carousel-caption {
    bottom: 0%;
  }


}

@media only screen and (min-width: 1479px) and (max-width: 1600px) {
  body {
    background-color: lightcoral;
    /* Para computadoras */
  }

  .pricing-header .display-4 {
    font-size: 2.5rem;
  }

  .pricing-header .lead {
    font-size: 1rem;
  }

  .pt-md-5,
  .py-md-5 {
    padding-top: 1rem !important;
  }


  .card-header {
    padding-bottom: 0.3rem;
    padding-top   : 0.3rem;
  }

  .card-body {
    padding: 1rem;
  }

  .card-title {
    font-size: 1rem;
  }

  .carousel-item {
    min-height: 73vh;
  }

  .card-body button {
    font-size: 0.8rem;
  }

  .carousel-caption {
    bottom: 0%;
  }

  .card-title.pricing-card-title {
    font-size: 1rem;
  }


}

@media only screen and (min-width: 1701px) {
  body {
    background-color: rgb(255, 255, 0);
    /* Para pantallas grandes */
  }

  .card-title.pricing-card-title {
    font-size: 2rem;
  }
}







/*
 * Custom translucent site header
 */

.site-header {
  background-color       : rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter        : saturate(180%) blur(20px);
}

.site-header a {
  color     : #999;
  transition: ease-in-out color .15s;
}

.site-header a:hover {
  color          : #fff;
  text-decoration: none;
}

/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

.product-device {
  position         : absolute;
  right            : 3%;
  bottom           : -15%;
  width            : 300px;
  height           : 540px;
  background-color : #333;
  border-radius    : 21px;
  -webkit-transform: rotate(30deg);
  transform        : rotate(30deg);
}

.product-device::before {
  position        : absolute;
  top             : 10%;
  right           : 10px;
  bottom          : 10%;
  left            : 10px;
  content         : "";
  background-color: rgba(255, 255, 255, .1);
  border-radius   : 5px;
}

.product-device-2 {
  top             : -25%;
  right           : auto;
  bottom          : 0;
  left            : 5%;
  background-color: #e5e5e5;
}


/*
 * Extra utilities
 */

.flex-equal>* {
  -ms-flex: 1;
  flex    : 1;
}

@media (min-width: 768px) {
  .flex-md-equal>* {
    -ms-flex: 1;
    flex    : 1;
  }
}

.overflow-hidden {
  overflow: hidden;
}

.text-trasparent {
  color: transparent;
}


.carousel-item {

  transition: -webkit-transform .1s ease-in-out;
  transition: transform .1s ease-in-out;
  transition: transform .1s ease-in-out, -webkit-transform .1s ease-in-out;

}


.img-vinculacion::before {
  background-image   : url("/img/captura-1.png");
  /* The image used */
  background-color   : #cccccc;
  /* Used if the image is unavailable */
  height             : 500px;
  /* You must set a specified height */
  background-position: center;
  /* Center the image */
  background-repeat  : no-repeat;
  /* Do not repeat the image */
  background-size    : cover;
  /* Resize the background image to cover the entire container */
}

.img-plantilla::before {
  background-image   : url("/img/captura-2.png");
  background-color   : #cccccc;
  height             : 472px;
  background-position: center;
  background-repeat  : round;
  background-size    : cover;
}


@media (min-width: 576px) {
  .card-deck .card {


    margin-right: 10px;

    margin-left: 10px;
  }
}


.step-circle {
  width           : 50px;
  height          : 50px;
  border-radius   : 50%;
  background-color: #e6f1ff;
  color           : #0066cc;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 20px;
  font-weight     : bold;
  border          : 2px solid #0066cc;
}

.step-line {
  height          : 4px;
  background-color: #ff6600;
  width           : 100%;
  position        : absolute;
  top             : 15%;
  z-index         : 0;
}

.step-content {
  text-align: center; 
  position  : relative;
  z-index   : 1;
}

.soluciones h4{
  text-transform: capitalize;
}
.soluciones i {
  font-size: 3rem;
  color    : #6c757d !important;
}

.soluciones .card {
  border: 3px solid;
}

.swiper-button-next,
.swiper-button-prev {
  color: #fff
}