.conta-page,
.onboarding-page,
.perfil-page {
    min-height: 100vh;
    padding: 32px 0 90px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(117, 103, 255, .19),
            transparent 29rem
        ),
        #07101f;
}

.conta-layout,
.onboarding-container,
.perfil-container {
    width: min(100% - 24px, 1120px);
    margin: 0 auto;
}

.conta-layout {
    display: grid;
    gap: 30px;
}

.conta-legenda {
    color: #2ed6c5;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .09em;
}

.conta-apresentacao {
    padding: 12px 2px;
}

.conta-apresentacao h1,
.conta-cabecalho h1,
.perfil-header h1 {
    margin: 11px 0;
    font-size: 2.35rem;
    line-height: 1.04;
    letter-spacing: -.055em;
}

.conta-apresentacao > p,
.conta-cabecalho > p,
.perfil-header p {
    margin: 0;
    color: #9eabc0;
    line-height: 1.72;
}

.conta-beneficios {
    margin-top: 24px;
    display: grid;
    gap: 10px;
    color: #c8d1de;
    font-size: .79rem;
}

.conta-card {
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    background: #111f33;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
}

.conta-card header {
    margin-bottom: 22px;
}

.conta-card header h2 {
    margin: 8px 0;
    font-size: 1.45rem;
}

.conta-card header p {
    margin: 0;
    color: #8d9aaf;
    font-size: .8rem;
    line-height: 1.6;
}

.conta-card form,
.perfil-form {
    display: grid;
    gap: 16px;
}

.conta-campo > label {
    display: block;
    margin-bottom: 7px;
    color: #d6deea;
    font-size: .73rem;
    font-weight: 850;
}

.conta-campo-input,
.conta-campo > input,
.conta-campo > select,
.conta-campo > textarea {
    width: 100%;
    min-height: 50px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 12px;
    outline: 0;
    background: #0a1728;
    color: white;
}

.conta-campo-input:focus,
.conta-campo > input:focus,
.conta-campo > select:focus,
.conta-campo > textarea:focus {
    border-color: #8b7fff;
    box-shadow: 0 0 0 3px rgba(117, 103, 255, .14);
}

.conta-campo small,
.conta-erro-geral {
    display: block;
    margin-top: 6px;
    color: #ff929d;
    font-size: .68rem;
    line-height: 1.45;
}

.conta-ajuda {
    margin-top: 6px;
    color: #7d8ba0;
    font-size: .64rem;
    line-height: 1.5;
}

.conta-ajuda ul {
    margin: 6px 0 0;
    padding-left: 17px;
}

.conta-erro-geral {
    padding: 12px;
    border-radius: 11px;
    background: rgba(239, 91, 105, .1);
}

.conta-botao,
.conta-botao-secundario {
    min-height: 51px;
    padding: 0 18px;
    border: 0;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
}

.conta-botao {
    width: 100%;
    background:
        linear-gradient(
            135deg,
            #7567ff,
            #887cff
        );
    color: white;
}

.conta-botao-secundario {
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: white;
}

.conta-recuperar {
    justify-self: end;
    color: #66e6da;
    font-size: .72rem;
    font-weight: 850;
}

.conta-card footer {
    margin-top: 19px;
    padding-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #8391a6;
    font-size: .72rem;
    text-align: center;
}

.conta-card footer a {
    color: #66e6da;
    font-weight: 850;
}

.conta-centralizada {
    display: flex;
    align-items: center;
    justify-content: center;
}

.conta-card-menor {
    width: min(100% - 24px, 500px);
}

.conta-resultado {
    text-align: center;
}

.conta-resultado > span {
    width: 58px;
    height: 58px;
    margin: 0 auto 17px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(49, 199, 132, .13);
    color: #67e2a8;
    font-size: 1.5rem;
    font-weight: 900;
}

.conta-resultado h1 {
    margin: 0 0 10px;
}

.conta-resultado p {
    margin: 0 0 22px;
    color: #9eabc0;
    line-height: 1.65;
}

.conta-cabecalho {
    max-width: 760px;
    margin-bottom: 25px;
}

.onboarding-progresso {
    height: 6px;
    margin-top: 22px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.onboarding-progresso span {
    width: 70%;
    height: 100%;
    display: block;
    background:
        linear-gradient(
            90deg,
            #7567ff,
            #2ed6c5
        );
}

.onboarding-card {
    display: grid;
    gap: 20px;
}

.conta-grid {
    display: grid;
    gap: 16px;
}

.conta-checkbox > ul {
    margin: 0;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 13px;
    display: grid;
    gap: 10px;
    list-style: none;
    background: #0a1728;
}

.conta-checkbox li label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c6d0de;
    font-size: .75rem;
}

.conta-checkbox input {
    accent-color: #7567ff;
}

.conta-pular {
    margin-top: 12px;
    text-align: center;
}

.conta-pular button {
    border: 0;
    background: transparent;
    color: #8290a5;
    font-size: .72rem;
    cursor: pointer;
}

.perfil-header {
    margin-bottom: 25px;
    display: grid;
    gap: 17px;
}

.perfil-form {
    gap: 17px;
}

.perfil-card > header {
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: 43px 1fr;
    gap: 12px;
}

.perfil-card > header > span {
    width: 43px;
    height: 43px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(117, 103, 255, .14);
    color: #aaa3ff;
    font-size: .7rem;
    font-weight: 900;
}

.perfil-card h2 {
    margin: 0 0 5px;
    font-size: 1.1rem;
}

.perfil-card header p {
    margin: 0;
    color: #8795aa;
    font-size: .7rem;
    line-height: 1.5;
}

.perfil-salvar {
    position: sticky;
    z-index: 20;
    bottom: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .32);
}

@media (min-width: 760px) {
    .conta-page,
    .onboarding-page,
    .perfil-page {
        padding: 65px 0 105px;
    }

    .conta-layout,
    .onboarding-container,
    .perfil-container {
        width: min(100% - 40px, 1120px);
    }

    .conta-layout {
        grid-template-columns: 1fr 500px;
        align-items: center;
        gap: 80px;
    }

    .conta-apresentacao h1,
    .conta-cabecalho h1,
    .perfil-header h1 {
        font-size: 3.35rem;
    }

    .conta-card {
        padding: 32px;
        border-radius: 23px;
    }

    .conta-grid {
        grid-template-columns: 1fr 1fr;
        gap: 19px;
    }

    .conta-campo-largo {
        grid-column: 1 / -1;
    }

    .conta-checkbox > ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .perfil-header {
        grid-template-columns: 1fr auto;
        align-items: end;
    }

    .perfil-salvar {
        position: static;
        width: auto;
        min-width: 230px;
        justify-self: end;
    }
}

/* CAPTCHA_CADASTRO_V1 */

.cadastro-captcha {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    margin: 18px 0;
    padding: 15px;
    border: 1px solid rgba(49, 230, 209, .22);
    border-radius: 15px;
    background: rgba(49, 230, 209, .055);
}

