@import "../media_multiple.css";

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

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

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

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

@media (max-width: 1399px) {
  .contratacionSection .title {
    font-size: 34px;
  }
  .contratacionSection .progreso,
  .contratacionSection .mainContainer #calculadoraContratacion {
    min-width: 100%;
    max-width: 100%;
  } 
  .contratacionSection .mainContainer {
    flex-direction: column;
  }
  .contratacionSection .progreso{
    order: 1;
  }
  .contratacionSection .mainContainer #calculadoraContratacion {
    order: 2;
  }
  .contratacionSection .mainContainer .tarifaSection {
    height: 160px;
    min-height: unset;
    overflow: hidden;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 7px 15px 0 rgba(136, 136, 136, 0.20); 
    padding: 20px;
    position: relative;
    transition: .3s ease-in-out;
  }
  .contratacionSection .mainContainer .tarifaSection .cardTarifa {
    border-radius: unset;
    background: unset;
    box-shadow: unset; 
    padding: 0;
  }
  .contratacionSection .mainContainer .priceContainer .total,
  .contratacionSection .mainContainer .tarifaSection .cardTarifa .manchetasContainer {
    display: none;
  }
  .contratacionSection .mainContainer .btn_ver_mas {
    display: flex;
    justify-content: end;
    gap: 4px;
    cursor: pointer;
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
  .contratacionSection .mainContainer .title-ver-mas {
    font-size: 16px;
    font-weight: 400;
    text-decoration: underline;
    color: var(--dark-text-color);
  }
  .contratacionSection .mainContainer .btn_ver_mas .img-abrir {
    filter: brightness(0) saturate(100%) invert(0%) sepia(4%) saturate(0%) hue-rotate(309deg) brightness(93%) contrast(107%);
    transform: rotate(180deg);
    width: 26px;
    height: 26px;
  }
  .contratacionSection .mainContainer .btn_ver_mas .img-abrir.close {
    transform: unset;
    opacity: 1;
  }
  .contratacionSection .mainContainer .priceContainer .price {
    align-items: flex-end;
  }
  .contratacionSection .mainContainer .priceContainer .priceCnt {
    display: flex;
    gap: 3px;
  }
  .contratacionSection .mainContainer .priceContainer .priceCnt .cnt,
  .contratacionSection .mainContainer .priceContainer .priceCnt .mes {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
  }
  .contratacionSection .mainContainer .cardPaso.success .tarifaTitle {
    margin-bottom: 16px;
  }
}

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

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

@media (max-height: 800px) {}

@media (max-width: 991px) {
  .contratacionSection .mainContainer .tarifaSection .cardTarifa {
    min-height: 115px;
    justify-content: center;
  }
  .contratacionSection .mainContainer .priceContainer .price .num {
    font-size: 50px;
  }
  .contratacionSection .mainContainer .priceContainer .priceCnt .cnt, 
  .contratacionSection .mainContainer .priceContainer .priceCnt .mes {
    font-size: 30px;
  }
}

@media(max-width: 767px) {
  .contratacionSection .title {
    font-size: 22px;
  }
  .contratacionSection .progreso .progress {
    left: 22px;
  }
  .contratacionSection .progreso .progress {
    width: 95%;
  }
  .contratacionSection .progreso .paso .namePaso {
    display: none;
  }
  .contratacionSection .mainContainer .tarifaSection {
    padding: 22px;
  }
  .contratacionSection .mainContainer .tarifaSection .cardTarifa .cardTitle {
    font-size: 20px;
  }
  .contratacionSection .mainContainer .cardPaso .mainInputs .inputArea label select, 
  .contratacionSection .mainContainer .cardPaso .mainInputs .inputArea input {
    margin-bottom: 0;
  }
  .contratacionSection .mainContainer .cardPaso .mainInputs .inputsContainer {
    flex-direction: column;
    margin-bottom: 6px;
  }
  .contratacionSection .mainContainer .cardPaso .mainInputs .inputsContainer.tres .inputArea,
  .contratacionSection .mainContainer .cardPaso .mainInputs .inputsContainer.dos .inputArea {
    width: 100%;
  }
  .contratacionSection .mainContainer .cardPaso.paso3 .mainInputs .inputArea .checkbox .numeroAdicional {
    max-width: 160px;
  }
  .contratacionSection .mainContainer .cardPaso .terminos {
    margin-top: 16px;
  }
  .contratacionSection .mainContainer .cardPaso .tarifaFinal {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 22px;
  }
  .contratacionSection .mainContainer .cardPaso.success .tarifaTitle {
    margin-bottom: 22px;
  }
}

@media (max-height: 815px) and (min-height: 670px) and (max-width: 415px) {}

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

@media (max-width: 450px) {
  .contratacionSection .progreso .progress {
    width: 93%;
  }
  .contratacionSection .mainContainer .priceContainer .priceCnt .cnt, 
  .contratacionSection .mainContainer .priceContainer .priceCnt .mes {
    font-size: 25px;
  }
  .contratacionSection .mainContainer .cardPaso.paso3 .mainInputs .inputArea .checkbox {
    flex-direction: column;
    align-items: flex-start;
  }
  .contratacionSection .mainContainer .cardPaso.paso3 .mainInputs .inputArea .checkbox.mantenerNumero .input-check:checked ~ .checkmark {
    top: 3px;
  }
  .contratacionSection .mainContainer .cardPaso.paso3 .mainInputs .inputArea .checkbox .numeroAdicional {
    max-width: unset;
  }
  .contratacionSection .mainContainer .btn-contratación-atras {
    min-width: unset;
  }
}

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

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

@media(max-width: 360px) and (max-height: 650px)  {}

@media(max-width: 340px) {    
  .contratacionSection .mainContainer .btn_ver_mas {
    bottom: 5px;
    right: 7px;
  }
}

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