@import "../style_multiple.css";

/* IMG */
.img{background-repeat: no-repeat;background-position: center;background-size: contain;}
.img-ventaja-1 {background-image: url("../../img/emkt/ventaja1.svg");}
.img-ventaja-2 {background-image: url("../../img/emkt/ventaja2.svg");}
.img-ventaja-3 {background-image: url("../../img/emkt/ventaja3.svg");}
.icon-regalo {background-image: url("../../img/emkt/regalo.svg");}
.icon-luz {background-image: url("../../img/emkt/icon-luz.svg");}
.icon-gas {background-image: url("../../img/emkt/icon-gas.svg");}
.icon-dual {background-image: url("../../img/emkt/icon-dual.svg");}
.icon-dual-mantenimiento {background-image: url("../../img/emkt/icon-luz-gas-mantenimiento.svg");}
.icon-factura {background-image: url("../../img/emkt/icon-factura.svg");}
.banner-portada {background-image: url("../../img/emkt/portada-emkt.webp");}
.img-calc-movil {background-image: url("../../img/emkt/img-calculadora-movil.webp");}
.icon-good {background-image: url("../../img/check2.png");}
.icon-error {background-image: url("../../img/close_button.png");}
.icon-star {background-image: url("../../img/icon-star.svg");}

body {
  background-color: unset;
}

.btn-primary {
  border: 1px solid var(--naranja-emkt);
  background-color: var(--naranja-emkt);
  color: white;
  text-align: center;
  padding: 8px 32px;
  border-radius: 50px;
  width: fit-content;
}
.btn-primary:hover  {
  border: 1px solid #d05224;
  background-color: #d05224;
  color: white;
}
.btn-primary:active  {
  border: 1px solid var(--naranja-emkt) !important;
  background-color: #cb4d20 !important;
  box-shadow: unset !important;
}

.btn-secondary {
  background-color: var(--dark-blue);
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 8px;
}
.btn-secondary:hover {
  background-color: var(--dark-blue);
  border: 1px solid white;
  color: white;
}
.btn-secondary:active {
  background-color: var(--dark-blue) !important;
  border: 1px solid white !important;
  box-shadow: unset !important;
}
.btn-secondary:focus {
  box-shadow: unset;
}

.btn-secondary-contrast {
  background-color: white;
  border: 1px solid var(--naranja-emkt);
  color: var(--naranja-emkt);
  padding: 8px;
  text-align: center;
  margin-bottom: 0;
  border-radius: 50px;
}
.btn-secondary-contrast:hover { 
  border: 1px solid #cb4d20;
  color: #cb4d20;
}

section:not(.banner-central) {
  padding: 34px 0;
}

/* ------------- HEADER ------------- */

header{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  height: 84px;
  width: 100%;
  box-shadow: 8px -2px 7px 0px;
  position: fixed;
  z-index: 500;
}
header .headerContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.logo{
  height: 33px;
  cursor: pointer;
}

.subheader {
  height: 84px;
}

/* ------------- FIN HEADER ------------- */

/* --------------- BANNER --------------- */

.bannerSection {
  background-color: var(--dark-blue);
}
.bannerSection .bannerContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 50px 0;
}
.bannerSection .promoBanner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--naranja-emkt);
  min-height: 438px;
  min-width: 373px;
  height: 100%;
  width: 33%;
  padding: 24px;
  border-radius: 10px;
  color: white;
}
.bannerSection .promoBanner .img {
  width: 59px;
  height: 59px;
}
.bannerSection .promoBanner .info-banner p.mancheta {
  font-size: 20px;
  font-weight: 700;
  background-color: white;
  padding: 5px 10px;
  color: var(--naranja-emkt);
  width: fit-content;
  margin-bottom: 14px;
  border-radius: 5px;
}
.bannerSection .promoBanner .info-banner p {
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 0;
}
.bannerSection .promoBanner .info-banner p.main {
  font-size: 58px;
  font-weight: 800;
  line-height: 1;
}
.bannerSection .promoBanner .price {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 0;
}

.bannerSection .banner-portada {
  background-size: cover;
  border-radius: 10px;
  width: 402px;
  height: 438px;
}

/* BANNER CALCULADORA */