.cadastro-captcha-icone {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 11px;
    color: #31e6d1;
    background: rgba(49, 230, 209, .11);
    font-weight: 900;
}

.cadastro-captcha-conteudo {
    flex: 1;
}

.cadastro-captcha label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 800;
    opacity: .72;
}

.cadastro-captcha strong {
    display: block;
    margin-bottom: 9px;
    font-size: 16px;
}

.cadastro-captcha input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 11px;
    color: #fff;
    background: rgba(6, 16, 31, .72);
}

.cadastro-captcha small {
    display: block;
    margin-top: 8px;
    line-height: 1.45;
    opacity: .62;
}

.cadastro-captcha-erro,
.cadastro-captcha-erro ul {
    margin: 8px 0 0;
    padding: 0;
    color: #fca5a5;
    list-style: none;
    font-size: 13px;
}

@media (max-width: 600px) {
    .cadastro-captcha {
        padding: 13px;
    }
}

/* QTI_PERFIL_CHECKBOX_V2_INICIO */

/* ==========================================================
   PERFIL
   DIAS DE ESTUDO + DISCIPLINAS PRIORITÁRIAS
   ========================================================== */

.perfil-form .conta-checkbox {
    grid-column: 1 / -1;
    min-width: 0;
}

/*
 * Título principal do campo.
 * Ex.: Dias preferidos para estudar
 */
.perfil-form .conta-checkbox > label {
    display: block;
    margin: 0 0 10px;
    color: #dce8f7;
    font-size: .82rem;
    line-height: 1.35;
    font-weight: 800;
}

/*
 * Django CheckboxSelectMultiple.
 *
 * Django normalmente gera:
 *
 * <div id="...">
 *     <div>
 *         <label>
 *             <input type="checkbox">
 *             Texto
 *         </label>
 *     </div>
 * </div>
 */
.perfil-form .conta-checkbox > div,
.perfil-form .conta-checkbox > ul {
    width: 100%;
    margin: 0 !important;
    padding: 14px !important;

    display: grid !important;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(205px, 1fr)
        );

    gap: 10px;

    list-style: none;

    border:
        1px solid
        rgba(139, 159, 185, .18);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(8, 22, 39, .96),
            rgba(9, 25, 44, .92)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .025);
}

/*
 * Cada opção individual.
 */
.perfil-form .conta-checkbox > div > div,
.perfil-form .conta-checkbox > ul > li {
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Card clicável.
 */
.perfil-form
.conta-checkbox
> div
> div
> label,

.perfil-form
.conta-checkbox
> ul
> li
> label {
    position: relative;

    width: 100%;
    min-height: 52px;

    margin: 0 !important;
    padding: 11px 13px;

    display: flex !important;
    align-items: center;
    justify-content: flex-start;

    gap: 11px;

    border:
        1px solid
        rgba(151, 169, 194, .16);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .025);

    color: #e9f0fa;

    font-size: .9rem;
    line-height: 1.3;
    font-weight: 650;

    cursor: pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

/*
 * Hover.
 */
@media (hover: hover) {

    .perfil-form
    .conta-checkbox
    > div
    > div
    > label:hover,

    .perfil-form
    .conta-checkbox
    > ul
    > li
    > label:hover {
        transform:
            translateY(-1px);

        border-color:
            rgba(
                109,
                93,
                252,
                .48
            );

        background:
            rgba(
                109,
                93,
                252,
                .075
            );
    }
}

/*
 * CORREÇÃO PRINCIPAL:
 *
 * impede as regras gerais dos inputs de transformarem
 * checkbox em um quadrado gigante ou input de largura total.
 */
.perfil-form
.conta-checkbox
input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;

    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;

    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;

    flex:
        0 0 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0;

    accent-color:
        var(
            --primaria,
            #6d5dfc
        );

    cursor: pointer;

    box-shadow: none !important;
}

/*
 * Opção marcada.
 *
 * :has é progressivo:
 * caso o browser não suporte, o checkbox continua
 * perfeitamente funcional e alinhado.
 */
.perfil-form
.conta-checkbox
> div
> div:has(
    input[type="checkbox"]:checked
)
> label,

.perfil-form
.conta-checkbox
> ul
> li:has(
    input[type="checkbox"]:checked
)
> label {
    border-color:
        rgba(
            109,
            93,
            252,
            .65
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                109,
                93,
                252,
                .17
            ),
            rgba(
                46,
                214,
                197,
                .055
            )
        );

    box-shadow:
        0 8px 22px
        rgba(
            7,
            12,
            30,
            .18
        );
}

/*
 * Pequeno destaque lateral na opção marcada.
 */
.perfil-form
.conta-checkbox
> div
> div:has(
    input[type="checkbox"]:checked
)
> label::after,

.perfil-form
.conta-checkbox
> ul
> li:has(
    input[type="checkbox"]:checked
)
> label::after {
    content: "";

    position: absolute;

    top: 11px;
    right: 11px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(
            --ciano,
            #2ed6c5
        );

    box-shadow:
        0 0 0 4px
        rgba(
            46,
            214,
            197,
            .08
        );
}

/*
 * Foco de teclado/acessibilidade.
 */
.perfil-form
.conta-checkbox
input[type="checkbox"]:focus-visible {
    outline:
        3px solid
        rgba(
            109,
            93,
            252,
            .32
        );

    outline-offset: 3px;
}

/*
 * Evita que label ou texto estourem o card.
 */
.perfil-form
.conta-checkbox
> div
label,

.perfil-form
.conta-checkbox
> ul
label {
    overflow-wrap: anywhere;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (
    max-width: 760px
) {

    .perfil-form
    .conta-checkbox
    > div,

    .perfil-form
    .conta-checkbox
    > ul {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        padding:
            11px !important;

        gap: 9px;
    }

    .perfil-form
    .conta-checkbox
    > div
    > div
    > label,

    .perfil-form
    .conta-checkbox
    > ul
    > li
    > label {
        min-height: 50px;

        padding:
            10px 11px;

        font-size:
            .87rem;
    }
}

/* ==========================================================
   MOBILE FIRST
   ========================================================== */

@media (
    max-width: 520px
) {

    .perfil-form
    .conta-checkbox
    > div,

    .perfil-form
    .conta-checkbox
    > ul {
        grid-template-columns:
            1fr;

        border-radius:
            14px;
    }

    .perfil-form
    .conta-checkbox
    > div
    > div
    > label,

    .perfil-form
    .conta-checkbox
    > ul
    > li
    > label {
        min-height:
            48px;
    }

    .perfil-form
    .conta-checkbox
    input[type="checkbox"] {
        width:
            19px !important;

        min-width:
            19px !important;

        max-width:
            19px !important;

        height:
            19px !important;

        min-height:
            19px !important;

        max-height:
            19px !important;

        flex:
            0 0 19px !important;
    }
}

/* QTI_PERFIL_CHECKBOX_V2_FIM */

/* QTI_PROFESSOR_PERFIL_ETAPA07_INICIO */

.perfil-professor-integracao {
    width: min(
        calc(100% - 24px),
        960px
    );
    margin: 18px auto 55px;
    padding: 18px;
    border: 1px solid
        rgba(109,93,252,.23);
    border-radius: 17px;
    display: grid;
    gap: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(109,93,252,.09),
            #111f33
        );
}

