@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.landing-desuscripcion {
    font-family: "Poppins", sans-serif;
    display: flex;
    min-height: 100vh;
    flex-direction: column
}
.salto-mobile {
  display: inline;
}

@media (max-width: 769px) {
  .salto-mobile {
    display: block;
  }
}

.landing-desuscripcion main {
    flex-grow: 1;
    background-color: #f6f7fc;
    width: 100%;
    padding: 32px 16px
}
.invalid-feedback {
    font-size: 12px !important;
    color: #D32F2F !important;
    letter-spacing: 0.12px !important;
    line-height: 18px;
    font-family: "Inter", sans-serif !important;
}

@media screen and (min-width: 769px) {
    .landing-desuscripcion main {
        padding: 64px 0
    }
}

.landing-desuscripcion main.typ {
    padding: 24px 16px 98.5px
}

@media screen and (min-width: 769px) {
    .landing-desuscripcion main.typ {
        padding: 128px 0 64px
    }
}

.landing-desuscripcion p {
    color: #333;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: .5px;
    margin: 0
}

.landing-desuscripcion p.mb-16 {
    margin-bottom: 16px
}

.landing-desuscripcion__container {
    display: flex;
    flex-direction: column;
    gap: 24px
}

@media screen and (min-width: 769px) {
    .landing-desuscripcion__container {
        background-color: #fff;
        max-width: 610px;
        border-radius: 12px;
        border: 1px solid #e2e8ee;
        box-shadow: 0 4px 4px 0 #e2e8ee;
        padding: 32px;
        margin: 0 auto
    }
}

.landing-desuscripcion__title {
    color: #333;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: .25px
}

@media screen and (min-width: 769px) {
    .landing-desuscripcion__title {
        font-size: 36px;
        line-height: 43px
    }
}

.landing-desuscripcion__form_header {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.landing-desuscripcion__form_title {
    color: #333;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: .15px;
    margin-bottom: 16px
}

@media screen and (min-width: 769px) {
    .landing-desuscripcion__form_title {
        font-size: 24px;
        line-height: 29px
    }
}

.landing-desuscripcion__form_items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.landing-desuscripcion__form_buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-direction: column
}

@media screen and (min-width: 769px) {
    .landing-desuscripcion__form_buttons {
        flex-direction: row-reverse
    }
}

.landing-desuscripcion__form_buttons button,
.landing-desuscripcion__form_buttons a {
    appearance: none;
    background-color: rgba(0, 0, 0, 0);
    padding: 12px 32px;
    border-radius: 80px;
    width: 100%;
    border: 1px solid #0067b1;
    color: #0067b1;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: .25px;
    transition: all ease .3s
}

.landing-desuscripcion__form_buttons button[type=submit],
.landing-desuscripcion__form_buttons a[type=submit] {
    background-color: #0067b1;
    color: #fff;
}
.boton_enviar:disabled{
background-color: #CCCCCC !important;
color: rgba(51, 51, 51, 0.8) !important;
border:  #CCCCCC !important;

}

.landing-desuscripcion__form_buttons a:hover {
    box-shadow: 0 4px 4px 0 #e2e8ee;
    background-color: #707070;
    border: #707070;
    color: #fff !important;
}
.landing-desuscripcion__form_buttons button:not(:disabled):hover {
    box-shadow: 0 4px 4px 0 #e2e8ee;
    background-color: #707070;
    border: #707070;
    color: #fff !important;
}


.landing-desuscripcion__button_transparent {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    padding: 10px 32px;
    margin: 0 auto;
    display: flex;
    color: #0067b1;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: .25px;
    margin-top: 20px
}

.landing-desuscripcion__button_transparent:hover {
    text-decoration: underline
}

@media screen and (min-width: 769px) {
    .landing-desuscripcion__button_transparent {
        margin-top: 24px
    }
}

.landing-desuscripcion .canales .form-check {
    width: 100%
}

