html {
    scroll-behavior: smooth;
}
body {
    font-family: "Roboto-Regular", sans-serif;
    color: #16161A;
    font-size: 16px;
    margin: 0;
    padding: 0;
}
.bg-negro-oscuro{background-color: #1e1e1e;color: #F2F2F2;}

.bg-negro-oscuro h3{font-size: 1rem; font-weight: 500;font-family: "Roboto-Bold", sans-serif;font-style: normal;}
.bg-negro-oscuro a, .bg-negro-oscuro p {color: #F2F2F2;text-decoration: none;font-weight: 300;font-style: normal;font-family: "Roboto-Regular", sans-serif;}
.bg-negro-oscuro a:hover{color: #F2F2F2;text-decoration: underline; text-underline-offset: 0.23em;}
.bg-negro-oscuro span{text-decoration: underline;text-underline-offset: 0.23em;font-family: "Roboto-Regular", sans-serif;}
.footer-cna {max-height: 80px; width: auto;}

.logo-header-lf {height: 35px;width: auto; max-width: initial;}

.banner-img {
    background-image: url("https://repo.inacapmovil.cl/portal-de-pagos/assets/img/banner.png");
    background-size: cover;
    background-position: 45% 55%;
    background-repeat: no-repeat;
}
@media (min-width: 992px){
    .banner-img{
      background-position: center 15%;
    }
}
.title-container-blanco {border-left: 5px solid #FFF;color: #FFF;}

.title-container-blanco h2{font-weight: 600;font-size: 2rem; font-family: "Roboto-Bold", sans-serif;line-height: 1em;}

.title-container-blanco p{font-weight: 400;font-size: 20px;font-family: "Roboto-Regular", sans-serif;}

.btn-paso-apaso{
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
    color: #16161A;
    font-weight: 500;
    padding: 11px 21px;
    font-size: 14px;
    transition: all 0.3s ease;
    font-family: "Roboto-Regular", sans-serif;
}
@media (min-width: 992px){
    .btn-paso-apaso{
      font-size: 16px;
    }
}
.btn-paso-apaso:hover{text-decoration: none;color: #16161A;background: rgba(255, 255, 255, 0.95);}

.waves-button-enviar{
    border-radius: 40px;
    color: #f2f2f2;
    text-decoration: none;
    font-weight: 600;
    background-color: #000;
    align-items: center;
    justify-content: center;
    padding: 0.4375rem 0.9375rem;
    width: 100%;
    border: 0;
        font-family: "Roboto-Bold", sans-serif;
}
.waves-button-enviar:after {
    font-family: 'Material Icons';
    content: "\e5cc";
    color: #f2f2f2;
    padding-left: 0px;
    font-size: 1rem;
    vertical-align: middle;
}
.waves-button-enviar:hover{color: #f2f2f2;text-decoration: underline;text-underline-offset: 0.25em;}

.card-pago{
    width: 430px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(242, 242, 243, 0.6) 100%);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(30px);
    padding: 18px 26px;
        font-family: "Roboto-Regular", sans-serif;
}
@media (min-width: 992px){
    .card-pago{
      padding: 25px 32px;
      width: 450px;
    }
}
.title-container-rojo {border-left: 5px solid #C00;}

.title-container-rojo h2{font-weight: 600;font-size: 2rem; font-family: "Roboto-Bold", sans-serif;line-height: 1em;}

.font-14 {font-size: 14px;}

.p-label{font-weight: 500;}

.campo-pago{
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.90);
    box-sizing: border-box;
    border: 2px solid transparent;
    width: 100%;
    font-size: 14px;
}
/* Estados de validación RUT (tx_rut) */
.campo-pago:focus{outline: none;border-color: #3b71ca;box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);}

.campo-pago.rut--invalid{border-color: #cc0000;box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);}

.campo-pago.rut--valid{border-color: #4CAF50;box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.15);}

.danger-text{color: #cc0000;font-size: 0.875rem;font-weight: 500;}

.img-capcha {
    height:40px;
    width:90px;
    height: 50px;
    width: 100px;
    display: flex; 
    align-content: center; 
    align-items: center;
    border-radius: 15px;
}
.btn-genera-capcha{
    height:40px;
    width:20px; 
    width: 58px; 
    height: 50px; 
    display:flex;
    align-items: center;
    margin-left: 10px;
    border: 2px solid #fff;
    border-radius: 23px;
    padding: 5px 17px;
    background-color: #fff;
}
.p-codigo-autorizacion{
    color: #575866;
    text-align: center;
    font-weight: 400;
    max-width: 324px;
    margin-left: auto;
    margin-right: auto;
    line-height: normal;
    font-size: 14px;
    font-family: "Roboto-Regular", sans-serif;
}
.p-codigo-autorizacion a{text-decoration: underline; text-underline-offset: 0.23em;font-weight: 600;color: #575866;font-family: "Roboto-Bold", sans-serif;}

.p-codigo-autorizacion a:hover{text-decoration: underline;text-underline-offset: 0.23em;color: #575866;cursor: pointer;}

.caja-metodos-pago{
    border-top: 1px solid #828599;
    border-top: 1px solid #828599;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.caja-metodos-pago img {max-width: 280px;margin-left: auto;margin-right: auto;}

.icon-small{font-size: 1.3em;}