.perfil-professor-integracao h2 {
    margin: 6px 0;
    color: #edf4fc;
    font-size: 1rem;
}

.perfil-professor-integracao p {
    margin: 0;
    color: #8796ab;
    font-size: .7rem;
    line-height: 1.6;
}

@media (min-width: 760px) {

    .perfil-professor-integracao {
        padding: 23px;
        grid-template-columns:
            minmax(0,1fr)
            auto;
        align-items: center;
    }
}

/* QTI_PROFESSOR_PERFIL_ETAPA07_FIM */


/* ==========================================================
   QTI_LOGIN_CONTRASTE_V6
   Correção local da tela /conta/entrar/
========================================================== */


/* ----------------------------------------------------------
   FUNDO DA TELA
---------------------------------------------------------- */

.qti-login-v6 {
    min-height: calc(100vh - 90px);

    margin:
        -1px
        calc(50% - 50vw)
        0;

    padding: 0;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(49, 87, 213, .20),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 15%,
            rgba(98, 85, 217, .15),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #cfd7e3,
            #dde3ec
        );
}


/* ----------------------------------------------------------
   GRID PRINCIPAL DO LOGIN
---------------------------------------------------------- */

.qti-login-v6 .conta-layout,
.qti-login-v6 .conta-auth-grid,
.qti-login-v6 .conta-login-grid,
.qti-login-v6 .conta-grid {
    min-height:
        calc(100vh - 90px);

    background: transparent;
}


/* ----------------------------------------------------------
   PAINEL ESQUERDO
---------------------------------------------------------- */

.qti-login-v6 .conta-apresentacao,
.qti-login-v6 .conta-lateral,
.qti-login-v6 .conta-auth-lateral,
.qti-login-v6 .login-apresentacao,
.qti-login-v6 .login-lateral {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 18% 14%,
            rgba(83,109,254,.30),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(98,85,217,.18),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #1b273a,
            #26344c
        ) !important;

    color: #ffffff !important;
}


/* camada decorativa */
.qti-login-v6 .conta-apresentacao::after,
.qti-login-v6 .conta-lateral::after,
.qti-login-v6 .conta-auth-lateral::after,
.qti-login-v6 .login-apresentacao::after,
.qti-login-v6 .login-lateral::after {
    content: "";

    position: absolute;

    right: -140px;
    bottom: -160px;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(98,85,217,.22),
            transparent 66%
        );

    pointer-events: none;
}


/* ----------------------------------------------------------
   TEXTOS DO PAINEL ESQUERDO
---------------------------------------------------------- */

.qti-login-v6 .conta-apresentacao h1,
.qti-login-v6 .conta-apresentacao h2,
.qti-login-v6 .conta-lateral h1,
.qti-login-v6 .conta-lateral h2,
.qti-login-v6 .conta-auth-lateral h1,
.qti-login-v6 .conta-auth-lateral h2,
.qti-login-v6 .login-apresentacao h1,
.qti-login-v6 .login-apresentacao h2,
.qti-login-v6 .login-lateral h1,
.qti-login-v6 .login-lateral h2 {
    color: #ffffff !important;

    text-shadow:
        0 1px 0 rgba(0,0,0,.12);
}

.qti-login-v6 .conta-apresentacao p,
.qti-login-v6 .conta-lateral p,
.qti-login-v6 .conta-auth-lateral p,
.qti-login-v6 .login-apresentacao p,
.qti-login-v6 .login-lateral p {
    color: #c8d1df !important;
}

.qti-login-v6 .conta-apresentacao span,
.qti-login-v6 .conta-lateral span,
.qti-login-v6 .conta-auth-lateral span,
.qti-login-v6 .login-apresentacao span,
.qti-login-v6 .login-lateral span {
    color: #d5ddeb !important;
}

.qti-login-v6 .conta-apresentacao > span:first-child,
.qti-login-v6 .conta-lateral > span:first-child,
.qti-login-v6 .conta-auth-lateral > span:first-child,
.qti-login-v6 .login-apresentacao > span:first-child,
.qti-login-v6 .login-lateral > span:first-child {
    color: #54e2d2 !important;

    font-weight: 850;
}


/* checks */
.qti-login-v6 .conta-apresentacao li,
.qti-login-v6 .conta-lateral li,
.qti-login-v6 .conta-auth-lateral li,
.qti-login-v6 .login-apresentacao li,
.qti-login-v6 .login-lateral li {
    color: #d1d9e6 !important;
}


/* ----------------------------------------------------------
   PAINEL DIREITO / FORMULÁRIO
---------------------------------------------------------- */

.qti-login-v6 .conta-card,
.qti-login-v6 .login-card,
.qti-login-v6 .conta-form-card {
    background:
        linear-gradient(
            150deg,
            #f8fafc,
            #eef2f6
        ) !important;

    border-color:
        #bcc7d6 !important;

    box-shadow:
        0 24px 60px
        rgba(24, 37, 61, .16) !important;
}


/* ----------------------------------------------------------
   FORMULÁRIO
---------------------------------------------------------- */

.qti-login-v6 .conta-card h1,
.qti-login-v6 .conta-card h2,
.qti-login-v6 .login-card h1,
.qti-login-v6 .login-card h2 {
    color: #152136 !important;
}

.qti-login-v6 .conta-card p,
.qti-login-v6 .login-card p {
    color: #5b6a7e !important;
}

.qti-login-v6 label {
    color: #26344a !important;
}

.qti-login-v6 input {
    background: #ffffff !important;

    color: #172033 !important;

    border-color:
        #b8c4d4 !important;
}

.qti-login-v6 input::placeholder {
    color: #8591a2 !important;
}

.qti-login-v6 input:focus {
    border-color:
        #4a63d8 !important;

    box-shadow:
        0 0 0 3px
        rgba(74,99,216,.13) !important;
}


/* links */
.qti-login-v6 a {
    color: #3157d5;
}


/* botão */
.qti-login-v6 button[type="submit"],
.qti-login-v6 .conta-botao-principal {
    background:
        linear-gradient(
            135deg,
            #3157d5,
            #584fd2
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 10px 26px
        rgba(49,87,213,.22);
}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 780px) {

    .qti-login-v6 {
        min-height: auto;

        background:
            linear-gradient(
                180deg,
                #d0d8e4,
                #e0e5ec
            );
    }

    .qti-login-v6 .conta-apresentacao,
    .qti-login-v6 .conta-lateral,
    .qti-login-v6 .conta-auth-lateral,
    .qti-login-v6 .login-apresentacao,
    .qti-login-v6 .login-lateral {
        min-height: auto;

        padding-top: 38px;
        padding-bottom: 34px;
    }

    .qti-login-v6 .conta-card,
    .qti-login-v6 .login-card,
    .qti-login-v6 .conta-form-card {
        margin:
            16px 12px
            28px;

        border-radius: 20px;
    }
}