.landing-desuscripcion .form-check {
    display: flex;
    width: calc(50% - 8px)
}

@media screen and (max-width: 768px) {
    .landing-desuscripcion .form-check {
        width: 100%
    }
}

.landing-desuscripcion .form-check-input {
    min-width: 24px;
    border: 1px solid #0067b1;
    border-radius: 6px
}

.landing-desuscripcion .form-check-input:checked~label {
    font-weight: 400
}

.landing-desuscripcion .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--surface-button-transactional-hover-focus, #e5f6fd)
}

.landing-desuscripcion .form-check-label {
    margin: 4px 0 0 0
}

.landing-desuscripcion .form-check-input:hover,
.landing-desuscripcion .form-check-label:hover {
    cursor: pointer
}

.landing-desuscripcion .customFooter {
    height: auto;
    background-color: #fff
}

.landing-desuscripcion .customFooter .container-colsubsidio {
    max-width: 1030px;
    margin: 0 auto
}

.landing-desuscripcion .customFooterWrapper {
    padding: 13.5px 0;
    justify-content: space-between
}

.landing-desuscripcion .customFooterWrapper_copy {
    color: #333;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: .4px;
    text-align: center
}

.landing-desuscripcion .customFooterWrapper a {
    margin: 0
}

.landing-desuscripcion__typ_container {
    max-width: 768px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column
}

.landing-desuscripcion__typ_ico {
    margin-bottom: 24px
}

.landing-desuscripcion__typ_title {
    color: #333;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: .25px;
    margin-bottom: 16px
}

@media screen and (min-width: 769px) {
    .landing-desuscripcion__typ_title {
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 42px;
        letter-spacing: -0.5px
    }
}

.landing-desuscripcion__typ_text {
    text-align: center
}

.landing-desuscripcion__typ_message {
    margin-top: 24px;
    display: flex;
    align-items: center;
    max-width: 586px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #8cceec;
    background: #e2f3fb;
    gap: 12px
}

.landing-desuscripcion__typ_message svg {
    min-width: 24px;
    min-height: 24px
}

.landing-desuscripcion__typ_message p {
    color: #333;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: .12px
}

.landing-desuscripcion__typ_button {
    padding: 10px 32px;
    border-radius: 80px;
    background: #0067b1;
    color: #fff !important;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: .25px;
    margin-top: 24px;
    min-height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.landing-desuscripcion__typ_button:hover {
    background-color: #707070;
    border: #707070;
    color: #fff !important;
}

@media screen and (min-width: 769px) {
    .landing-desuscripcion__typ_button {
        width: fit-content;
        min-width: 211px
    }
}

.landing-desuscripcion .form-group label {
    color: #333;
    font-family: "Poppins";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: .25px
}

.landing-desuscripcion .form-group input,
.landing-desuscripcion .form-group select {
    display: flex;
    height: 44px;
    padding: 10px 12px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 12px;
    border: 1px solid #707070;
    background: #fff;
    overflow: hidden;
    color: #333 !important;
    font-feature-settings: "liga" off, "clig" off;
    text-overflow: ellipsis;
    font-family: "Poppins" !important;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: .5px
}

.landing-desuscripcion .form-group input:focus,
.landing-desuscripcion .form-group select:focus {
    color: #707070
}

.landing-desuscripcion .form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.46967 7.46967C3.76256 7.17678 4.23744 7.17678 4.53033 7.46967L12 14.9393L19.4697 7.46967C19.7626 7.17678 20.2374 7.17678 20.5303 7.46967C20.8232 7.76256 20.8232 8.23744 20.5303 8.53033L12.5303 16.5303C12.2374 16.8232 11.7626 16.8232 11.4697 16.5303L3.46967 8.53033C3.17678 8.23744 3.17678 7.76256 3.46967 7.46967Z' fill='%23333333'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px
}

.input-error {
    border: 1px solid #D32F2F !important;
}