.bannerSection .formCalcBanner {
  min-width: 377px;
  max-width: 425px;
  min-height: 438px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0px 3px 20px #0c11221a;
  padding: 24px;
  line-height: normal;
  color: var(--dark-blue);
}
.bannerSection .formCalcBanner .titleForm {
  text-align: center;
  font-weight: 900;
  font-size: 26px;
  margin-bottom: 0!important;
}
.bannerSection .formCalcBanner .inputArea {
  width: fit-content;
  margin: 0 auto;
}
.bannerSection .formCalcBanner .inputArea.bottom {
  display: flex;
  flex-direction: column;
}
.bannerSection .formCalcBanner .inputArea > .head {
  font-weight: bold;
  margin-bottom: 5px!important;
}
.bannerSection .formCalcBanner .inputArea .slider-p {
margin-bottom: 1rem!important;
}
.bannerSection .formCalcBanner .inputArea label {
  font-size: 14px;
  margin-bottom: 8px;
  position: relative;
}
.bannerSection .formCalcBanner .inputArea label.producto {
  border-radius: 24px;
  border: 1px solid #D9D9D9;
  color: #D9D9D9;
  padding: 8px 20px;
  cursor: pointer;
}
.bannerSection .formCalcBanner .inputArea label.compania-actual::before,
.bannerSection .formCalcBanner .inputArea label.horas-consumo::before {
  content: unset;
}
.bannerSection .formCalcBanner .inputArea input[type = radio] {
  position: absolute;
  margin-right: .4em;
  opacity: 0;
}
.bannerSection .formCalcBanner .inputArea input[type = radio]:checked + label {
  border: 1px solid var(--dark-blue);
  color: var(--dark-blue);
}
.bannerSection .formCalcBanner .inputArea label.compania-actual,
.bannerSection .formCalcBanner .inputArea label.horas-consumo {
  margin-right: 0px;
  width: 100%;
}
.bannerSection .formCalcBanner .inputArea label.compania-actual p,
.bannerSection .formCalcBanner .inputArea label.horas-consumo p {
  margin-bottom: 8px;
}
.bannerSection .formCalcBanner .inputArea select.compania-actual,
.bannerSection .formCalcBanner .inputArea select.horas-consumo {
  width: 100%;
  height: 32px;
  background-image: none;
  border-radius: 40px;
  border: 1px solid #D9D9D9;
  color: #6C6C6C;
  font-size: 16px;
  font-weight: 300;
  padding-left: 10px;
}

.bannerSection .formCalcBanner .inputArea select.compania-actual option,
.bannerSection .formCalcBanner .inputArea select.horas-consumo option {
  font-size: 16px;
  color: #6C6C6C;
}

.slideCard p {
  margin-bottom: 0;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: var(--naranja-emkt);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.bannerSection .formCalcBanner .slider {
  height: 10px;
  background-color: #E5E3DF;
  position: relative;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  width: 100%;
  --width-bar: 26%;
}
.bannerSection .formCalcBanner .slider::before{
  content: "";
  position: absolute;
  border-radius: 5px;
  z-index: -1;
  height: 100%;
  width: var(--width-bar);
  background: var(--naranja-emkt);
}
.bannerSection .formCalcBanner .slider::-webkit-slider-thumb{  
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: 100%;
  box-shadow: 0px 7px 7px #0000001A;
  background: var(--naranja-emkt);
  border: 12px solid #fff;
  cursor: pointer;  
  position: relative;
}  
.bannerSection .formCalcBanner .slider sup{
  font-size: 8px;
}
.bannerSection .formCalcBanner .inputArea .inputContainer {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}
.bannerSection .formCalcBanner .inputArea .inputContainer .inputForm {
  display: flex;
  justify-content: space-between;
  gap: 13px;
}

.bannerSection .formCalcBanner .inputArea .inputContainer input{
  background-image: none;
  border-radius: 40px;
  border: 1px solid #D9D9D9;
  height: 32px;
  width: 100%;
  font-size: 14px;
  font-weight: 300;
  color: #6C6C6C;
  padding-left: 10px;
}
.bannerSection .formCalcBanner .inputArea label.terminos {
  font-size: 10px;
  text-align: center;
  margin: 16px auto 0 auto;
  width: fit-content;
  font-weight: 400;
}
.bannerSection .formCalcBanner .inputArea label.terminos a {
  color: var(--blue-text);
  font-weight: 400;
}
.bannerSection .formCalcBanner .inputArea label.terminos::before {
  border: none;
}
.bannerSection .formCalcBanner .inputArea label.terminos input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.bannerSection .formCalcBanner .inputArea label.terminos .checkmark {
  position: absolute;
  top: -5px;
  left: -26px;
  width: 22px;
  height: 22px;
  border: 1px solid #D9D9D9;
  border-radius: 2px;
  transition: background-color 0.1s;
  margin-right: 5px;
  cursor: pointer;
}
.bannerSection .formCalcBanner .inputArea label.terminos .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.bannerSection .formCalcBanner .inputArea label.terminos .checkmark:after {
  left: 7px;
  top: 4px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.bannerSection .formCalcBanner .inputArea label.terminos input:checked ~ .checkmark {
  background-color: var(--naranja-emkt);
  border: 1px solid var(--naranja-emkt);
}
.bannerSection .formCalcBanner .inputArea label.terminos input:checked ~ .checkmark:after {
  display: block;
}
.bannerSection .formCalcBanner .btn-card-container {
  width: 100%;
  display: flex;
  justify-content: center;
}
.bannerSection .formCalcBanner .buttonSendCalc {
  border: 1px solid var(--naranja-emkt);
  margin: 0 auto;
  min-width: 200px;
}
.bannerSection .formCalcBanner .fa-spinner{
  border: 0;
  border-radius: 25px;
  font-size: 24px;
  margin: 15px auto;
  text-align: center;
  display: block;
}
.bannerSection .formCalcBanner .result{
  text-align: center;
  font-size: 1.6em;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 80%;
  padding-top: 3rem;
  margin: auto;
}
.bannerSection .formCalcBanner .result p {
  font-size: 20px;
}

.bannerSection .formCalcBanner .modalBanner {
  font-size: 16px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 144%);
  border: 0;
  border-radius: 25px;
  background-color: var(--orange-naturgy);
  color: #fff;
  padding: 11px 18px;
}

/* EMAIL CHANGES */
.bannerSection.emailBanner{
  min-height: 34rem;
}
.bannerSection.emailBanner .formCalcBanner{
  min-height: 37rem;
  top: 1rem;
}
.bannerSection.emailBanner .formCalcBanner #actualCompany{
  font-size: 16px;
  border: 1px solid #818a91;
  padding: 5px 14px;
  border-radius: 3px;
  padding-left: 8px;
  margin-top: 8px;
  margin-bottom: 5px;
  color: var(--blue-text);
}
/* FIN EMAIL CHANGES */