/* ==========================================================
   QTI_LOGIN_V7_TIPOGRAFIA
   Sem caixa escura: contraste por fonte e composição
========================================================== */

.qti-login-v6 .conta-apresentacao,
.qti-login-v6 .conta-lateral,
.qti-login-v6 .conta-auth-lateral,
.qti-login-v6 .login-apresentacao,
.qti-login-v6 .login-lateral {
    background: transparent !important;
    color: #172033 !important;
    box-shadow: none !important;
}


/* remove camada radial escura anterior */
.qti-login-v6 .conta-apresentacao::after,
.qti-login-v6 .conta-lateral::after,
.qti-login-v6 .conta-auth-lateral::after,
.qti-login-v6 .login-apresentacao::after,
.qti-login-v6 .login-lateral::after {
    display: none !important;
}


/* Eyebrow */
.qti-login-v6 .conta-apresentacao > span:first-child,
.qti-login-v6 .conta-lateral > span:first-child,
.qti-login-v6 .conta-auth-lateral > span:first-child,
.qti-login-v6 .login-apresentacao > span:first-child,
.qti-login-v6 .login-lateral > span:first-child {
    color: #2f8f86 !important;
    font-weight: 900;
    letter-spacing: .08em;
}


/* título */
.qti-login-v6 .conta-apresentacao h1,
.qti-login-v6 .conta-apresentacao h2,
.qti-login-v6 .conta-lateral h1,
.qti-login-v6 .conta-lateral h2,
.qti-login-v6 .conta-auth-lateral h1,
.qti-login-v6 .conta-auth-lateral h2,
.qti-login-v6 .login-apresentacao h1,
.qti-login-v6 .login-apresentacao h2,
.qti-login-v6 .login-lateral h1,
.qti-login-v6 .login-lateral h2 {
    color: #172033 !important;
    text-shadow: none !important;
}


/* subtítulo */
.qti-login-v6 .conta-apresentacao p,
.qti-login-v6 .conta-lateral p,
.qti-login-v6 .conta-auth-lateral p,
.qti-login-v6 .login-apresentacao p,
.qti-login-v6 .login-lateral p {
    color: #5b6980 !important;
}


/* checks */
.qti-login-v6 .conta-apresentacao li,
.qti-login-v6 .conta-lateral li,
.qti-login-v6 .conta-auth-lateral li,
.qti-login-v6 .login-apresentacao li,
.qti-login-v6 .login-lateral li {
    color: #44536a !important;
}


/* ícones/checks */
.qti-login-v6 .conta-apresentacao li::marker,
.qti-login-v6 .conta-lateral li::marker,
.qti-login-v6 .conta-auth-lateral li::marker,
.qti-login-v6 .login-apresentacao li::marker,
.qti-login-v6 .login-lateral li::marker {
    color: #3157d5 !important;
}


/* reforçar equilíbrio visual */
.qti-login-v6 .conta-apresentacao,
.qti-login-v6 .conta-lateral,
.qti-login-v6 .conta-auth-lateral,
.qti-login-v6 .login-apresentacao,
.qti-login-v6 .login-lateral {
    padding-right: clamp(24px, 5vw, 72px);
}


/* card do formulário fica como foco principal */
.qti-login-v6 .conta-card,
.qti-login-v6 .login-card,
.qti-login-v6 .conta-form-card {
    background:
        linear-gradient(
            155deg,
            #f8fafc,
            #edf1f6
        ) !important;

    border:
        1px solid #bac6d5 !important;

    box-shadow:
        0 22px 58px rgba(25, 39, 64, .16) !important;
}


/* botão principal */
.qti-login-v6 button[type="submit"],
.qti-login-v6 .conta-botao-principal {
    background:
        linear-gradient(
            135deg,
            #3157d5,
            #5d4fd6
        ) !important;

    color: #ffffff !important;
}


/* mobile */
@media (max-width: 780px) {

    .qti-login-v6 .conta-apresentacao,
    .qti-login-v6 .conta-lateral,
    .qti-login-v6 .conta-auth-lateral,
    .qti-login-v6 .login-apresentacao,
    .qti-login-v6 .login-lateral {
        padding-right: 20px;
        padding-left: 20px;
    }

}



/* ==========================================================
   QTI_AUTH_PUBLIC_V9

   Tema visual unificado para:
   - login
   - cadastro
   - cadastro Premium
   - recuperação de senha
   - redefinição de senha
   - alteração de senha
   - confirmações

   Escopo propositalmente restrito a .qti-auth-public.
========================================================== */


/* ==========================================================
   PÁGINA
========================================================== */

.qti-auth-public {
    --auth-text: #162238;
    --auth-muted: #53637a;
    --auth-blue: #3157d5;
    --auth-indigo: #5b50d6;
    --auth-teal: #24877e;
    --auth-border: #b9c5d4;
    --auth-card: rgba(248, 250, 252, .94);

    min-height:
        calc(100vh - 90px) !important;

    margin:
        0
        calc(50% - 50vw) !important;

    padding:
        clamp(42px, 6vh, 76px)
        24px !important;

    background:
        radial-gradient(
            circle at 10% 14%,
            rgba(49, 87, 213, .20),
            transparent 31%
        ),
        radial-gradient(
            circle at 91% 17%,
            rgba(98, 85, 217, .16),
            transparent 32%
        ),
        radial-gradient(
            circle at 48% 100%,
            rgba(72, 102, 165, .09),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #cbd4e1 0%,
            #d9e0e9 52%,
            #d1d9e5 100%
        ) !important;
}


/* ==========================================================
   DUAS COLUNAS
========================================================== */

.qti-auth-public .conta-layout {
    width:
        min(1220px, 100%) !important;

    min-height:
        calc(100vh - 220px) !important;

    margin:
        0 auto !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(400px, .75fr) !important;

    gap:
        clamp(46px, 6vw, 96px) !important;

    align-items:
        center !important;

    background:
        transparent !important;
}


/* ==========================================================
   LADO INSTITUCIONAL
========================================================== */

.qti-auth-public .conta-apresentacao {
    width:
        100% !important;

    max-width:
        600px !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    color:
        var(--auth-text) !important;
}


/* Remove pseudo-elementos do tema escuro antigo. */

.qti-auth-public
.conta-apresentacao::before,

.qti-auth-public
.conta-apresentacao::after {
    display:
        none !important;
}


/* Eyebrow */

