/**MODULO DIGITAL**/

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: local('Roboto Thin'), local('Roboto-Thin'), url('/credito/assets/fonts/Roboto/Roboto-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'), local('Roboto-Light'), url('/credito/assets/fonts/Roboto/Roboto-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Regular'), local('Roboto-Regular'), url('/credito/assets/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'), local('Roboto-Italic'), url('/credito/assets/fonts/Roboto/Roboto-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), local('Roboto-Medium'), url('/credito/assets/fonts/Roboto/Roboto-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'), url('/credito/assets/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    src: local('Roboto Bold Italic'), local('Roboto-Bold-Italic'), url('/credito/assets/fonts/Roboto/Roboto-Bold-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Regular'), local('Roboto-Regular'), url('/credito/assets/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}


@font-face {
    font-family: "Roboto-Bold";
    src: url("/credito/assets/fonts/Roboto/Roboto-Bold.ttf") format("truetype");
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('/credito/assets/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-light';
    src: url('/credito/assets/fonts/Roboto/Roboto-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url('/credito/assets/fonts/Roboto/Roboto-Medium.ttf') format('truetype');
}

:root{
    --ta-blue: #0047BB;
    --ta-orange: #FF7F32;
    --ta-black: #0F1824;
    --gray-100: #818FA0;
    --gray-80: #C7C7C7;
    --gray-60: #E1E1E1;
    --gray-40: #EDEDED;
    --gray-20: #F8F8F8;
    --green-100: #037D5B;
    --green-80: #038B65;
    --green-60: #039B70;
    --green-40: #04AC7C;
    --green-20: #04BF8A;
    --livid-100: #243B59;
    --livid-80: #3F5B80;
    --livid-60: #6883A6;
    --livid-40: #B0C3DD;
    --livid-20: #D5E0EF;
    --livid-10: #E5EDF8; 
    --livid-5: #F2F6FB;
    --navy-100: #041E42;
    --navy-80: #002F7B;
    --sky-100: #0056E2;
    --sky-80: #0099FF;
    --sky-60: #5DB4FF;
    --sky-40: #ABD8FF;
    --sky-20: #E9F6FF;
    --orange-10:#FEEADF;
    --orange-20: #FBD1B9;
    --white: #ffffff;
    --pm-yellow: #FFC600;
    --light-orange: #FF690F;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;    
}
body.op-0{
    transition-property: all;
    transition-duration: 1200ms;
    opacity: 0;
}
h5.text-orange{
    font-size: 1.5rem;
    margin-bottom: 3rem;
}

header.website{
    padding-top: 1.5rem;
    background-color: var(--livid-10);
}
header.website.tmkt{
    background-color: var(--ta-blue);
    padding-bottom: 2rem;
}
footer{
    background-color: var(--ta-black);
    padding: 5rem;
}
footer p{
    color: var(--gray-20);
}
#side-header{
    background-color: var(--livid-10);
    padding-top: 4rem;
    padding-bottom: 2rem;
}

.card{
    padding: 2rem;
    border: none;
    border-radius: 1rem;
    position: relative;
    min-height: 500px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) ;
}
.card a{
    color: var(--ta-black);
    font-weight: 700;
    text-decoration: underline;
}
.capsule-orange{
    padding: .5rem 1rem;
    background-color: var(--orange-10);
    color: var(--ta-orange);
    max-width: max-content;
    position: relative;
    top: -6px;
}
button.btn-primary{
    background-color: var(--ta-orange);
    border-color: var(--ta-orange);
    border-radius: 2rem;
    padding: .8rem;
}

button.btn-outline-secondary{
    color: var(--ta-orange);
    border-color: var(--ta-orange);
    border-radius: 2rem;
    padding: 0.75rem 0 0.75rem 0;
}

h2{
    font-size: 3.5rem;
    position: relative;
    top: 5rem;
    color: var(--ta-blue);
    font-weight: 700;
}

.text-orange{
    color: var(--ta-orange);
}

.entities img{
    width: auto;
    height: 30px;
    display: inline-block;
}

.background-gray{
    background-color: var(--livid-5);
}

a{
    text-decoration: none;
}
.items-right{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.items-between{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.help-buttons a:last-child{
    margin-left: 2rem;
}
.entities-logos img{
    margin-left: 2rem;
}
.landus-logos img{
    margin-right: 2rem;
}
#formulary-benefits{
    background: linear-gradient(
    to right,
    var(--ta-orange) 0%,
    var(--ta-orange) 30%,
    var(--ta-blue) 30%,
    var(--ta-blue) 100%
  );    
}
.background-orange{
    background-color: var(--ta-orange);
    color:var(--white);
    padding-top: 4rem;
    padding-bottom: 2rem;
}
.background-orange h3{
    padding-left: 3rem;
    font-weight: 700;
}
.beneficts{
    padding-top: 2rem;
    padding-bottom: 1rem;
}
.beneficts strong.text-orange{
    font-size: 2rem;
    line-height: normal;
}
.beneficts p{
    color: var(--white);
    margin-top: 1rem;
}
.beneficts > div{
    margin-left: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 30%;
}
.beneficts .text-container{
    max-width: 202px;
    margin-left: 1rem;
}
.beneficts img{
    padding-top: 0rem;
}
#formulary-steps{
    padding-top: 7rem;
    padding-bottom: 7rem;
}

h3, h5{
    font-weight: 700;
}
.text-blue{
    color: var(--ta-blue);
}
.text-xl{
    font-size: 4rem;
}
.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}
.top-numbers{
    font-weight: 700;
    font-size: 3rem;
    color: var(--white);
    background-color: var(--livid-20);
    max-width: 4rem;
    text-align: center;
    border-radius: 1rem;
    margin-bottom: 4rem;
}
.top-numbers.odd{
    display: block;
    position: relative;
    right: 0;
    margin-left: 84%;
}
#formulary-steps .col-4{
    position: relative;
}
.title-step{
    font-size: 3rem;
    line-height: 3rem;
    width: 72px;
    max-width: 200px;
}
.text-gray{
    color: #818FA0;
}
.step-instruction{
    font-size: 1.5rem;
    position: relative;
    top: 1rem;
}
.mb-rem-5{
    margin-bottom: 5rem;
}
#banner.last-chance{
    background-color: var(--ta-orange);
    background-image: url(/credito/assets/img/landingCredito/background/last-chance.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 6rem 4rem;
}
#banner.last-chance h3{
    font-size: 3rem;
    color: var(--white);
    text-align: center;
    margin-bottom: 2rem;
}
#banner.last-chance p{
    color: var(--white);
    font-weight: 400;
    text-align: center;
    font-size: 2rem;
    margin-bottom: 3rem;
}
#banners.telemarketing{
    margin-top: 9rem;
}
.link-blue{
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 300px;
    background-color: var(--ta-blue);
    border-radius: 2rem;
    text-align: center;
    padding: 0.75rem 0 0.75rem 0;
    color: var(--white);
}
.step-image img{
    position: relative;
    display: block;
    margin: 0 auto;
    margin-bottom: 5rem;
}
#creditcard-uses{
    padding-top: 9rem;
    padding-bottom: 9rem;
}
#creditcard-uses img{
    width: 80px;
    margin-bottom: 2rem;
}
#creditcard-uses p{
    font-size: 2rem;
}
#banners{
    padding-bottom: 9rem;
}
.banner{
    min-height: 380px;
    width: 100%;
    padding: 3rem;
    position: relative;
    margin-bottom: 2rem;
    background-color: var(--livid-10);
    border-radius: 1.5rem;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.banner h4{
    font-size: 1.8rem;
    font-weight: 500;
}
.banner-1{
    background-image: url(/credito/assets/img/landingCredito/background/usos-background-1.png);
}
.banner-2{
    background-image: url(/credito/assets/img/landingCredito/background/usos-background-2.png);
    background-color: var(--ta-orange);
}
.banner-3{
    background-image: url(/credito/assets/img/landingCredito/background/usos-background-3.png);
    height: 790px;
}
.banner-4{
    background-image: url(/credito/assets/img/landingCredito/background/usos-background-4.png);
}
.banner-5{
    background-image: url(/credito/assets/img/landingCredito/background/usos-background-5.png);
}
.banner-6{
    background-image: url(/credito/assets/img/landingCredito/background/usos-background-6.png);
}
.banner-7{
    background-image: url(/credito/assets/img/landingCredito/background/usos-background-7.png);
    background-color: var(--ta-blue);
}

.banner-1 h4{
    margin-top: 9rem;
}
.banner-2 h4{
    max-width: 300px;
    color:var(--white);
}
.banner-4 h4{
    max-width: 200px;
}
.banner-6 h4{
    text-align: left;
    max-width: 300px;
    position: absolute;
    left: 3rem;
}
.banner-7 h4{
    color: var(--white);
}
.appear {
    transition: all 0.8s;
    opacity: 0;
    transform: translateY(40px);
}
.appear.inview {
    opacity: 1;
    transform: none;
    transition-delay: 0.3s;
}
.only-mobile{
    display: none;
}
#newModal .modal-dialog .modal-content{
    background-color: transparent;
}

