@import "../media_multiple.css";

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

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

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

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

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

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

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

@media (max-width: 1399px) {
  /* VENTAJAS 1399 */
  .ventajasSection .containerVentajas .ventajaCard {
    width: 30%;
  }
}

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

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

@media (max-width: 1199px) {
  /* AHORRO 1199 */
  .ahorroSection .ahorroContainer .cardAhorro {
    min-width: unset;
  }
  .ahorroSection .ahorroContainer .cardAhorro .title {
    font-size: 18px;
  }
  .ahorroSection .ahorroContainer .cardAhorro .price .num {
    font-size: 82px;
  }
  .ahorroSection .ahorroContainer .cardAhorro .price .subPrice .mes {
    font-size: 24px;
  }
  .ahorroSection .ahorroContainer .cardAhorro .price .subPrice .dto {
    font-size: 32px;
  }

  /* VENTAJAS 1199 */
  .ventajasSection .containerVentajas {
    width: 100%;
  }
}



/* ----------- 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) {}

@media(max-width: 991px) {
  /* BANNER 991 */
  .bannerSection .bannerSectionContainer {
    background: unset;
    padding: 0;
    width: 100%;
  }
  .bannerSection .bannerSectionContainer .firstInfo {
    background: linear-gradient(281deg, rgba(0, 0, 0, 0.00) 48.83%, rgba(0, 0, 0, 0.20) 80.59%), url("../../img/portada-energia.webp") lightgray -276.141px 0px / 151.426% 100% no-repeat;
    background-size: cover;
    border-radius: 8px;
    padding: 30px 16px;
    max-width: unset;
  }
  .bannerSection .bannerSectionContainer .mainFormContainer .calculadoraModal .calculadoraContainer {
    width: 100%;
  }

  /* AHORRO 991 */
  .ahorroSection .ahorroContainer {
    gap: 11px;
  }
  .ahorroSection .ahorroContainer .cardAhorro {
    padding: 22px;
    min-width: unset;
    WIDTH: 33%;
  }
  .ahorroSection .ahorroContainer .cardAhorro .title {
    font-size: 16px;
  }
  .ahorroSection .ahorroContainer .cardAhorro .price .num {
    font-size: 64px;
  }
  .ahorroSection .ahorroContainer .cardAhorro .price .subPrice .dto {
    font-size: 28px;
  }
  .ahorroSection .ahorroContainer .cardAhorro .price .subPrice .mes {
    font-size: 18px;
  }

  /* TARIFAS 991 */
  section.tarifasSection .cardsContainer .card-tarifa {
    min-width: unset;
    width: 330px;
    height: 356px;
  }
  .tarifasSection .cardsContainer .card-tarifa .cardTitle h3 {
    font-size: 24px;
  }
  .tarifasSection .cardsContainer .card-tarifa .price {
    font-size: 64px;
  }
  .tarifasSection .cardsContainer .card-tarifa .price .subPrice .legal {
    font-size: 16px;
  }

}

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

@media(max-width: 767px) {
  section.tarifasSection h2, 
  section.ahorroSection h2,
  section.ventajasSection h2 {
    margin-bottom: 1rem;
    font-size: 22px;
  }
  /* AHORRO 767 */
  .ahorroSection .ahorroContainer { 
    flex-direction: column;
    gap: 24px;
  }
  .ahorroSection .ahorroContainer .cardAhorro {
    padding: 22px 44px;
    width: fit-content;
  }
  .ahorroSection .ahorroContainer .cardAhorro .title {
    font-size: 21px;
  }
  .ahorroSection .ahorroContainer .cardAhorro .price .num {
    font-size: 96px;
  }
  .ahorroSection .ahorroContainer .cardAhorro .price .subPrice .dto {
    font-size: 38px;
  }
  .ahorroSection .ahorroContainer .cardAhorro .price .subPrice .mes {
    font-size: 28px;
  }
  .ahorroSection .btn-ahorro {
    min-width: 327px;
  }

  /* TARIFAS 767 */
  section.tarifasSection .cardsContainer .card-tarifa {
    width: 359px;
    height: 356px;
    margin: 10px;
  }
  .tarifasSection .cardsContainer .card-tarifa .price {
    font-size: 72px;
  }
  .tarifasSection .cardsContainer .card-tarifa .price .subPrice .legal {
    font-size: 18px;
  }

  /* VENTAJAS 767 */
  .ventajasSection .containerVentajas {
    flex-direction: column;
    gap: 24px;
  }
  .ventajasSection .containerVentajas .ventajaCard {
    width: 70%;
    margin: auto;
  }

  .bubble-chatbot {
    display: contents;
  }
}