.qti-auth-public
.conta-legenda {
    display:
        inline-flex !important;

    width:
        fit-content;

    margin:
        0 0 20px !important;

    padding:
        7px 11px !important;

    border:
        1px solid
        rgba(36, 135, 126, .20);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.38);

    color:
        var(--auth-teal) !important;

    font-size:
        .74rem !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .09em !important;
}


/* Título */

.qti-auth-public
.conta-apresentacao h1,

.qti-auth-public
.conta-apresentacao h2 {
    max-width:
        590px !important;

    margin:
        0 0 18px !important;

    color:
        var(--auth-text) !important;

    font-size:
        clamp(2.7rem, 4.5vw, 4.55rem) !important;

    line-height:
        1 !important;

    letter-spacing:
        -.047em !important;

    text-shadow:
        none !important;
}


/* Descrição */

.qti-auth-public
.conta-apresentacao > p {
    max-width:
        560px !important;

    margin:
        0 0 26px !important;

    color:
        var(--auth-muted) !important;

    font-size:
        1.03rem !important;

    line-height:
        1.7 !important;
}


/* ==========================================================
   BENEFÍCIOS
========================================================== */

.qti-auth-public
.conta-beneficios {
    display:
        grid !important;

    gap:
        9px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    list-style:
        none !important;
}


.qti-auth-public
.conta-beneficios li {
    position:
        relative;

    margin:
        0 !important;

    padding:
        9px 10px
        9px 38px !important;

    border:
        1px solid
        rgba(116, 135, 160, .14);

    border-radius:
        11px;

    background:
        rgba(255,255,255,.21);

    color:
        #405069 !important;

    font-size:
        .89rem !important;

    line-height:
        1.45 !important;
}


.qti-auth-public
.conta-beneficios li::before {
    content:
        "✓";

    position:
        absolute;

    left:
        10px;

    top:
        50%;

    transform:
        translateY(-50%);

    display:
        grid;

    place-items:
        center;

    width:
        20px;

    height:
        20px;

    border-radius:
        6px;

    background:
        rgba(36, 135, 126, .12);

    color:
        var(--auth-teal);

    font-size:
        .7rem;

    font-weight:
        900;
}


/*
 * Importante:
 * sobrescreve spans claros herdados do tema antigo.
 */

.qti-auth-public
.conta-beneficios li,

.qti-auth-public
.conta-beneficios li span,

.qti-auth-public
.conta-beneficios li strong {
    color:
        #405069 !important;

    opacity:
        1 !important;
}


/* ==========================================================
   CARD
========================================================== */

.qti-auth-public
.conta-card {
    width:
        min(100%, 560px) !important;

    max-width:
        560px !important;

    margin:
        0 0 0 auto !important;

    padding:
        clamp(28px, 3vw, 42px) !important;

    border:
        1px solid
        rgba(174, 188, 206, .92) !important;

    border-radius:
        24px !important;

    background:
        var(--auth-card) !important;

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    box-shadow:
        0 24px 65px
        rgba(25, 39, 64, .14) !important;

    color:
        var(--auth-text) !important;
}


/* Cards menores das telas de senha */

.qti-auth-public
.conta-card-menor {
    max-width:
        590px !important;

    margin:
        auto !important;
}


/* ==========================================================
   TODOS OS TEXTOS DO CARD
========================================================== */

.qti-auth-public
.conta-card h1,

.qti-auth-public
.conta-card h2,

.qti-auth-public
.conta-card h3 {
    color:
        #142139 !important;

    text-shadow:
        none !important;
}


.qti-auth-public
.conta-card > p,

.qti-auth-public
.conta-card .conta-ajuda,

.qti-auth-public
.conta-card small {
    color:
        #5b6a7f !important;

    opacity:
        1 !important;
}


.qti-auth-public
.conta-resultado,

.qti-auth-public
.conta-resultado p,

.qti-auth-public
.conta-resultado span {
    color:
        #42536b !important;

    opacity:
        1 !important;
}


/* ==========================================================
   CAMPOS
========================================================== */

.qti-auth-public
.conta-campo {
    margin-bottom:
        17px !important;
}


.qti-auth-public
.conta-campo label,

.qti-auth-public
label {
    color:
        #26344a !important;

    opacity:
        1 !important;

    font-size:
        .84rem !important;

    font-weight:
        800 !important;
}


.qti-auth-public
input:not([type="checkbox"]):not([type="radio"]),

.qti-auth-public
select,

.qti-auth-public
textarea {
    width:
        100% !important;

    min-height:
        52px !important;

    border:
        1px solid
        #b8c5d5 !important;

    border-radius:
        12px !important;

    background:
        #edf2f8 !important;

    color:
        #172238 !important;

    opacity:
        1 !important;

    box-shadow:
        none !important;
}


.qti-auth-public
input::placeholder,

.qti-auth-public
textarea::placeholder {
    color:
        #7f8da0 !important;

    opacity:
        1 !important;
}


.qti-auth-public
input:not([type="checkbox"]):not([type="radio"]):focus,

.qti-auth-public
select:focus,

.qti-auth-public
textarea:focus {
    border-color:
        #4565dc !important;

    background:
        #f7f9fc !important;

    outline:
        0 !important;

    box-shadow:
        0 0 0 4px
        rgba(69,101,220,.11) !important;
}


/* ==========================================================
   CHECKBOXES
========================================================== */

.qti-auth-public
input[type="checkbox"] {
    accent-color:
        var(--auth-blue);
}


.qti-auth-public
input[type="checkbox"] + label,

.qti-auth-public
label:has(input[type="checkbox"]) {
    color:
        #46566c !important;
}


/* ==========================================================
   ERROS
========================================================== */

.qti-auth-public
.conta-erro,

.qti-auth-public
.conta-erro-geral,

.qti-auth-public
.errorlist,

.qti-auth-public
.errorlist li {
    color:
        #a72d3b !important;

    opacity:
        1 !important;
}


.qti-auth-public
.conta-erro-geral {
    border:
        1px solid
        rgba(183, 52, 68, .20);

    border-radius:
        10px;

    background:
        rgba(213, 63, 80, .07);
}


/* ==========================================================
   CAPTCHA / CADASTRO
========================================================== */

.qti-auth-public
.cadastro-captcha {
    border:
        1px solid
        #c1ccd9 !important;

    border-radius:
        13px !important;

    background:
        rgba(235,240,246,.86) !important;
}


.qti-auth-public
.cadastro-captcha-conteudo,

.qti-auth-public
.cadastro-captcha-conteudo p,

.qti-auth-public
.cadastro-captcha-conteudo span {
    color:
        #405169 !important;

    opacity:
        1 !important;
}


.qti-auth-public
.cadastro-captcha-icone {
    color:
        var(--auth-blue) !important;
}


.qti-auth-public
.cadastro-captcha-erro {
    color:
        #a72d3b !important;
}


/* ==========================================================
   LINKS
========================================================== */

.qti-auth-public a {
    color:
        #3157d5 !important;
}


.qti-auth-public
.conta-recuperar,