small.super{
    vertical-align: super;
    font-size: 1rem;
}
.mt-rem-4{
    margin-top: 4rem;
}
.mt-rem-2{
    margin-top: 2rem;
}
.carousel-indicators{
    bottom: -4rem;
}

.carousel-indicators [data-bs-target]{
    background-color: var(--ta-blue);
}
.carousel-control-next, .carousel-control-prev{
    color: var(--ta-blue);
    align-items: flex-end;
    bottom: -3rem;
}
.carousel-control-next{
    right: 2rem;
}
.carousel-control-prev{
    left: 1rem;
}
.carousel-control-prev-icon{
    background-image: url(/credito/assets/img/landingCredito/prev-icon.png);
}
.carousel-control-next-icon{
    background-image: url(/credito/assets/img/landingCredito/next-icon.png);
}
.carousel-control-next-icon, .carousel-control-prev-icon{
    width: 2.5rem;
    height: 2.5rem;
}

.btn:hover {
    color: var(--white);
    background-color: var(--ta-orange);
    border-color: var(--ta-orange);
}
.hidden{
    display: none;
}
#success .container{
    max-width: 700px;
    padding-top: 8rem;
    padding-bottom: 8rem;

}
.msg-success{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.msg-success p{
    font-size: 1.5rem;
    text-align: center;
}
.msg-success h3{
    font-size: 3rem;
}
.msg-success .tick-icon{
    margin-bottom: 2rem;
}
.msg-success button{
    padding: .5rem 5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.tmk-asesor{
    margin-right: 2rem;
}
.vl{
    display: block;
    width: 1px;
    background-color: var(--ta-black);
    height: 5rem;
}
#prevBtn{
    position: absolute;
    top: 2rem;
    cursor: pointer;
}
#prevBtn img{
    width: 2rem;
}
#title-mv{
    margin-top: 0 !important;
}
.modal-content{
    border: none;
}
#mensajeModal .modal-footer, #errorModal .modal-footer{
    border-top: none;
}
#mensajeModal .modal-content, #errorModal .modal-content{
    border-radius: 2rem;
}
#mensajeModal p.text-center, #errorModal p.text-center{
    font-size: 1.5rem;
}
.image-error{
    display: block;
    margin: 2rem auto;
}
.form-mobile .form-check a {
    color: var(--ta-black);
    font-weight: 700;
    text-decoration: underline;
}
p.display-6{
    font-size: .6rem;
}
@media screen and (max-width: 1200px){
    h2 {
        font-size: 2.5rem;
    }
}
@media screen and (max-width: 990px){
    h2 {
        font-size: 1.8rem;
    }
}
@media screen and (max-width: 725px){
    h2{
        font-size: 2rem;
    }
    .only-desktop{
        display: none;
    }
    .tjaImg{
	display:none;
	}
    .beneficts > div {
        width: 100%;
    }
    .text-xl{
        font-size: 2rem;
    }
    h5.text-orange{
        font-size: 1.2rem;
        text-align: center;
    }
    #banner.last-chance{
        padding: 5rem 1rem;
    }
    #banner.last-chance h3{
        font-size: 2rem;
    }
    #banner.last-chance p{
        font-size: 1.5rem;
    }
    footer {
        padding: 2rem 1rem;
    }
    #formulary-steps .text-right{
        text-align: center;
        margin-bottom: 2rem;
    }
    .title-step{
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    .top-numbers.odd, .top-numbers {
        display: block;
        position: relative;
        right: 0;
        margin: 0 auto;
        margin-bottom: 2rem;
    }
    .text-gray.step-instruction{
        margin-bottom: 2rem;
        text-align: center;
    }
    #creditcard-uses p{
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    #creditcard-uses .mb-rem-5{
        margin-bottom: 2rem;
    }
    .only-mobile{
        display: block;
    }
    .socialmedia{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 2rem;
    }
    .items-right.entities-logos{
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        align-content: center;
    }
    .items-right.entities-logos img{
        width: auto;
        height: 40px;
        display: inline-block;
        margin-bottom: 2rem;
        margin-left: 0;

    }
    h2{
        top: 0;
        font-size: 2rem;
    }
    .beneficts{
        margin-top: 2rem;
    }
    .beneficts .text-container{
        max-width: 240px;
        margin-bottom: 2rem;
    }
    .background-orange h3.title-now{
        text-align: center;
        padding-left: 0;
    }
    .section-header .img-fluid{
        max-width: 70%;
        margin-left: 15%;
    }
    #formulary-benefits{
        background: linear-gradient(
        to right,
        var(--ta-blue) 0%,
        var(--ta-blue) 30%,
        var(--ta-blue) 30%,
        var(--ta-blue) 100%
      );    
    }
    .banner-2{
        background-image: url(/credito/assets/img/landingCredito/background/usos-background-2-m.png);
    }
    .banner-2 h4{
        position: relative;
        left: -1rem;
    }
    .banner-6 {
        background-image: url(/credito/assets/img/landingCredito/background/usos-background-6.png);
        background-size: 120%;
        background-position: bottom right;
    }
    .msg-success h3{
        font-size: 2rem;
        text-align: center;
        margin-bottom: 3rem;
    }
    .msg-success p{
        font-size: 1.2rem;
    }
    #success .container{
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .items-right.help-buttons{
        display: flex;
        justify-content: center;
        margin-top: 2rem;
    }
    .tmk-asesor{
        display: block;
        margin: 0 auto;
        margin-bottom: 2rem;
    }
    .capsule-orange{
        margin: 1rem auto;
    }
    .requisitos{
        text-align: center;
        font-weight: 700;
    }
    #mobile-mssg.background-orange{
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    #mobile-mssg.background-orange h3{
        padding-top: 1rem;
        padding-left: 0;
        font-size: 1.5rem;
        max-width: 13rem;
    }
    #mobile-mssg.background-orange .tmk-asesor{
        margin-bottom: 0;
    }
    header.website.tmkt{
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    header.website.tmkt .logo{
        height: 50px;
        padding-left: 1rem;
    }
    #side-header{
        padding-top: 2.2rem;
        padding-bottom: 4rem;
    }
    p.requirements{
        text-align: center;
        margin-bottom: 2rem;
        font-weight: 700;
    }
    .row.form-mobile{
        box-sizing: content-box;
    }
    .logo{
        max-width: 72px;
    }
    .mobile-buttons{
        margin-top: 3rem;
    }
    .landus-logos{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    div.card{
        all: unset;
    }

}