/* RESET FORM */
.bannerSection .formCalcBanner form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bannerSection .formCalcBanner .btn-nuevos-productos {
  border: 1px solid var(--blue-text);
  color: #000000;
  font-size: 16px;
  width: 100%;
  border-radius: 6px;
  height: 30px;
  padding-left: 5px;
}

/* ------------- FIN BANNER ------------- */
/* ----------- FACTURA ----------- */
.facturaSection p {
  margin: 0;
}

.facturaSection .facturaContainer {
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.facturaSection h2 {
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 16px;
}

.facturaSection h2 span {
  color: var(--naranja-emkt);
}

.facturaSection .img {
  width: 81px;
  height: 83px;
  margin: 0 auto;
}

.facturaSection #formDataFactBanner .envio-form6 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.facturaSection #formDataFactBanner .inputsContainer {
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

.facturaSection #formDataFactBanner .inputsContainer .title-input {
  font-size: 16px;
  font-weight: 400;
  color: var(--dark-blue);
  margin-bottom: 0;
}

.facturaSection #formDataFactBanner .inputsContainer .phoneCont  {
  width: 100%;
  max-width: 327px;
}

.facturaSection #formDataFactBanner .line-button {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  width: 100%;
}

.facturaSection #formDataFactBanner button {
  width: fit-content;
  min-width: 154px;
}

.facturaSection #formDataFactBanner button:focus {
  box-shadow: none;
}

.facturaSection #formDataFactBanner .imagenItem{
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
  margin-left: 4%;
}
.facturaSection #formDataFactBanner .imagenItem img{
  width: 25px;
  margin-right: 5px;
  /* filter: brightness(0) saturate(100%) invert(23%) sepia(6%) saturate(1535%) hue-rotate(142deg) brightness(94%) contrast(85%); */
}
.facturaSection #formDataFactBanner .imagenItem p{
  white-space: nowrap;
  text-overflow: ellipsis;
  width: fit-content;
  overflow: hidden;
  font-size: 13px;
}
.facturaSection #formDataFactBanner .imagenItem i{
  margin-left: 10px;
  cursor: pointer;
  font-size: 16px;
}

.facturaSection #formDataFactBanner .errorimg{
  font-size: 15px;
  color: var(--danger);
  margin-top: 0.5rem;
  margin-left: 15px;
}

.facturaSection #formDataFactBanner .inputsContainer .factura{
  width: 100%;
  max-width: 327px;
}

.facturaSection #formDataFactBanner .factura .subTitle{
  font-size: 16px;
  margin-bottom: 4px;
}

.facturaSection #formDataFactBanner .line-file p,
.facturaSection #formDataFactBanner .line-tel p  {
  margin: 0;
  color: var(--dark-blue);
  font-size: 16px;
  font-weight: 300;
}
.facturaSection #formDataFactBanner .line-file p.formatos {
  font-size: 11px;
  color: #757575;
}

.facturaSection #formDataFactBanner #drag_upload_file {
  background-image: url(../../img/emkt/upload.svg);
  background-repeat: no-repeat;
  background-position: 96% 50%;
}

.facturaSection #formDataFactBanner #drag_upload_file,
.facturaSection #formDataFactBanner #telefono {
  display: flex;
  align-items: center;
  border: 1px solid #D9D9D9;
  border-radius: 40px;
  height: 35px;
  width: 100%;
  cursor: pointer;
  transition: background-color .2s;
  -o-transition: background-color .2s;
  -moz-transition: background-color .2s;
  padding-left: 15px;
  margin-top: 8px;
  font-weight: 300
}

.facturaSection #formDataFactBanner #drag_upload_file.loading {
  background-image: url(../../img/redesign/loading.gif);
  background-position: center;
  background-size: 40% 25%;
}

.facturaSection #formDataFactBanner #drag_upload_file p {
  color: #757575;
  margin: 0;
}

.facturaSection #formDataFactBanner #drag_upload_file .selectfile {
  display: none;
}

.facturaSection .terminos {
  font-size: 10px;
  text-align: center;
  margin: 16px auto 0 auto;
  width: fit-content;
  font-weight: 400;
  color: var(--dark-blue);
  position: relative;
}
.facturaSection .terminos a {
  color: var(--dark-blue);
  font-weight: 400;
}
.facturaSection .terminos::before {
  border: none;
}
.facturaSection .terminos input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.facturaSection .terminos .checkmark {
  position: absolute;
  top: -4px;
  left: -26px;
  width: 22px;
  height: 22px;
  border: 1px solid #D9D9D9;
  border-radius: 2px;
  transition: background-color 0.1s;
  margin-right: 5px;
  cursor: pointer;
}
.facturaSection .terminos .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 7px;
  top: 4px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.facturaSection .terminos input:checked ~ .checkmark {
  background-color: var(--naranja-emkt);
  border: 1px solid var(--naranja-emkt);
}
.facturaSection .terminos input:checked ~ .checkmark:after {
  display: block;
}