.qti-auth-public
.conta-ajuda a {
    color:
        #3157d5 !important;

    font-weight:
        750;
}


/* ==========================================================
   BOTÃO
========================================================== */

.qti-auth-public
.conta-botao,

.qti-auth-public
button[type="submit"] {
    min-height:
        52px !important;

    border:
        0 !important;

    border-radius:
        12px !important;

    background:
        linear-gradient(
            135deg,
            #3157d5,
            #5a4fd6
        ) !important;

    color:
        #ffffff !important;

    font-weight:
        850 !important;

    box-shadow:
        0 11px 26px
        rgba(49,87,213,.20) !important;
}


/* ==========================================================
   TELAS CENTRALIZADAS DE SENHA
========================================================== */

.qti-auth-public.conta-centralizada {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;
}


.qti-auth-public.conta-centralizada
.conta-card {
    margin:
        auto !important;
}


/* ==========================================================
   REMOVE RESÍDUOS VISUAIS CLAROS DO TEMA ANTERIOR
========================================================== */

.qti-auth-public
.conta-apresentacao *:not(.conta-legenda),

.qti-auth-public
.conta-card * {
    text-shadow:
        none;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .qti-auth-public {
        padding:
            34px 18px !important;
    }

    .qti-auth-public
    .conta-layout {
        grid-template-columns:
            1fr !important;

        gap:
            30px !important;

        min-height:
            auto !important;
    }

    .qti-auth-public
    .conta-apresentacao {
        max-width:
            680px !important;

        margin:
            0 auto !important;
    }

    .qti-auth-public
    .conta-apresentacao h1,

    .qti-auth-public
    .conta-apresentacao h2 {
        font-size:
            clamp(
                2.3rem,
                8vw,
                3.5rem
            ) !important;
    }

    .qti-auth-public
    .conta-card {
        width:
            min(100%, 680px) !important;

        max-width:
            680px !important;

        margin:
            0 auto !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 560px) {

    .qti-auth-public {
        padding:
            26px 12px
            36px !important;

        background:
            radial-gradient(
                circle at 90% 5%,
                rgba(98,85,217,.14),
                transparent 30%
            ),
            linear-gradient(
                180deg,
                #ccd5e2,
                #e1e6ed
            ) !important;
    }

    .qti-auth-public
    .conta-apresentacao h1,

    .qti-auth-public
    .conta-apresentacao h2 {
        font-size:
            clamp(
                2.15rem,
                11vw,
                3rem
            ) !important;
    }

    .qti-auth-public
    .conta-card {
        padding:
            24px 18px !important;

        border-radius:
            19px !important;
    }

    .qti-auth-public
    .conta-beneficios {
        gap:
            7px !important;
    }

}



/* ==========================================================
   QTI_CADASTRO_V10_PRO
   Cadastro centralizado e sem espaço lateral desperdiçado
========================================================== */


/* ----------------------------------------------------------
   PÁGINA DE CADASTRO
---------------------------------------------------------- */

.qti-auth-public:has(.cadastro-formulario),
.qti-auth-public:has(form[action*="cadastro"]) {
    display: block !important;

    padding:
        clamp(38px, 5vh, 64px)
        20px
        70px !important;
}


/* ----------------------------------------------------------
   LAYOUT DO CADASTRO
---------------------------------------------------------- */

.qti-auth-public:has(.cadastro-formulario)
.conta-layout,

.qti-auth-public:has(form[action*="cadastro"])
.conta-layout {
    width:
        min(860px, 100%) !important;

    min-height:
        0 !important;

    margin:
        0 auto !important;

    display:
        block !important;

    background:
        transparent !important;
}


/* ----------------------------------------------------------
   CABEÇALHO INSTITUCIONAL ACIMA
---------------------------------------------------------- */

.qti-auth-public:has(.cadastro-formulario)
.conta-apresentacao,

.qti-auth-public:has(form[action*="cadastro"])
.conta-apresentacao {
    width:
        min(760px, 100%) !important;

    max-width:
        760px !important;

    margin:
        0 auto 28px !important;

    padding:
        0 !important;

    text-align:
        center !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


/* etiqueta */
.qti-auth-public:has(.cadastro-formulario)
.conta-legenda,

.qti-auth-public:has(form[action*="cadastro"])
.conta-legenda {
    margin:
        0 auto 14px !important;

    color:
        #2e7f78 !important;
}


/* título */
.qti-auth-public:has(.cadastro-formulario)
.conta-apresentacao h1,

.qti-auth-public:has(.cadastro-formulario)
.conta-apresentacao h2,

.qti-auth-public:has(form[action*="cadastro"])
.conta-apresentacao h1,

.qti-auth-public:has(form[action*="cadastro"])
.conta-apresentacao h2 {
    max-width:
        760px !important;

    margin:
        0 auto 12px !important;

    color:
        #172033 !important;

    font-size:
        clamp(2.2rem, 5vw, 3.8rem) !important;

    line-height:
        1.04 !important;

    letter-spacing:
        -.04em !important;
}


/* subtítulo */
.qti-auth-public:has(.cadastro-formulario)
.conta-apresentacao > p,

.qti-auth-public:has(form[action*="cadastro"])
.conta-apresentacao > p {
    max-width:
        650px !important;

    margin:
        0 auto 20px !important;

    color:
        #53637a !important;

    font-size:
        1rem !important;

    line-height:
        1.65 !important;
}


/* ----------------------------------------------------------
   BENEFÍCIOS VISÍVEIS E COMPACTOS
---------------------------------------------------------- */

.qti-auth-public:has(.cadastro-formulario)
.conta-beneficios,

.qti-auth-public:has(form[action*="cadastro"])
.conta-beneficios {
    display:
        flex !important;

    flex-wrap:
        wrap !important;

    justify-content:
        center !important;

    gap:
        9px !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    list-style:
        none !important;
}


.qti-auth-public:has(.cadastro-formulario)
.conta-beneficios li,

.qti-auth-public:has(form[action*="cadastro"])
.conta-beneficios li {
    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        7px !important;

    width:
        auto !important;

    min-height:
        36px !important;

    margin:
        0 !important;

    padding:
        7px 12px 7px 34px !important;

    border:
        1px solid
        rgba(111, 130, 156, .24) !important;

    border-radius:
        999px !important;

    background:
        rgba(247,249,252,.68) !important;

    color:
        #3f4f66 !important;

    font-size:
        .82rem !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    opacity:
        1 !important;
}


.qti-auth-public:has(.cadastro-formulario)
.conta-beneficios li span,

.qti-auth-public:has(form[action*="cadastro"])
.conta-beneficios li span {
    color:
        #3f4f66 !important;

    opacity:
        1 !important;
}


.qti-auth-public:has(.cadastro-formulario)
.conta-beneficios li::before,

.qti-auth-public:has(form[action*="cadastro"])
.conta-beneficios li::before {
    left:
        10px !important;

    color:
        #267f76 !important;
}


/* ----------------------------------------------------------
   CARD DO FORMULÁRIO
---------------------------------------------------------- */

.qti-auth-public:has(.cadastro-formulario)
.conta-card,

.qti-auth-public:has(form[action*="cadastro"])
.conta-card {
    width:
        min(820px, 100%) !important;

    max-width:
        820px !important;

    margin:
        0 auto !important;

    padding:
        clamp(26px, 3vw, 40px) !important;

    border:
        1px solid
        #b7c3d2 !important;

    border-radius:
        22px !important;

    background:
        rgba(248,250,252,.94) !important;

    box-shadow:
        0 22px 58px
        rgba(24,38,62,.14) !important;
}


/* ----------------------------------------------------------
   GRID INTERNO DE CAMPOS
---------------------------------------------------------- */

.qti-auth-public:has(.cadastro-formulario)
.cadastro-formulario,

.qti-auth-public:has(form[action*="cadastro"])
form {
    width:
        100% !important;
}


/* campos lado a lado em desktop */
@media (min-width: 760px) {

    .qti-auth-public:has(.cadastro-formulario)
    .cadastro-grid,

    .qti-auth-public:has(.cadastro-formulario)
    .conta-form-grid {
        display:
            grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            16px 18px !important;
    }

}


/* ----------------------------------------------------------
   INPUTS
---------------------------------------------------------- */

.qti-auth-public:has(.cadastro-formulario)
input:not([type="checkbox"]):not([type="radio"]),

.qti-auth-public:has(.cadastro-formulario)
select,

.qti-auth-public:has(.cadastro-formulario)
textarea,

.qti-auth-public:has(form[action*="cadastro"])
input:not([type="checkbox"]):not([type="radio"]),

.qti-auth-public:has(form[action*="cadastro"])
select,

.qti-auth-public:has(form[action*="cadastro"])
textarea {
    min-height:
        50px !important;

    background:
        #edf2f7 !important;

    color:
        #172238 !important;

    border:
        1px solid
        #b8c4d3 !important;
}


/* ----------------------------------------------------------
   TÍTULOS INTERNOS DO CARD
---------------------------------------------------------- */

.qti-auth-public:has(.cadastro-formulario)
.conta-card h1,

.qti-auth-public:has(.cadastro-formulario)
.conta-card h2,

.qti-auth-public:has(form[action*="cadastro"])
.conta-card h1,

.qti-auth-public:has(form[action*="cadastro"])
.conta-card h2 {
    color:
        #172033 !important;

    font-size:
        clamp(1.45rem, 2.2vw, 1.85rem) !important;
}


/* ----------------------------------------------------------
   PREMIUM
---------------------------------------------------------- */

.qti-auth-public:has(.cadastro-formulario)
.cadastro-premium,

.qti-auth-public:has(form[action*="cadastro"])
.cadastro-premium {
    margin-bottom:
        18px !important;

    border:
        1px solid
        rgba(76, 84, 199, .22) !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            135deg,
            rgba(238,240,255,.86),
            rgba(248,249,252,.92)
        ) !important;
}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 640px) {

    .qti-auth-public:has(.cadastro-formulario),
    .qti-auth-public:has(form[action*="cadastro"]) {
        padding:
            28px 12px
            42px !important;
    }

    .qti-auth-public:has(.cadastro-formulario)
    .conta-apresentacao,

    .qti-auth-public:has(form[action*="cadastro"])
    .conta-apresentacao {
        margin-bottom:
            22px !important;
    }

    .qti-auth-public:has(.cadastro-formulario)
    .conta-apresentacao h1,

    .qti-auth-public:has(.cadastro-formulario)
    .conta-apresentacao h2,

    .qti-auth-public:has(form[action*="cadastro"])
    .conta-apresentacao h1,

    .qti-auth-public:has(form[action*="cadastro"])
    .conta-apresentacao h2 {
        font-size:
            clamp(2rem, 10vw, 2.8rem) !important;
    }

    .qti-auth-public:has(.cadastro-formulario)
    .conta-beneficios,

    .qti-auth-public:has(form[action*="cadastro"])
    .conta-beneficios {
        justify-content:
            flex-start !important;
    }

    .qti-auth-public:has(.cadastro-formulario)
    .conta-beneficios li,

    .qti-auth-public:has(form[action*="cadastro"])
    .conta-beneficios li {
        width:
            100% !important;

        border-radius:
            10px !important;
    }

    .qti-auth-public:has(.cadastro-formulario)
    .conta-card,

    .qti-auth-public:has(form[action*="cadastro"])
    .conta-card {
        padding:
            22px 16px !important;

        border-radius:
            18px !important;
    }

}