.txt-center{
        text-align: center;
    }


/*<!-- Main credito css --> */

/*
* Container


.container {
    margin-bottom: 80px;
    max-width: 684px;
  }
  @media (min-width: 768px) {
    .container {
      padding: 0px;
    }
  }
  */
  .form-floating {
    margin-bottom: 26px;
  }
  .form-floating ~ label {
    padding: 14px 12px;
  }
  .form-floating > :disabled ~ label::after {
    background-color: transparent;
  }
  .form-floating .form-control {
    height: 51px;
    min-height: inherit;
    font-size: 16px;
  }
  .form-floating .form-control ~ label {
    color: #818fa0;
    font-size: 16px;
  }
  .form-floating .form-control ~ label > span {
    color: #fc985f;
  }
  .form-floating .form-select {
    height: 51px;
    padding-bottom: 12px;
    min-height: inherit;
    font-size: 16px;
  }
  .form-floating .form-select ~ label {
    font-size: 16px;
    border: 1px solid transparent;
    color: #818fa0;
    height: 100%;
    left: 0;
    opacity: 1;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform-origin: 0 0;
    transform: none;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  }
  .form-floating .form-select ~ label > span {
    color: #fc985f;
  }
  .form-floating .form-control:not(:-moz-placeholder-shown) ~ label {
    background-color: #ffffff;
    border-radius: 10px;
    height: auto;
    left: 10px;
    opacity: 1;
    padding: 0px 5px 0px 5px;
    top: -1px;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
  }
  .form-floating .form-control:focus ~ label,
  .form-floating .form-control:not(:placeholder-shown) ~ label,
  .form-floating .form-select:not([value=""]):focus ~ label,
  .form-floating .form-select:not([value=""]):disabled ~ label,
  .form-floating .form-select:not([value=""]):valid ~ label {
    background-color: #ffffff;
    border-radius: 10px;
    height: auto;
    left: 10px;
    opacity: 1;
    padding: 0px 5px 0px 5px;
    top: -1px;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
  }
  
  .needs-validation .form-control.is-invalid,
  .needs-validation .form-control.is-invalid:focus {
    border-color: #ff4949;
    box-shadow: none;
  }
  .needs-validation .form-control.is-valid,
  .needs-validation .form-control.is-valid:focus {
    border-color: #04bf8a;
    box-shadow: none;
  }
  
  .was-validated .form-control:invalid,
  .was-validated .form-control:invalid:focus,
  .was-validated .form-control.is-invalid,
  .was-validated .form-control.is-invalid:focus,
  .was-validated .form-select:invalid,
  .was-validated .form-select:invalid:focus {
    border-color: #ff4949;
    box-shadow: none;
  }
  .was-validated .form-control:invalid ~ label,
  .was-validated .form-control:invalid:focus ~ label,
  .was-validated .form-control.is-invalid ~ label,
  .was-validated .form-control.is-invalid:focus ~ label,
  .was-validated .form-select:invalid ~ label,
  .was-validated .form-select:invalid:focus ~ label {
    color: #ff4949;
  }
  .was-validated .form-control:invalid ~ label > span,
  .was-validated .form-control:invalid:focus ~ label > span,
  .was-validated .form-control.is-invalid ~ label > span,
  .was-validated .form-control.is-invalid:focus ~ label > span,
  .was-validated .form-select:invalid ~ label > span,
  .was-validated .form-select:invalid:focus ~ label > span {
    color: #ff4949;
  }
  .was-validated .form-control:valid,
  .was-validated .form-control:valid:focus,
  .was-validated .form-select:valid,
  .was-validated .form-select:not([value=""]):valid:focus {
    border-color: #04bf8a;
    box-shadow: none;
  }
  .was-validated .form-control:valid ~ label,
  .was-validated .form-control:valid:focus ~ label,
  .was-validated .form-select:valid ~ label,
  .was-validated .form-select:not([value=""]):valid:focus ~ label {
    color: #04bf8a;
  }
  .was-validated .form-check-input:invalid,
  .was-validated .form-check-input.is-invalid {
    border-color: #ff4949;
  }
  .was-validated .form-check-input:valid ~ .form-check-label,
  .was-validated .form-check-input.is-valid ~ .form-check-label {
    color: #04bf8a;
  }
  .was-validated .form-check-input:valid:checked,
  .was-validated .form-check-input.is-valid:checked {
    background-color: #04bf8a;
  }
  .was-validated .form-check-input:invalid ~ .form-check-label {
    color: #ff4949;
  }
  
  .invalid-feedback {
    font-family: Roboto-light;
    font-size: 12px;
    color: #ff4949;
    text-align: left;
  }
  
  .btnc {
    font-family: Roboto-Medium;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    --bs-btn-border-width: 1px;
    width: 343px;
    height: 44px;
  }
  @media screen and (max-width: 576px) {
    .btnc {
      width: 100%;
    }
  }
  
  /* 
  * Se modifica el acho de los botones al 100%
  * cuando en un renglon existen 2 botones
  */
  .col-6 > .btnc {
    width: 100%;
  }
  
  .btn-warning {
    --bs-btn-color: white;
    --bs-btn-bg: #ff7f32;
    --bs-btn-border-color: #ff7f32;
    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: #da6f33;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 255, 146, 81;
    --bs-btn-active-color: white;
    --bs-btn-active-bg: #ff7f32;
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #b4afaf;
    --bs-btn-disabled-bg: #F0F0F0;
    --bs-btn-disabled-border-color: transparent;
  }
  
  .btn-outline-warning {
    --bs-btn-color: #ff7f32;
    --bs-btn-border-color: #ff7f32;
    --bs-btn-hover-color: #da6f33;
    --bs-btn-hover-bg: white;
    --bs-btn-hover-border-color: #ff7f32;
    --bs-btn-focus-shadow-rgb: 255, 127, 50;
    --bs-btn-active-color: #ff7f32;
    --bs-btn-active-bg: white;
    --bs-btn-active-border-color: #ff7f32;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ff7f32;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ff7f32;
    --bs-gradient: none;
  }
  .btn-outline-warning.btn-outline-warning:hover, .btn-outline-warning.btn-outline-warning.hover {
    --bs-btn-hover-color: #da6f33;
    --bs-btn-hover-bg: #fff0E8;
    --bs-btn-hover-border-color: #da6f33;
  }
  .btn-outline-warning.btn-outline-warning:disabled, .btn-outline-warning.btn-outline-warning.disabled {
    --bs-btn-disabled-color: #b4afaf;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #F0F0F0;
  }
  
  .btn-primary.btn-volver {
    --bs-btn-color: #0047ba;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #003995;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 0, 71, 186;
    --bs-btn-active-color: #0047ba;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #b4afaf;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
  } 
  
  .btn-outline-primary {
    --bs-btn-color: #0047ba;
    --bs-btn-border-color: #0047ba;
    --bs-btn-hover-color: #0047ba;
    --bs-btn-hover-bg: white;
    --bs-btn-hover-border-color: #0047ba;
    --bs-btn-focus-shadow-rgb: 0, 71, 186;
    --bs-btn-active-color: #0047ba;
    --bs-btn-active-bg: white;
    --bs-btn-active-border-color: #0047ba;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0047ba;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0047ba;
    --bs-gradient: none;
  }
  .btn-outline-primary.btn-outline-primary:hover, .btn-outline-primary.btn-outline-primary {
    --bs-btn-hover-color: #003995;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: #003995;
  }
  .btn-outline-primary.btn-outline-primary:disabled, .btn-outline-primary.btn-outline-primary.disabled {
    --bs-btn-disabled-color: #b4afaf;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #b4afaf;
  }
  
  .modal {
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
  }
  
  /* *****   Hr   ***** */
  hr {
    margin: 0px;
  }
  
  /* *****   Fin Hr   ***** *//*# sourceMappingURL=styles.css.map */
  


  /*  salt*/
  .modal {
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
  }
  
  /* *****   Hr   ***** */
  hr {
    margin: 0px;
  }

  /* *****   Fin Hr   ***** *//*# sourceMappingURL=styles.css.map */

