@import "../media_multiple.css";

/* ----------- MIN-WIDTH ----------- */

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

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

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

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


/* ----------- MAX-MIDTH ----------- */

@media (max-width: 2000px) {
  section.jazztelTvSection {
    display: none;
  }
}

@media (max-width: 1900px) {}

@media (max-width: 1650px) {}

@media (max-width: 1399px) {
  .bannerSection .bannerSectionContainer {
    width: 1107px;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-product-tv {
    width: 248px;
    height: 185px;
    left: -135px;
    top: -20px;
  }
  .bannerSection .img-circle {
    width: 102%;
    right: -530px;
  }

  .canalesSection .info-section {
    gap: 13px;
  }

  .descubreSection .cardsContainer {
    gap: 0;
  }
  .descubreSection .cardsContainer .card {
    height: 341px;
    margin-right: 24px;
  }
  .descubreSection .bottomDots {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
  .descubreSection .dotsPoints {
    margin: 0 auto;
    width: fit-content;
  }
  .descubreSection .dotsPoints .slick-dots {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding: .8rem 0 1rem;
  }
  .descubreSection .dotsPoints .slick-dots li {
    margin: 0 .25rem;
  }
  .descubreSection .dotsPoints .slick-dots button {
    display: block;
    width: 13px;
    height: 13px;
    padding: 0;
    border: none;
    border-radius: 100%;
    background-color: var(--grey-light);
    text-indent: -9999px;
    transition: .1s;
  }
  .descubreSection .dotsPoints .slick-dots li.slick-active button {
    background-color: var(--secondary-pink);
    transition: .1s;
  }

  .canalesSection .img-carteles {
    height: 303px;
  }
}

@media (max-width: 1300px){}

@media (max-width: 1250px){}

@media (max-width: 1199px) {
  .bannerSection .bannerSectionContainer {
    width: 927px;
  }
  .bannerSection .img-circle {
    width: 122%;
    right: -621px;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-product-tv {
    left: -176px;
    width: 211px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .info-tv-banner {
    justify-content: flex-start;
  }
  .bannerSection .bannerSectionContainer .firstInfo .info-tv-banner .claim {
    font-size: 27px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .info-tv-banner .claim {
    font-size: 35px;
  }
  /* .img-jazzteltv {
    height: 24px;
    width: 136px;
  } */

  .descubreSection .btn_jazztel_secondary {
    margin-top: 0;
  }

  .canalesSection .info-section {
    gap: 9px;
  }
  .canalesSection .img-carteles {
    height: 268px
  }
  .canalesSection .info-section .claim {
    font-size: 27px;
  }
  .canalesSection .info-section .text {
    font-size: 17px;
  }

  /* .jazztelTvSection .info-section {
    width: 62%;
  }   */
}

/* ----------- TABLET ----------- */

@media (min-width: 768px) and (max-width: 1024px) {}

/* ----------- FIN TABLET ----------- */

/* ----------- MOBILE LADSCAPE ----------- */
@media only screen and (min-device-width: 480px) 
                 and (max-device-width: 640px) 
                 and (orientation: landscape) {

}
/* ----------- FIN MOBILE LADSCAPE ----------- */

@media (max-width: 1130px) {}

@media (max-width: 1024px) {
  .bubble-chatbot {
    bottom: 105px;
  }
  .chatbot-banner .chatbot-banner-container {
    bottom: 190px;
  }
}

@media (max-width: 991px) {
  .tv-banner .container {
    position: relative;
  }
  .tv-banner .titleBanner {
    position: absolute;
    color: #000;
    z-index: 2;
    left: 30px;
    top: -24px;
  }
  .tv-banner .titleBanner h1 {
    font-size: 14px;
  }
  .bannerSection .bannerSectionContainer {
    width: 688px;
  }
  .bannerSection .bannerSectionContainer .mainFormContainer .mainFormTV {
    display: none;
  }
  .bannerSection .bannerSectionContainer .firstInfo .info-tv-banner .ventajas {
    margin-left: -75px;
  }

  .tv-banner .mancheta {
    display: none;
    /* width: 40%; */
  }
  .tv-banner .img-mancheta-tv {
    width: 180px;
    height: 180px;
    position: absolute;
    right: 43px;
    top: 54px;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-product-tv {
    width: 188px;
    left: -388px;
  }
  .tv-banner .bannerSection {
    background-image: none;
    height: 461px;
  }
  .bannerSection .img-circle {
    position: absolute;
    width: 1251px;
    height: 422px;
    top: -24px;
    right: unset;
    z-index: 0;
    left: -775px;
    transform: scaleX(-1);
  }
  .bannerSection .bannerSectionContainer .firstInfo {
    margin: auto;
  }
  .bannerSection .bannerSectionContainer .firstInfo .info-tv-banner {
    height: 82%;
    width: 494px;
    align-items: center;
  }
  .bannerSection .bannerSectionContainer .firstInfo .info-tv-banner .claim {
    font-size: 30px;
    color: #fff;
    text-align: center;
  }
  .tv-banner .cardsContainer .bannerSection .bannerSectionContainer .btn-mobile,
  .tv-banner .cardsContainer .bannerSection.banner-2 .bannerSectionContainer .btn-mobile {
    display: block;
    position: absolute;
    margin: auto;
    top: 380px;
    width: 92%;
    left: 29px;
  }
  .canalesSection .info-section .btn_jazztel_secondary {
    width: 100%;
  }
  section.jazztelTvSection {
    padding-bottom: 0;
  }
  .jazztelTvSection .info-section, .canalesSection .info-section {
    width: 100%;
    gap: 15px;
  }
  .jazztelTvSection .container {
    flex-direction: column-reverse;
    align-items: center;
    height: unset;
  }
  .canalesSection .container {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    height: unset;
  }
  .jazztelTvSection .img-product-tv-twd,
  .canalesSection .img-carteles {
   display: none;
  }
}

@media(max-width: 830px) {}

@media(max-width: 767px) {
   /* CHATBOT 767 */
 .chatbot-banner .chatbot-banner-container #chatbot .chatbotContainer {
  min-height: calc(100vh - 455px);
  }

  .canalesSection .info-section .claim {
    font-size: 22px;
  }
  .canalesSection .info-section .text {
    font-size: 16px;
  }
  .canalesSection .info-section .bold .price {
    font-size: 22px;
  }
  .bannerSection .img-circle {
    left: -899px;
  }
  .bannerSection .bannerSectionContainer {
    justify-content: center;
    width: 506px;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-product-tv {
    left: -278px;
    width: 147px;
  }
  .tv-banner .cardsContainer .bannerSection .bannerSectionContainer .btn-mobile, 
  .tv-banner .cardsContainer .bannerSection.banner-2 .bannerSectionContainer .btn-mobile {
    left: 20px;
  }

  .descubreSection h2 {
    font-size: 22px;
  }
  .tv-banner .img-mancheta-tv {
    right: 16px;
  }
  .preguntas_frecuentes .containerFaqs {
    padding-right: 0;
  }
}

@media(max-width: 575px) {
   /* CHATBOT 575 */
   .bubble-chatbot {
    z-index: 498;
   } 
   .chatbot-banner {
     top: 81px;
     z-index: 499;
   }
   .chatbot-banner .chatbot-banner-container {
     border-radius: 0;
     box-shadow: unset;
     max-height: calc(100% - 204px);
     max-width: 100%;
     right: unset;
     top: 54px;
   }
   .chatbot-banner .close-section-chatbot {
     align-items: center;
     background-color: unset;
     cursor: pointer;
     display: flex;
     height: 20px;
     justify-content: center;
     padding: 20px;
     position: absolute;
     right: 12px;
     top: 16px;
     width: 20px;
     z-index: 600;
   }
   .chatbot-banner .close-section-chatbot img {
     color: unset;
     display: block;
     filter: brightness(0) saturate(100%) invert(4%) sepia(6%) saturate(5452%) hue-rotate(172deg) brightness(95%) contrast(93%);
     float: unset;
     font-size: unset;
     font-weight: unset;
     height: 12px;
     line-height: unset;
     opacity: unset;
     text-shadow: none;
     width: 12px;
   }

  .tv-banner {
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
  }
  .tv-banner .container {
    padding: 0;
    margin: 0;
  }
  .tv-banner .titleBanner {
    left: 21px;
    top: 5px;
  }
  .tv-banner .bannerSection {
    border: none;
    margin: 34px 15px 0;
  }
  .bannerSection .img-circle {
    left: -861px;
    top: -47px;
  }
  .bannerSection .bannerSectionContainer {
    padding: 30px 15px;
    border: 1px solid #868686;
    width: 502px;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-product-tv {
    left: -312px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .info-tv-banner {
    width: 100%;
  }
  .bannerSection .bannerSectionContainer .firstInfo .info-tv-banner .claim,
  .bannerSection.banner-2 .bannerSectionContainer .firstInfo .info-tv-banner .claim {
    font-size: 24px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .info-tv-banner .price .num,
  .bannerSection.banner-2 .bannerSectionContainer .firstInfo .info-tv-banner .price .num {
    font-size: 77px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .info-tv-banner .price .num .cents,
  .bannerSection.banner-2 .bannerSectionContainer .firstInfo .info-tv-banner .price .num .cents {
    font-size: 31px;
    top: 7px;
    left: 82px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .info-tv-banner .price .num .eur-mes,
  .bannerSection.banner-2 .bannerSectionContainer .firstInfo .info-tv-banner .price .num .eur-mes {
    bottom: 8px;
    left: 62px;
    font-size: 16px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .info-tv-banner .ventajas {
    margin-left: -47px;
  }
  .tv-banner .cardsContainer .bannerSection .bannerSectionContainer .btn-mobile, 
  .tv-banner .cardsContainer .bannerSection.banner-2 .bannerSectionContainer .btn-mobile {
    top: 385px;
    left: 16px;
  }

  .ventajasSection .containerVentajas {
    flex-direction: column;
    gap: 25px;
  }
  .ventajasSection .containerVentajas .ventajaCard h3 {
    font-size: 20px;
  }
  .ventajasSection .containerVentajas .ventajaCard {
    width: 100%;
    gap: 5px;
  }
}

@media(max-width: 535px){
  .bannerSection .bannerSectionContainer {
    width: 449px;
  }
  .bannerSection.banner-3 .bannerSectionContainer .firstInfo .info-tv-banner .claim {
    margin-left: 16px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .info-tv-banner .ventajas {
    margin-left: auto;
  }
}

@media(max-width: 480px) {
  .bannerSection .bannerSectionContainer {
    width: 429px;
  }
  .bannerSection.banner-3 .bannerSectionContainer .firstInfo .info-tv-banner .claim {
    margin-left: 0;
    flex-wrap: wrap;
  }
  .img-jazzteltv {
    width: 99px;
    margin: 0 6px 0 6px;
  }
  .img-netflix {
    width: 77px;
    margin-left: 6px;
  }
}

@media(max-width: 450px) {
  /* CHATBOT 450 */
  #chatbot .chatContainer label.terminos a {
    font-size: 12px;
  }
  #chatbot .chatContainer .pregunta label .link {
    font-size: 12px;
  }
  
  .tv-banner .img-mancheta-tv {
    width: 150px;
    height: 150px;
  }
  .bannerSection .bannerSectionContainer {
    width: 384px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .info-tv-banner .claim {
    font-size: 22px;
    line-height: 1.1;
  }
  .tv-banner .img-mancheta-tv {
    top: 41px;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-product-tv {
    left: -241px;
  }
  .bannerSection .img-circle {
    top: -89px;
    left: -941px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .info-tv-banner .ventajas {
    margin-left: 20px;
    margin-bottom: 0;
  }

  .jazztelTvSection .img-product-tv-twd, .canalesSection .img-carteles {
    width: 100%;
  } 
  .descubreSection .btn_jazztel_secondary {
    width: 100%;
  }
  .canalesSection .container {
    gap: 15px;
  }
  .canalesSection .img-carteles, .jazztelTvSection .img-product-tv-twd {
    /* height: 171px;
    margin-top: 20px; */
  }
}

@media(max-width: 400px) {
  .bannerSection .bannerSectionContainer {
    width: 349px;
  }
  .tv-banner .cardsContainer .bannerSection .bannerSectionContainer .btn-mobile, 
  .tv-banner .cardsContainer .bannerSection.banner-2 .bannerSectionContainer .btn-mobile {
    width: 91%;
    left: 15px;
  }

}

@media(max-width: 376px) {
  .bannerSection .bannerSectionContainer {
    width: 340px;
  }
  .bannerSection.banner-2 .bannerSectionContainer .firstInfo .info-tv-banner {
    width: 290px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .info-tv-banner .claim, 
  .bannerSection.banner-2 .bannerSectionContainer .firstInfo .info-tv-banner .claim {
    font-size: 20px;
  }
  .tv-banner .img-mancheta-tv {
    width: 120px;
    height: 120px;
    right: 5px;
  }
  .bannerSection .bannerSectionContainer .imgContainer .img-product-tv {
    left: -216px;
  }
  .tv-banner .cardsContainer .bannerSection .bannerSectionContainer .btn-mobile, 
  .tv-banner .cardsContainer .bannerSection.banner-2 .bannerSectionContainer .btn-mobile {
    width: 90%;
  }
  .canalesSection .img-carteles, .jazztelTvSection .img-product-tv-twd {
    /* margin-top: 10px; */
  }
}

@media(max-width: 360px) {
  .bannerSection .bannerSectionContainer {
    width: 325px;
  }
}

@media(max-width: 330px)  {
  .bannerSection .bannerSectionContainer {
    width: 302px;
  }
}

@media(max-width: 300px){}