/* ==========================================================
   QTI_CADASTRO_V11_UMA_COLUNA
   Força cadastro em fluxo vertical
========================================================== */


/* página */
.qti-auth-public:has(.cadastro-formulario),
.qti-auth-public:has(form[action*="cadastro"]) {
    display: block !important;
}


/* layout principal */
.qti-auth-public:has(.cadastro-formulario) .conta-layout,
.qti-auth-public:has(form[action*="cadastro"]) .conta-layout,
.qti-auth-public.qti-cadastro-page .conta-layout {
    display: block !important;

    width: min(860px, 100%) !important;
    max-width: 860px !important;

    margin: 0 auto !important;

    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;

    gap: 0 !important;

    min-height: 0 !important;
}


/* apresentação */
.qti-auth-public:has(.cadastro-formulario) .conta-apresentacao,
.qti-auth-public:has(form[action*="cadastro"]) .conta-apresentacao,
.qti-auth-public.qti-cadastro-page .conta-apresentacao {
    display: block !important;

    width: 100% !important;
    max-width: 760px !important;

    margin:
        0 auto 28px !important;

    padding: 0 !important;

    float: none !important;

    position: static !important;

    text-align: center !important;
}


/* formulário */
.qti-auth-public:has(.cadastro-formulario) .conta-card,
.qti-auth-public:has(form[action*="cadastro"]) .conta-card,
.qti-auth-public.qti-cadastro-page .conta-card {
    display: block !important;

    width: min(820px, 100%) !important;
    max-width: 820px !important;

    margin:
        0 auto !important;

    float: none !important;

    position: static !important;
}


/* neutraliza regras antigas de colunas */
.qti-auth-public:has(.cadastro-formulario) .conta-layout > *,
.qti-auth-public:has(form[action*="cadastro"]) .conta-layout > *,
.qti-auth-public.qti-cadastro-page .conta-layout > * {
    grid-column: 1 !important;
    width: 100% !important;
}


/* garante ordem vertical */
.qti-auth-public:has(.cadastro-formulario) .conta-apresentacao,
.qti-auth-public:has(form[action*="cadastro"]) .conta-apresentacao {
    order: 1 !important;
}

.qti-auth-public:has(.cadastro-formulario) .conta-card,
.qti-auth-public:has(form[action*="cadastro"]) .conta-card {
    order: 2 !important;
}