/*body*/

  .contenido-pagina {
    flex: 1;
    /* Hace que el contenido principal ocupe todo el espacio disponible, empujando el footer hacia abajo */
  }


  /* Carrusel */
  #carouselExampleIndicators {
    overflow: hidden;
  }
  
  /* Fin Carrusel */


  /* Indicadores de pildora azul del carrusel */
  .carousel-indicators.recomend [data-bs-target] {
    background-color: #e5edf8;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    border: none;
  }
  
  .carousel-indicators.recomend .active {
    background-color: #0047bb;
    width: 16px;
    height: 8px;
    border-radius: 30px;
    border: none;
  }
  
  #carouselExampleIndicators-2 ol {
    list-style-type: none; 
    /* Esto oculta los marcadores */
  }
  
  #elemento-1,
  #elemento-2,
  #elemento-3 {
    cursor: not-allowed;
    pointer-events: none;
  }
  
  .carousel-item {
    text-align: center;
    /* Centra el contenido horizontalmente */
  }
  
  /* Fin Indicadores de pildora azul del carrusel */

   /* Recomendaciones del ine */
   .contenedor-izquierda, 
   .contenedor-derecha { 
     flex-grow: 1;
     position: relative;
   }
   
   .contenedor-derecha {
     text-align: right; 
   }
   
   .contenedor-izquierda {
     text-align: left;
   }
   



   .btn-volver,
   .btn-volver:hover,
   .btn-volver:active,
   .btn-volver:first-child:active {
    color: initial;
    background-color: initial; 
    border-color: transparent;
     font-size: 14px;
     height: 44px;
     width: 108px;
     color: #818FA0;
   }
   
   .btn-siguiente {
     height: 44px;
     width: 108px;
     font-size: 14px;
     border-radius:2rem;
   }
   
   
   .boton-derecha {
       /* position: absolute; Posición absoluta dentro de su contenedor */
       transition: opacity 0.1s linear;
       /* Transición suave */
   }


  .carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity 0.1s;
    /* Ajusta este valor para hacer la transición más rápida */
    /* position: absolute; */
    /* Todos los ítems se apilan uno encima del otro */
    /* top: 0;
    left: 0;
    width: 100%; */
    display: block;
  }
  
  .carousel-fade .carousel-item.active {
    opacity: 1;
    position: relative;
    /* El ítem activo se posiciona de manera normal */
    z-index: 1;
    /* Asegura que el ítem activo esté encima de los demás */
  }

  .ajusteSelectorItem {
    margin-top: 0px;
  }

  /*modal recomendaciones ine */

  .modal-header-recomendacion
  
  /*Se globaliza*/
  {
    padding: 0px;
  
  } 


  .modal-body-recomendacion 
  /*Se globaliza*/
  {
      padding: 0px 24px;
    }

    .modal-titulo {
        /*Se globaliza*/ 
        font-family: Roboto-Bold; 
        font-size: 24px;
        color: #0047aa;
        padding: 32px 0px;
      }
      
      .modal-subtitulo {
        /*Se globaliza*/ 
        font-family: Roboto-Regular;
        font-size: 20px;
        color: #041e42;
        margin-top: 32px;
        margin-bottom: 32px;
        padding: 0px 24px;
      }  

      .contenedor-botones {
        display: flex;
        justify-content: space-between;
        margin: 66px 16px 16px 16px;
      }
      
    /* Fin Recomendaciones del ine  */      

    .screenMd {
        display: block;
      }
      
      .screenSm {
        display: none;
      }

    @media (max-width: 600px) {
        
        
        .modal-body-recomendacion {
        /*Se globaliza*/
          padding: 0px 16px;
        }

        .modal-titulo { 
            padding: 24px 0px;
          }

          .modal-parrafo-subtitulo {
            /*Se globaliza*/
              font-family: Roboto-Regular;
              font-size: 20px;
              color: #818fa0;
              margin-top: 16px;
            } 

            .screenMd {
                display: none;
              }
              
              .screenSm {
                display: block;
              } 
              
              .contenedor-botones {
                margin: 48px 24px 24px 24px;
              }
     
    }
    /*Credito*/

    .modal-content {
        overflow: hidden;
    }

    .modal-content{
        border-radius: 1rem;
    }