/* ---- FIN CUSTOM CHECKBOX ---- */

.facturaSection .terminos a {
  color: var(--text);
  text-decoration: underline!important;
}

.facturaSection #formDataFact #drop_file_zone #drag_upload_file.is-dragover{
  background-color: #ebebeb;
}

.facturaSection #formDataFact #drag_upload_file #selectfile {
  display: none;
}

.facturaSection #formDataFact .phoneCont > label{
  font-size: 16px;
  margin-bottom: 4px;
  width: 100%;
  text-align: left;
}

.facturaSection #formDataFact .error{
  color: var(--danger);
  font-weight: bold;
  margin-top: 5px;
}

.facturaSection .atencion-llamada {
  text-align: left;
  margin-bottom: 15px;
}

.facturaSection .result-form {
  padding: 2rem 1rem;
  font-size: 18px;
  color: var(--text);
}

.facturaSection .result-form i{
  margin-top: 10px;
  color: var(--danger);
}

.facturaSection .succes-form .title {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 5px;
  color: #08A800;
}

.facturaSection .fail-form p {
  color: #08A800;
}

.facturaSection .fail-form .title {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 5px;
  text-align: center;
  color: #C00202;
}

.facturaSection .fail-form p {
  color: #C00202;
}

.facturaSection .fail-form p,
.facturaSection .succes-form p {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}

.facturaSection .succes-form p.horario-title {
  font-weight: 800;
  margin: 15px 0;
}

.facturaSection .succes-form .img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(95%) saturate(1588%) hue-rotate(86deg) brightness(99%) contrast(102%);
  height: 25px;
  width: 25px;
  padding: 3px;
  border-radius: 50%;
  outline: 2px solid #08A800;
  margin: 0 5px;
  margin-bottom: 15px;
  background-size: 50%;
}

.facturaSection .fail-form .img {
  filter: brightness(0) saturate(100%) invert(9%) sepia(93%) saturate(6624%) hue-rotate(7deg) brightness(92%) contrast(109%);
  height: 25px;
  width: 25px;
  padding: 3px;
  border-radius: 50%;
  outline: 2px solid #C00202;
  margin: auto;
  margin-bottom: 15px;
  background-size: 50%;
}

/* ------------- FIN SECTION FACTURA ------------- */
/* --------------- VENTAJAS --------------- */

.ventajasSection .ventajasContainer {
  display: flex;
  justify-content: space-around;
}

.ventajasSection h2 {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--dark-blue);
  margin-bottom: 24px;
}

.ventajasSection h2 span {
  color: var(--naranja-emkt);
}

.ventajasSection .ventajasContainer .ventaja {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 33%;
}

.ventajasSection .ventajasContainer .ventaja .img {
  height: 110px;
  width: 120px;
}

.ventajasSection .ventajasContainer .infoVentaja {
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1;
  text-align: center;
  margin-top: 17px;
}

.ventajasSection .ventajasContainer .title {
  font-size: 20px;
  font-weight: 800;
  color: var(--dark-blue);
  margin-bottom: 0;
}

.ventajasSection .ventajasContainer .text {
  font-size: 16px;
  font-weight: 300;
  color: var(--dark-blue);
  margin-bottom: 0;
}


/* --------------- FIN VENTAJAS --------------- */

/* --------------- TARIFAS --------------- */

.cardsSection h2 {
  font-size: 26px;
  font-weight: 900;
  color: var(--dark-blue);
  text-align: center;
  margin-bottom: 24px;
}

.cardsSection h2 span {
  color: var(--naranja-emkt);
}

.cardsSection .cardsContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 21px;
}

.cardsSection .cardsContainer .cardContain {
  margin: unset;
  width: 33%;
}

.cardsSection .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: none !important;
}

.cardsSection .card .title-slick {
  display: none;
}

.cardsSection .card .franjaCard {
  background-color: var(--naranja-emkt);
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 8px;
  border-radius: 10px 10px 0 0;
}

.cardsSection .card .franjaCard p {
  margin-bottom: 0;
}

.cardsSection .card .main-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-top: 16px;
  border-radius: 0 0 10px 10px;
  border: 1px solid #D9D9D9;
  border-top: none;
}
.cardsSection .card.promo .main-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-top: 26px;
  background-color: var(--dark-blue);
  border: 1px solid var(--dark-blue);
  border-radius: 0 0 10px 10px;
}

.cardsSection .card .info-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--dark-blue);
  padding: 0 13px;
}

.cardsSection .card.promo .info-card {
  color: white;
  position: relative;
}

.cardsSection .card .info-card .img {
  filter: brightness(0) saturate(100%) invert(46%) sepia(94%) saturate(3115%) hue-rotate(348deg) brightness(98%) contrast(92%);
  width: 40px;
  height: 40px;
}

