@import "../media_multiples.css";

@media (max-width: 1399px) {

  /* BANNER 1399 */
  .bannerSection .bannerSectionContainer .imgContainer .img-banner-2 {
    width: 188px;
    left: -83px;
  }

}

@media (max-width: 1199px) {

  /* BANNER 1199 */
  .bannerSection .bannerSectionContainer .imgContainer .img-banner-1 {
    width: 150px;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-banner-2 {
    width: 160px;
    left: -139px;
    top: 125px;
  }
}

@media(max-width: 991px) {
    /* BANNER 992 */
  .bannerSection {
    background-image: linear-gradient(0deg, var(--grey-background) 0, var(--grey-background) 50%, #613085 44%, #613085 100%);
  }
  .bannerSection .bannerSectionContainer .firstInfo .logos {
    width: fit-content;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-banner-1 {
    width: 190px;
    left: unset;
    right: 69px;
    bottom: 0;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-banner-2 {
    width: 200px;
    left: unset;
    right: -2px;
    top: -411px;
  }
}

@media(max-width: 767px) {
  /* BANNER 767 */
  section.bannerSection.email {
    background-image: linear-gradient(0deg, var(--grey-background) 0, var(--grey-background) 55%, #613085 44%, #613085 100%);
  }
  .bannerSection .bannerSectionContainer .firstInfo .logos {
    font-size: 22px;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-banner-1 {
    width: 160px;
    right: -19px;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-banner-2 {
    width: 160px;
    right: -33px;
    top: -388px;
  }
}

@media(max-width: 620px) {
  /* BANNER 620 */
  .bannerSection {
    background-image: linear-gradient(0deg, var(--grey-background) 0, var(--grey-background) 46%, #613085 44%, #613085 100%);
  }
  section.bannerSection.email {
    background-image: linear-gradient(0deg, var(--grey-background) 0, var(--grey-background) 50%, #613085 44%, #613085 100%);
  }
  .bannerSection .bannerSectionContainer .mainFormContainer .calculadoraSection {
    margin-top: 160px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .promosBanner {
    width: 343px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .btn_yoigo {
    width: 148px;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-banner-1 {
    width: 171px;
    height: 221px;
    right: 5px;
    bottom: -112px;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-banner-2 {
    width: 130px;
    right: 181px;
    top: -37px;
  }
}

@media(max-width: 575px) {
  /* BANNER 575 */
  .bannerSection .bannerSectionContainer .imgContainer .img-banner-1 {
    width: 157px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .titlePromo {
    font-size: 22px;
    padding: 4px 10px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .logo-neflix,
  .bannerSection .bannerSectionContainer .firstInfo .logo-disney {
    width: 74px;
    height: 20px;
  }
}

@media(max-width: 450px) {
  /* BANNER 450 */
  .bannerSection {
    background-image: linear-gradient(0deg, var(--grey-background) 0, var(--grey-background) 47%, #613085 44%, #613085 100%);
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-banner-1 {
    width: 140px;
    bottom: -124px;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-banner-2 {
    right: 150px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .title {
    font-size: 20px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .titlePromo {
    font-size: 18px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .logo-neflix,
  .bannerSection .bannerSectionContainer .firstInfo .logo-disney {
    width: 61px;
    height: 17px;
  }

}

@media(max-width: 400px) {
  /* BANNER 400 */

}

@media(max-width: 376px) {
  /* BANNER 376 */
  .bannerSection {
    background-image: linear-gradient(0deg, var(--grey-background) 0, var(--grey-background) 48%, #613085 44%, #613085 100%);
  }
  section.bannerSection.email {
    background-image: linear-gradient(0deg, var(--grey-background) 0, var(--grey-background) 53%, #613085 44%, #613085 100%);
  }
  .bannerSection .bannerSectionContainer .firstInfo .promosBanner {
    width: fit-content;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-banner-1 {
    width: 126px;
    height: 163px;
    bottom: -106px;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-banner-2 {
    right: 134px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .titlePromo {
    padding: 4px 5px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .titlePromo {
    font-size: 17px;
  }
}

@media(max-width: 360px) {
  .bannerSection .bannerSectionContainer .firstInfo .title {
    font-size: 18px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .titlePromo {
    font-size: 20px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .titlePromo {
    gap: 1px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .titlePromo {
    font-size: 16px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .logo-neflix,
  .bannerSection .bannerSectionContainer .firstInfo .logo-disney {
    width: 60px;
    height: 15px;
  }
}

@media(max-width: 350px) {
  .bannerSection {
    background-image: linear-gradient(0deg, var(--grey-background) 0, var(--grey-background) 50%, #613085 44%, #613085 100%);
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-banner-1 {
    width: 100px;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-banner-2 {
    width: 110px;
    height: 86px;
    top: 8px;
    right: 112px;
  }
}

@media(max-width: 330px) {
  .bannerSection .bannerSectionContainer .firstInfo .titlePromo {
    font-size: 15px;
  }
}