.btn{
    border-radius: 3rem;
}
    .modal-parrafo-subtitulo {
        font-family: Roboto-Regular;
        color: #041E42;
        text-align: center;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .carousel-indicators.recomend {
        margin-bottom: -33px;
    }
    
    @media (max-width: 600px){
        .modal-parrafo-subtitulo {
            font-family: Roboto-Regular;
            color: #041E42;
            text-align: center;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin-top: 0px;
        }
    
        .contenedor-botones {
            margin: 60px 24px 16px 24px;
            align-items: flex-end;
    
        }
    }
    
/*
############################### INICIO SPINNER LOADING ##################################
 */

 .mainProgress {
    align-items: center;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background-color: rgba(255, 255, 255, 0.8);
    display: none;
    height: 100%;
    justify-content: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10001;
  }
  
  .boxProgress {
    box-sizing: content-box;
    position: absolute;
    top: 20%;
  }
  
  .animacionBuzon {
    bottom: 0%;
    position: absolute;
    display: none;
    width: 100%;
  }
  
  .textoProgress {
    font-family: Roboto-Medium;
    font-size: 32px;
    color: #041e42;
    font-stretch: normal;
    font-style: normal;
    font-weight: 500;
    letter-spacing: normal;
    line-height: normal;
    text-align: left;
    margin: 0 6px 32px 5px;
  }
  
  input[type="file"] {
    display: none;
  }
  
  /*
  ############################### FIN SPINNER LOADING ##################################
   */