.cardsSection .card.promo .info-card .img {
  filter: unset;
}

.cardsSection .card.promo .info-card .mancheta-promo {
  display: flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  padding: 3px 12px;
  background-color: #00BE23;
  position: absolute;
  top: -8px;
  right: 16px;
  border-radius: 50px
}

.cardsSection .card.promo .info-card .mancheta-promo .img {
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-size: cover;
}


.cardsSection .card.promo .info-card .mancheta-promo p {
  margin-bottom: 0;
  color: white;
  font-size: 12px;
  font-weight: 600;
}

.cardsSection .card .info-card .img.icon-dual-mantenimiento {
  width: 60px;
  height: 40px;
}

.cardsSection .card .info-card .titleCard {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 0;
}

.cardsSection .card .btns-card {
  padding: 0 13px 13px;
}

.cardsSection .cardsContainer .cardContain button,
.cardsSection .cardsContainer .cardContain a {
  width: 100%;
  display: block;
}

.cardsSection .card .btns-card .btn-primary {
  margin-top: 10px;
}

.slick-dots li {
  margin: 0 0.25rem;
  max-width: 142px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardsSection .dotsPoints .slick-dots button {
  width: 8px;
  height: 8px;
}

.slick-dots {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 1rem 0;
  list-style-type: none;
  gap: 6px;
}
.cardsSection .normalDots .slick-dots .slick-active {
  background-color: var(--dark-blue);
  color: white;
}
.slick-dots li {
  margin: 0 0.25rem;
}
.slick-dots button {
  display: block;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 100%;
  background-color: #E8E8E8;
  text-indent: -9999px;
}

.slick-dots li.slick-active button {
  background-color: white;
}

.cardsSection .dotsPoints .slick-dots {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 1rem 0; 
  padding-top: .8rem;       
  list-style-type: none;
}
.cardsSection .dotsPoints .slick-dots li {
  margin: 0 0.25rem;
}
.cardsSection .dotsPoints .slick-dots button {
  display: block;
  width: 15px;
  height: 15px;
  padding: 0;
  border: none;
  border-radius: 100%;
  background-color: #E8E8E8;        
  text-indent: -9999px;
}
.cardsSection .dotsPoints .slick-dots button:focus {
  outline: 0;
}
.cardsSection .dotsPoints .slick-dots li.slick-active button {
  background-color: var(--dark-blue);
}

/* --------------- FIN TARIFAS --------------- */

section.calculadoraSection  {
  background-color: rgba(227, 232, 239, 0.40);
  padding: 46px 0 76px 0;
}

/* --------------- C2C SECTION --------------- */
.c2c-section .c2c-container {
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
  padding: 32px;
}

.c2c-section .c2c-container h2 {
  margin-bottom: 4px;
  font-weight: 900;
}

.c2c-section .c2c-container .subtitle {
  font-family: Gilroy, sans-serif;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: var(--dark-blue);
}

.c2c-section .c2c-container .formc2c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.c2c-section .c2c-container .formc2c .inputArea {
  display: flex;
  flex-direction: column;
}

.c2c-section .c2c-container .formc2c .inputArea .inputForm label {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 400;
  color: var(--dark-blue);
}

.c2c-section .c2c-container .formc2c .inputForm .input-phone {
  border-radius: 40px;
  border: 1px solid #D9D9D9;
  height: 35px;
  width: 100%;
  padding-left: 15px;
  min-width: 328px;
}

.c2c-section .c2c-container .formc2c .result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
}

.c2c-section .c2c-container .formc2c .result.fail-form {
  color: #C00202;
}

.c2c-section .c2c-container .formc2c .result.succes-form {
  color: #08A800;
}

.c2c-section .c2c-container .formc2c .result.fail-form .img {
  filter: brightness(0) saturate(100%) invert(9%) sepia(93%) saturate(6624%) hue-rotate(7deg) brightness(92%) contrast(109%);
  height: 25px;
  width: 25px;
  padding: 3px;
  border-radius: 50%;
  outline: 2px solid #C00202;
  margin: auto;
  margin-bottom: 8px;
  background-size: 50%;
}

.c2c-section .c2c-container .formc2c .result.succes-form .img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(95%) saturate(1588%) hue-rotate(86deg) brightness(99%) contrast(102%);
  height: 25px;
  width: 25px;
  padding: 3px;
  border-radius: 50%;
  outline: 2px solid #08A800;
  margin: 0 5px;
  margin-bottom: 8px;
  background-size: 50%;
}