/* benefícios ficam acima do formulário */
.qti-auth-public:has(.cadastro-formulario) .conta-beneficios,
.qti-auth-public:has(form[action*="cadastro"]) .conta-beneficios {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;

    margin-bottom: 0 !important;
}


/* mobile */
@media (max-width: 640px) {

    .qti-auth-public:has(.cadastro-formulario) .conta-layout,
    .qti-auth-public:has(form[action*="cadastro"]) .conta-layout {
        width: 100% !important;
        max-width: none !important;
    }

    .qti-auth-public:has(.cadastro-formulario) .conta-apresentacao,
    .qti-auth-public:has(form[action*="cadastro"]) .conta-apresentacao {
        text-align: left !important;

        margin-bottom: 22px !important;
    }

    .qti-auth-public:has(.cadastro-formulario) .conta-beneficios,
    .qti-auth-public:has(form[action*="cadastro"]) .conta-beneficios {
        justify-content: flex-start !important;
    }

}



/* ==========================================================
   QTI_CADASTRO_V12_DEFINITIVO

   NÃO usa :has().
   NÃO depende de action do form.
   NÃO depende de classe hipotética.

   O próprio HTML possui classes exclusivas.
========================================================== */


/* ==========================================================
   PÁGINA
========================================================== */

.qti-cadastro-v12 {
    min-height:
        calc(100vh - 90px) !important;

    padding:
        46px 20px
        70px !important;
}


/* ==========================================================
   ESTA É A REGRA PRINCIPAL:
   UM ITEM ABAIXO DO OUTRO
========================================================== */

.qti-cadastro-v12
.qti-cadastro-stack-v12 {
    display:
        flex !important;

    flex-direction:
        column !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    width:
        min(880px, 100%) !important;

    max-width:
        880px !important;

    min-height:
        0 !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    gap:
        28px !important;

    grid-template-columns:
        none !important;

    grid-template-rows:
        none !important;

    float:
        none !important;
}


/* ==========================================================
   CABEÇALHO
========================================================== */

.qti-cadastro-v12
.qti-cadastro-cabecalho-v12 {
    display:
        block !important;

    position:
        static !important;

    order:
        1 !important;

    flex:
        0 0 auto !important;

    width:
        min(760px, 100%) !important;

    max-width:
        760px !important;

    min-height:
        0 !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    float:
        none !important;

    text-align:
        center !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


/* Título */

.qti-cadastro-v12
.qti-cadastro-cabecalho-v12 h1,

.qti-cadastro-v12
.qti-cadastro-cabecalho-v12 h2 {
    max-width:
        760px !important;

    margin:
        0 auto 12px !important;

    color:
        #172033 !important;

    font-size:
        clamp(
            2.25rem,
            5vw,
            3.65rem
        ) !important;

    line-height:
        1.04 !important;

    letter-spacing:
        -.04em !important;
}


/* Subtítulo */

.qti-cadastro-v12
.qti-cadastro-cabecalho-v12 > p {
    max-width:
        650px !important;

    margin:
        0 auto 20px !important;

    color:
        #53637a !important;

    font-size:
        1rem !important;

    line-height:
        1.65 !important;
}


/* ==========================================================
   BENEFÍCIOS
========================================================== */

.qti-cadastro-v12
.conta-beneficios {
    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        wrap !important;

    justify-content:
        center !important;

    align-items:
        center !important;

    gap:
        9px !important;

    width:
        100% !important;

    margin:
        0 auto !important;

    padding:
        0 !important;
}


.qti-cadastro-v12
.conta-beneficios li {
    display:
        inline-flex !important;

    align-items:
        center !important;

    width:
        auto !important;

    min-height:
        36px !important;

    padding:
        7px 13px
        7px 34px !important;

    margin:
        0 !important;

    border:
        1px solid
        rgba(104,126,153,.25) !important;

    border-radius:
        999px !important;

    background:
        rgba(248,250,252,.58) !important;

    color:
        #3d4d64 !important;

    font-size:
        .82rem !important;

    font-weight:
        700 !important;

    opacity:
        1 !important;
}


.qti-cadastro-v12
.conta-beneficios li span,

.qti-cadastro-v12
.conta-beneficios li strong {
    color:
        #3d4d64 !important;

    opacity:
        1 !important;
}


/* ==========================================================
   FORMULÁRIO ABAIXO
========================================================== */

.qti-cadastro-v12
.qti-cadastro-form-card-v12 {
    display:
        block !important;

    position:
        static !important;

    order:
        2 !important;

    flex:
        0 0 auto !important;

    width:
        min(820px, 100%) !important;

    max-width:
        820px !important;

    min-width:
        0 !important;

    margin:
        0 auto !important;

    padding:
        clamp(
            26px,
            3vw,
            40px
        ) !important;

    float:
        none !important;

    transform:
        none !important;

    justify-self:
        auto !important;

    align-self:
        auto !important;

    grid-column:
        auto !important;

    grid-row:
        auto !important;

    border:
        1px solid
        #b7c3d2 !important;

    border-radius:
        22px !important;

    background:
        rgba(
            248,
            250,
            252,
            .95
        ) !important;

    box-shadow:
        0 22px 58px
        rgba(
            24,
            38,
            62,
            .14
        ) !important;
}


/* ==========================================================
   DESLIGAR REGRAS ANTIGAS DO GRID
========================================================== */

.qti-cadastro-v12
.qti-cadastro-stack-v12
> .qti-cadastro-cabecalho-v12,

.qti-cadastro-v12
.qti-cadastro-stack-v12
> .qti-cadastro-form-card-v12 {
    grid-column:
        unset !important;

    grid-row:
        unset !important;

    left:
        auto !important;

    right:
        auto !important;

    top:
        auto !important;

    bottom:
        auto !important;
}


/* ==========================================================
   FORM INTERNO
========================================================== */

.qti-cadastro-v12
.qti-cadastro-form-card-v12
form {
    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 640px) {

    .qti-cadastro-v12 {
        padding:
            28px 12px
            42px !important;
    }

    .qti-cadastro-v12
    .qti-cadastro-stack-v12 {
        width:
            100% !important;

        max-width:
            none !important;

        gap:
            22px !important;
    }

    .qti-cadastro-v12
    .qti-cadastro-cabecalho-v12 {
        width:
            100% !important;

        max-width:
            none !important;

        text-align:
            left !important;
    }

    .qti-cadastro-v12
    .conta-beneficios {
        flex-direction:
            column !important;

        align-items:
            stretch !important;
    }

    .qti-cadastro-v12
    .conta-beneficios li {
        width:
            100% !important;

        border-radius:
            10px !important;
    }

    .qti-cadastro-v12
    .qti-cadastro-form-card-v12 {
        width:
            100% !important;

        max-width:
            none !important;

        padding:
            22px 16px !important;

        border-radius:
            18px !important;
    }

}