@media(max-width: 575px) {
  /* banner 575 */
  .bannerSection .bannerSectionContainer .firstInfo .bannerTitle {
    font-size: 28px;
  }
}

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

@media(max-width: 450px) {
  /* BANNER 450 */
  .bannerSection .bannerSectionContainer .firstInfo{
    background: linear-gradient(281deg, rgba(0, 0, 0, 0.00) 48.83%, rgba(0, 0, 0, 0.20) 80.59%), url("../../img/portada-energia-movil.webp") lightgray -276.141px 0px / 151.426% 100% no-repeat;
    background-position: center;
  }
  .bannerSection .bannerSectionContainer .firstInfo .mancheta-promo {
    width: fit-content;
  }
  .bannerSection .bannerSectionContainer .firstInfo .mancheta-promo .promo {
    font-size: 14px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .mancheta-promo .promo span {
    font-size: 24px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .mancheta-promo .price .ahorro .mainNum {
    font-size: 85px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .mancheta-promo .price .ahorro .eur p {
    font-size: 18px;
  }

  /* TARIFAS 350 */
  section.tarifasSection .cardsContainer .card-tarifa {
    width: 330px;
  }
  .tarifasSection .cardsContainer .card-tarifa .price .subPrice .legal {
    font-size: 16px;
  }

  /* VENTAJAS 450 */
  .ventajasSection .containerVentajas {
    padding: 0 15px;
  }
  .ventajasSection .containerVentajas .ventajaCard {
    width: 100%;
  }
}

@media(max-width: 400px) {
  /* BANNER 400 */
  .bannerSection .bannerSectionContainer .firstInfo .bannerTitle {
    font-size: 24px;
  }
}

@media(max-width: 376px) {
  /* AHORRO 376 */
  .ahorroSection .ahorroContainer .cardAhorro {
    width: 100%;
    padding: 22px 33px;
  }
  .ahorroSection .btn-ahorro {
    min-width: 100%;
  }

  /* TARIFAS 376 */
  section.tarifasSection .cardsContainer .card-tarifa {
    width: 314px;
  }
  .tarifasSection .cardsContainer .card-tarifa .cardTitle h3 {
    font-size: 22px;
  }
  .tarifasSection .cardsContainer .card-tarifa .price {
    font-size: 66px;
  }
}

@media(max-width: 360px) {
  /* TARIFAS 360 */
  section.tarifasSection .cardsContainer .card-tarifa {
    width: 284px;
  }
  .tarifasSection .cardsContainer .card-tarifa .cardTitle h3 {
    font-size: 20px;
  }
  .tarifasSection .cardsContainer .card-tarifa .price {
    font-size: 58px;
  }
  .tarifasSection .cardsContainer .card-tarifa .price .subPrice .legal {
    font-size: 14px;
  }
}

@media(max-width: 350px) {
  /* BANNER 350 */
  .bannerSection .bannerSectionContainer .firstInfo .mancheta-promo .promo span {
    font-size: 22px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .mancheta-promo .price .ahorro .mainNum {
    font-size: 72px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .mancheta-promo .price .textAhorro {
    font-size: 20px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .mancheta-promo .price .ahorro .eur p span {
    font-size: 38px;
  }
  .bannerSection .bannerSectionContainer .firstInfo .mancheta-promo .price .ahorro .eur p {
    font-size: 16px;
  }

  /* AHORRO 350 */
  .ahorroSection .ahorroContainer .cardAhorro {
    padding: 22px;
  }
}

@media(max-width: 330px) {
  /* BANNER 330 */
  .bannerSection .bannerSectionContainer .firstInfo .bannerTitle {
    font-size: 22px;
  }

  /* AHORRO 330 */
  .ahorroSection .ahorroContainer .cardAhorro .price .num {
    font-size: 88px;
  }
}

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