.c2c-section .c2c-container .terminos {
  font-size: 10px;
  text-align: center;
  margin: 16px auto 0 auto;
  width: fit-content;
  font-weight: 400;
  color: var(--dark-blue);
  position: relative;
}
.c2c-section .c2c-container .terminos a {
  color: var(--dark-blue);
  font-weight: 400;
}
.c2c-section .c2c-container .terminos::before {
  border: none;
}
.c2c-section .c2c-container .terminos input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.c2c-section .c2c-container .terminos .checkmark {
  position: absolute;
  top: -4px;
  left: -26px;
  width: 22px;
  height: 22px;
  border: 1px solid #D9D9D9;
  border-radius: 2px;
  transition: background-color 0.1s;
  margin-right: 5px;
  cursor: pointer;
}
.c2c-section .c2c-container .terminos .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.c2c-section .c2c-container .terminos .checkmark:after {
  left: 7px;
  top: 4px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.c2c-section .c2c-container .terminos input:checked ~ .checkmark {
  background-color: var(--naranja-emkt);
  border: 1px solid var(--naranja-emkt);
}
.c2c-section .c2c-container .terminos input:checked ~ .checkmark:after {
  display: block;
}
.c2c-section .btnc2c-container {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.c2c-section .btnc2c-container button {
  min-height: 42px;
}
/* --------------- FIN C2C SECTION --------------- */

/* ------------- CALCULADORA ------------- */

.display-calculadora {
  display: none;
}

section.calculadoraSection {
  background-color: white;
  padding-bottom: 2%;
  text-align: center;
  width: 100%;
  height: fit-content;
  top: 0;
  margin-top: 20px;
}

.calculadoraSection h2 span {
  color: var(--naranja-emkt);
}

.calculadoraSection .franja-cal {
  background-color: #E4ECFB;
  color: var(--dark-blue);
  width: 1100px;
  max-width: 95%;
  padding: 20px 0;
  margin: 15px auto 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

.calculadoraSection .franja-cal p{
  margin-bottom: 0px;
  font-size: 20px;
}

.calculadoraSection .franja-cal .bigbold {
  font-size: 28px;
}

.calculadora {
  background-color: #fff;
  width: 1100px;
  max-width: 95%;
  padding: 20px 0;
  margin: 0px auto 15px auto;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

.calculadoraSection .terminos a {
  color: var(--text);
  text-decoration: underline!important;
}

.calculadoraSection .close-section {
  top: 0;
  height: 100%;
  width: 100%;
}

.calculadora .closeimg {
  color: var(--text);
  text-align: right;
  padding-right: 15px;
  font-size: 25px;
  margin-top: 5px;
  position: absolute;
  z-index: 99;
  font-size: 16px;
}

.close-section {
  height: 100%;
  position: absolute;
  width: 100%;
 }   

.calculadoraSection h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 26px;
}

.calculadoraSection .calculadoraContainer {
  height: 100%;
  margin: auto;
  max-width: 90%;
  display: flex;
  justify-content: center;
}

.calculadoraSection .calculadoraContainer .formArea {
  width: 35rem;
  min-height: 260px;
}

.calculadoraSection .calculadoraContainer .formArea .progress {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  margin: 20px 0;
  background-color: unset;
  position: relative;
  width: 100%;
}

.calculadoraSection .calculadoraContainer .formArea .progress span {
  background: linear-gradient(270deg, #f5f5f5 50%, var(--dark-blue) 0);
  background-position: 100% 100%;
  background-size: 210% 100%;
  border-radius: 6px;
  height: 7px;
  transition: background-position .5s;
  width: 99%;
}

.calculadoraSection .calculadoraContainer .formArea .progress span.active {
  background-position: 0 100%;
}

.calculadoraSection .calculadoraContainer .formArea .titleArea {
  font-size: 18px;
  color: var(--dark-blue);
  text-align: center;
}

.calculadoraSection .calculadoraContainer .formArea .fase5 .img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(95%) saturate(1588%) hue-rotate(86deg) brightness(99%) contrast(102%);
  height: 25px;
  width: 25px;
  padding: 3px;
  border-radius: 50%;
  outline: 2px solid #08A800;
  margin: 0 auto 5px;
  margin-bottom: 15px;
  background-size: 50%;
}

.calculadoraSection .calculadoraContainer .formArea .fase5 .title {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 5px;
  color: #08A800;
  text-align: center;
}

.calculadoraSection .calculadoraContainer .formArea .fase5 p {
  font-size: 16px;
  font-weight: 400;
  color: #08A800;
  text-align: center;
}

.calculadoraSection .calculadoraContainer .formArea .fase5 p.horario-title {
  font-weight: 800;
  margin: 15px 0;
}

.calculadoraSection .calculadoraContainer .formArea .inputForm{
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
.calculadoraSection .calculadoraContainer .formArea .inputForm > div {
  text-align: left;
}
.calculadoraSection .calculadoraContainer .formArea .inputForm label {
  font-weight: 300;
  margin-bottom: 0;
  color: var(--dark-blue);
}
.calculadoraSection .calculadoraContainer .formArea .inputForm input {
  width: 230px;
  margin: 10px 0;
  padding: 5px;
  border-radius: 40px;
  border: 1px solid #D9D9D9;
  height: 32px;
  font-size: 14px;
  font-weight: 300;
  color: #6C6C6C;
}
.calculadoraSection .calculadoraContainer .formArea .inputForm input:focus-visible {
  outline: none;
}

.calculadoraSection .calculadoraContainer .formArea .terminos{
  cursor: pointer;
  margin-top: 1.7rem;
  font-size: 16px;
  font-weight: 100;
  position: relative;
}

.calculadoraSection .calculadoraContainer .formArea .input-check {
  transform: scale(1.2);
  margin-right: 6px;
  opacity: 0;
}

.calculadoraSection .calculadoraContainer .formArea .formButtons {
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.calculadoraSection .calculadoraContainer .formArea .formButtons.hidden {
  display: none;
}

.calculadoraSection .calculadoraContainer .formArea .formButtons .calcButton {
  font-size: 17px;
  width: fit-content;
  min-width: 110px;
  border: none;
  margin: 2.3rem auto 20px auto;
  transition: 0.3s;
  pointer-events: all;
}

.calculadoraSection .calculadoraContainer .formArea .formButtons .calcButton.disable {
  pointer-events: none;
  opacity: 20%;
  cursor: not-allowed;
}

.calculadoraSection .calculadoraContainer .formArea .formButtons .calcButton:focus {
  outline: none;
}  

.calculadoraSection .calculadoraContainer .formArea .btn_electrodomesticos {
  transition: 0.3s;
  pointer-events: all;
  cursor: pointer;
  margin: 2.3rem auto 20px;
  width: 195px;
}

.calculadoraSection.calc-modal .calculadoraContainer .formArea .btn_electrodomesticos {
  margin: 2.3rem auto 20px auto;
}

.calculadoraSection .calculadoraContainer .formArea .btn_electrodomesticos p {
  margin-bottom: 0;
  font-size: 17px;
  color: #fff;
}

.calculadoraSection .calculadoraContainer .formArea .btn_electrodomesticos.calculadora,
.calculadoraSection .calculadoraContainer .formArea .btn_electrodomesticos.calculadoraBtn {
  margin: 2.3rem auto 20px auto;
}

.calculadoraSection .calculadoraContainer .formArea .btn_electrodomesticos.disable {
  pointer-events: none;
  opacity: 20%;
  cursor: not-allowed;
}

.calculadoraSection .calculadoraContainer .formArea .calcButtonAtras {
  display: none;
}

.calculadoraSection .calculadoraContainer .formArea .calcButtonAtras.open {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 17px;
  transition: 0.3s;
  height: fit-content;
  cursor: pointer;
}

.calculadoraSection .calculadoraContainer .formArea .calcButtonAtras:hover  {
  text-decoration: underline;
}    

.calculadoraSection .calculadoraContainer .formArea .calcButtonAtras p {
  margin-bottom: 0;
}

.calculadoraSection .calculadoraContainer .formArea .calcButtonAtras .img-arrow-atras {
  filter: brightness(0) saturate(100%) invert(23%) sepia(62%) saturate(2495%) hue-rotate(319deg) brightness(94%) contrast(88%);
  width: 15px;
  height: 15px;
  transform: rotate(90deg);
}

.calculadoraSection .checkSelectCalc input[type="radio"],
.calculadoraSection .checkSelectCalc input[type="checkbox"]{
  position: absolute;
  left: -200vw;
}

.calculadoraSection .checkSelectCalc {
  display: flex;
  margin: 2rem 0 0;
  gap: 20px;
}

.calculadoraSection .fase3 .checkSelectCalc {
  flex-wrap: wrap;
}

.calculadoraSection .calculadoraContainer .fase4 a {
  color: var(--dark-blue);
}

.calculadoraSection .checkSelectCalc label {
  display: flex;
  gap: 16px;
  width: 32%;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  color: var(--dark-blue);
  font-weight: 700;
  text-align: left;
  padding: 24px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
  font-size: 20px;
  transition: background-color .2s, border .2s;
  -o-transition: background-color .2s, border .2s;
  -moz-transition: background-color .2s, border .2s;
}

.calculadoraSection .checkSelectCalc label:hover {
  border: 1px solid var(--dark-blue);
}

.calculadoraSection .checkSelectCalc label img {
  filter: brightness(0) saturate(100%) invert(27%) sepia(19%) saturate(1842%) hue-rotate(173deg) brightness(98%) contrast(94%);
  height: 32px;
}

.calculadoraSection .checkSelectCalc input[type="radio"]:checked + label,
.calculadoraSection .checkSelectCalc input[type="checkbox"]:checked + label {
  border: 1px solid var(--dark-blue);
}

.calculadoraSection .opcion-mantenimiento input:checked~.checkmark, 
.calculadoraSection .terminos input:checked~.checkmark {
  background-color: var(--naranja-emkt);
  border: none;
}

.calculadoraSection .slidecontainer p {
  margin-top: 1rem;
  margin-bottom: 0;
  text-align: center;
}

.calculadoraSection  .opcion-mantenimiento {
  padding: 10px;
}

.calculadoraSection .oferta.open {
  background-color: #EFF2F7;
  display: flex;
  padding: 20px 0;
  align-items: center;
}

.calculadoraSection .oferta .num {
  font-size: 18px;
  font-weight: 700;
  padding: 0 20px;
  border-right: 1px solid #000;
  margin-bottom: 0;
  line-height: 1;
  text-align: left;
  color: var(--dark-blue);
}

.calculadoraSection .oferta .num span {
  font-size: 42px;
}

.calculadoraSection .oferta .text {
  font-size: 18px;
  padding: 0 20px;
  margin-bottom: 0;
  text-align: left;
}

.calculadoraSection .condicionesMantenimiento {
  font-size: 14px;
  text-align: left;
  color: #707070;
  margin-top: 5px;
}

.calculadoraSection .opcion-mantenimiento .mantenimiento {
  margin-bottom: 0;
  position: relative;
}

.calculadoraSection .slidecontainer #myRange {
  -webkit-appearance: none;
  background: #dc35452e;
  outline: none;
  height: 5px;
  width: 75%;
}

.calculadoraSection .slidecontainer #myRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--naranja-emkt);
  cursor: pointer;
}

.calculadoraSection .slidecontainer #myRange::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--naranja-emkt);
  cursor: pointer;
}

.calculadoraSection .fase4 lottie-player{
  position: absolute;
  bottom: 18%;
  margin: auto;
  width: 250px;
  height: 250px;
  left: 30%;
}

.calculadoraSection .fase5 i{
  margin: 1.5rem 0.5rem;
}

.calculadoraSection .fase5 a{
  color: var(--text);
}

.calculadoraSection .fase5 a:hover{
  color: var(--text);
}

.calculadoraSection .fas.fa-spinner {
  margin: auto;
}

.badPhone {
  display:none;
  color: var(--danger);
  font-size: 14px;
  text-align: center;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 5px;
}

input[type="tel"].badInput ~ .badPhone {
  display: block;
}
/* ---- CUSTOM CHECKBOX ---- */

/* Hide the browser's default checkbox */
.calculadoraSection .terminos input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.calculadoraSection .terminos .checkmark {
  position: absolute;
  top: 0;
  left: 328px;
  width: 22px;
  height: 22px;
  border: 1px solid #D9D9D9;
  border-radius: 2px;
  transition: background-color 0.1s;
  margin-right: 5px;
}
.calculadoraSection .terminos .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.calculadoraSection .terminos .checkmark:after {
  left: 7px;
  top: 4px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.calculadoraSection .terminos input:checked ~ .checkmark {
  background-color: var(--naranja-emkt);
  border: 1px solid var(--naranja-emkt);
}
.calculadoraSection .terminos input:checked ~ .checkmark:after {
  display: block;
}
.calculadoraSection.pasos {
  min-height: auto;
  text-align: left;
  padding-bottom: 24px;
}

.calculadoraSection.pasos h2 {
  text-align: center;
  font-size: 26px;
}

.calculadoraSection.pasos .img-calc-movil {
  display: none;
}


.calculadoraSection.pasos .calculadora, 
.calculadoraSection.pasos .calculadora .container {
  max-width: 100%;
  padding: 1px;
}

.calculadoraSection.pasos .calculadoraContainer {
  justify-content: flex-start;
  margin: unset;
  max-width: 100%;
}

.calculadoraSection.pasos .checkSelectCalc {
  margin: 10px 0 0;
}

.calculadoraSection.pasos .fase2.gas .checkSelectCalc {
  justify-content: center;
  gap: 15px;
}

.calculadoraSection.pasos .fase2 .checkSelectCalc {
  flex-wrap: wrap;
}

.calculadoraSection.pasos .calculadoraContainer .formArea {
  width: 100%;
  min-height: 0;
}

.calculadoraSection.pasos .calculadoraContainer .formArea .inputForm input {
  width: 269px;
}

.calculadoraSection.pasos .calculadoraContainer .formArea .formButtons {
  justify-content: center;
  position: relative;
  min-height: 5rem;
}

.calculadoraSection.pasos .calculadoraContainer .formArea .formButtons.display-calculadora  {
  display: none;
}

.calculadoraSection.pasos .calculadoraContainer .formArea .formButtons .calcButton  {
  margin: 1rem 0px 20px 0px !important;
  right: 0;
  margin: auto;
  margin-top: 1rem;
  font-weight: 700;
}

.calculadoraSection.pasos .calculadoraContainer .formArea .formButtons .calcButton:hover {
  background-color: #fff;
  border: 2px solid #C22F5B;
  color: #C22F5B;
}

.calculadoraSection.pasos .calculadoraContainer .formArea .inputForm {
  justify-content: center;
  gap: 20px;
}

.calculadoraSection.pasos .calculadoraContainer .formArea .terminos {
  display: flex;
  justify-content: center;
  margin: 10px auto 0 auto;
  color: var(--dark-blue);
  gap: 3px;
}

.calculadoraSection.pasos .calculadoraContainer .formArea .formButtons .calcButtonAtras.open {
  margin: 20px 0px;
  height: 45px;
}

.calculadoraSection.pasos .opcion-mantenimiento {
  padding: 10px 5px;
}

.calculadoraSection.pasos .slidecontainer #myRange {
  width: 100%;
}

.calculadoraSection.pasos .text-datos {
  text-align: center;
  color: var(--dark-blue);
  font-size: 20px;
}

.calculadoraSection.pasos .fase5 lottie-player{
  position: absolute;
  bottom: 18%;
  margin: auto;
  width: 250px;
  height: 250px;
  left: 30%;
}

/* ------------- FIN CALCULADORA ------------- */

/* ------------- FOOTER ------------- */

footer .footerContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
}

footer .footerContainer .enlaces {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

footer .footerContainer .enlaces a {
  font-size: 10px;
  font-weight: 400;
  text-decoration: underline !important;
  margin: 0;
}

footer .footerContainer .enlaces a:hover {
  color: white;
}

/* ------------- FIN FOOTER ------------- */