/*
 * Ajuste do login à viewport.
 *
 * Mantém a página dentro da altura visível e reduz progressivamente tipografia,
 * espaçamentos e elementos decorativos conforme a largura e a altura disponíveis.
 * Quando uma mensagem de validação torna o formulário maior, somente o conteúdo
 * central pode rolar; a página e as duas seções permanecem fixas.
 */
.guest-body.auth-experience {
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.auth-shell {
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.auth-product,
.auth-access {
    height: 100%;
    min-height: 0;
}

.auth-product {
    padding:
        clamp(24px, 5vh, 56px)
        clamp(34px, 6vw, 94px);
}

.auth-product__content {
    max-height: 100%;
}

.auth-product__brand {
    margin-bottom: clamp(20px, 4vh, 42px);
}

.auth-product h1 {
    font-size: clamp(2.25rem, min(4vw, 6.3vh), 4rem);
}

.auth-product__lead {
    margin:
        clamp(14px, 2.5vh, 24px)
        0
        clamp(18px, 3.2vh, 30px);
    font-size: clamp(.94rem, min(1.25vw, 2.1vh), 1.16rem);
    line-height: 1.5;
}

.auth-benefits {
    gap: clamp(8px, 1.35vh, 13px);
}

.auth-benefits li {
    padding:
        clamp(8px, 1.3vh, 12px)
        clamp(10px, 1.4vw, 14px);
}

.auth-product__trust {
    margin-top: clamp(14px, 2.8vh, 26px);
}

.auth-access {
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding:
        clamp(14px, 3.2vh, 30px)
        clamp(30px, 5.2vw, 82px)
        clamp(12px, 2.5vh, 24px);
    overflow: hidden;
}

.auth-language a {
    width: clamp(38px, 4.2vh, 43px);
    min-width: clamp(38px, 4.2vh, 43px);
    height: clamp(32px, 4.2vh, 36px);
    min-height: clamp(32px, 4.2vh, 36px);
}

.auth-access__content {
    min-height: 0;
    max-height: 100%;
    margin: auto;
    padding: clamp(12px, 4.5vh, 42px) 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(109, 40, 217, .28) transparent;
}

.auth-access__content::-webkit-scrollbar {
    width: 5px;
}

.auth-access__content::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(109, 40, 217, .28);
}

.auth-form-heading {
    margin-bottom: clamp(15px, 2.8vh, 26px);
}

.auth-form-heading h2,
.auth-access__content > h2 {
    margin-top: clamp(8px, 1.5vh, 13px);
    font-size: clamp(1.72rem, min(3vw, 4.6vh), 2.35rem);
}

.auth-form-heading p,
.auth-access__content > .muted {
    margin-top: clamp(6px, 1.2vh, 11px);
    font-size: clamp(.82rem, min(.94rem, 1.9vh), .94rem);
    line-height: 1.45;
}

.auth-login-form,
.auth-form {
    gap: clamp(10px, 2vh, 17px);
}

.auth-input-group input,
.auth-form input {
    min-height: clamp(46px, 6.4vh, 56px);
}

.auth-submit {
    min-height: clamp(48px, 6.6vh, 58px);
    margin-top: clamp(2px, .8vh, 7px);
}

.auth-security-note {
    margin-top: clamp(9px, 1.8vh, 17px);
}

/* Notebooks e monitores baixos: mantém todos os blocos em uma única tela. */
@media (min-width: 1101px) and (max-height: 820px) {
    .auth-product {
        padding-block: 26px;
    }

    .auth-product__brand {
        margin-bottom: 18px;
    }

    .auth-product__mark {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .auth-product__eyebrow {
        margin-bottom: 11px;
        font-size: .69rem;
    }

    .auth-product h1 {
        font-size: clamp(2.15rem, min(3.55vw, 5.8vh), 3.2rem);
        line-height: 1;
    }

    .auth-product__lead {
        margin: 13px 0 17px;
        font-size: .91rem;
        line-height: 1.4;
    }

    .auth-benefits {
        gap: 7px;
    }

    .auth-benefits li {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 11px;
        padding: 7px 10px;
        border-radius: 14px;
    }

    .auth-benefits__icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .auth-benefits__icon svg {
        width: 19px;
        height: 19px;
    }

    .auth-benefits strong {
        font-size: .83rem;
    }

    .auth-benefits small {
        margin-top: 2px;
        font-size: .7rem;
        line-height: 1.3;
    }

    .auth-product__trust {
        margin-top: 12px;
        font-size: .65rem;
    }

    .auth-access {
        padding-block: 18px 14px;
    }

    .auth-form-heading {
        margin-bottom: 15px;
    }

    .auth-form-heading h2,
    .auth-access__content > h2 {
        font-size: 1.72rem;
    }

    .auth-form-heading p,
    .auth-access__content > .muted {
        font-size: .82rem;
    }

    .auth-input-group label,
    .auth-form label {
        font-size: .82rem;
    }

    .auth-footer {
        font-size: .66rem;
    }
}

@media (min-width: 1101px) and (max-height: 650px) {
    .auth-product {
        padding-block: 18px;
    }

    .auth-product__brand {
        margin-bottom: 11px;
    }

    .auth-product__mark {
        width: 40px;
        height: 40px;
    }

    .auth-product__name {
        font-size: 1.12rem;
    }

    .auth-product__brand small,
    .auth-product__eyebrow,
    .auth-product__trust {
        font-size: .62rem;
    }

    .auth-product__eyebrow {
        margin-bottom: 8px;
    }

    .auth-product h1 {
        font-size: clamp(2rem, min(3.2vw, 5.4vh), 2.6rem);
    }

    .auth-product__lead {
        margin: 9px 0 12px;
        font-size: .8rem;
        line-height: 1.32;
    }

    .auth-benefits li {
        min-height: 42px;
        grid-template-columns: 34px minmax(0, 1fr);
        padding-block: 5px;
    }

    .auth-benefits__icon {
        width: 34px;
        height: 34px;
    }

    .auth-benefits small,
    .auth-product__trust {
        display: none;
    }

    .auth-access {
        padding-block: 12px 10px;
    }

    .auth-access__content {
        padding-block: 7px;
    }

    .auth-form-heading {
        margin-bottom: 10px;
    }

    .auth-form-heading p,
    .auth-access__content > .muted {
        margin-top: 4px;
        line-height: 1.3;
    }

    .auth-login-form,
    .auth-form {
        gap: 8px;
    }

    .auth-security-note {
        margin-top: 7px;
    }
}

/* Tablet: duas faixas proporcionais, sem somar alturas mínimas maiores que a tela. */
@media (min-width: 641px) and (max-width: 1100px) {
    .auth-shell {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: clamp(178px, 29vh, 250px) minmax(0, 1fr);
    }

    .auth-product,
    .auth-access {
        min-height: 0;
    }

    .auth-product {
        align-items: center;
        padding:
            14px
            clamp(30px, 6vw, 64px);
    }

    .auth-product__brand {
        margin-bottom: 8px;
    }

    .auth-product__mark {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .auth-product__eyebrow,
    .auth-benefits,
    .auth-product__trust {
        display: none;
    }

    .auth-product h1 {
        max-width: 760px;
        font-size: clamp(2rem, min(5vw, 5.2vh), 2.9rem);
        line-height: 1.02;
    }

    .auth-product__lead {
        max-width: 760px;
        margin: 7px 0 0;
        font-size: clamp(.84rem, 1.8vw, 1rem);
        line-height: 1.4;
    }

    .auth-access {
        min-height: 0;
        padding:
            clamp(12px, 2.4vh, 22px)
            clamp(34px, 8vw, 86px)
            clamp(10px, 2vh, 20px);
    }

    .auth-access__content {
        padding-block: clamp(8px, 2.5vh, 24px);
    }

    .auth-footer {
        font-size: .68rem;
    }
}

/* Celular: topo e painel dividem exatamente a altura visível. */
@media (max-width: 640px) {
    .guest-body.auth-experience {
        overflow: hidden;
    }

    .auth-shell {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: clamp(208px, 26vh, 216px) minmax(0, 1fr);
    }

    .auth-product {
        min-height: 0;
        padding:
            18px
            clamp(16px, 5.5vw, 22px);
    }

    .auth-product__brand {
        margin-bottom: clamp(6px, 1.3vh, 12px);
    }

    .auth-product__mark {
        width: clamp(36px, 5.4vh, 42px);
        height: clamp(36px, 5.4vh, 42px);
    }

    .auth-product h1 {
        font-size: clamp(1.42rem, min(7vw, 4.3vh), 2rem);
        line-height: 1.02;
    }

    .auth-product__lead {
        margin-top: clamp(5px, 1.3vh, 10px);
        margin-bottom: 0;
        font-size: clamp(.72rem, min(3.5vw, 1.8vh), .86rem);
        line-height: 1.35;
    }

    .auth-access {
        min-height: 0;
        padding:
            clamp(10px, 2vh, 18px)
            clamp(16px, 5.5vw, 22px)
            max(9px, env(safe-area-inset-bottom));
        border-radius: clamp(20px, 3.5vh, 28px) clamp(20px, 3.5vh, 28px) 0 0;
    }

    .auth-language {
        margin-bottom: 0;
    }

    .auth-language a {
        width: 38px;
        min-width: 38px;
        height: 32px;
        min-height: 32px;
    }

    .auth-access__content {
        padding-block: clamp(7px, 2.1vh, 20px);
    }

    .auth-form-heading {
        margin-bottom: clamp(10px, 2vh, 18px);
    }

    .auth-form-heading h2,
    .auth-access__content > h2 {
        font-size: clamp(1.48rem, min(7vw, 4vh), 1.86rem);
    }

    .auth-form-heading p,
    .auth-access__content > .muted {
        font-size: clamp(.76rem, 3.5vw, .86rem);
    }

    .auth-login-form,
    .auth-form {
        gap: clamp(8px, 1.7vh, 13px);
    }

    .auth-input-group input,
    .auth-form input {
        min-height: clamp(46px, 6.5vh, 52px);
        font-size: 16px;
    }

    .auth-submit {
        min-height: clamp(46px, 6.5vh, 52px);
    }

    .auth-security-note {
        margin-top: clamp(7px, 1.5vh, 12px);
        font-size: clamp(.65rem, 2.8vw, .72rem);
    }

    .auth-footer {
        flex-direction: row;
        gap: 10px;
        font-size: clamp(.62rem, 2.6vw, .69rem);
        text-align: left;
    }

    .auth-footer nav {
        flex-wrap: nowrap;
        gap: 10px;
    }
}

/* Telefones baixos, modo paisagem e viewport reduzida pelo teclado. */
@media (max-width: 640px) and (max-height: 700px) {
    .auth-shell {
        grid-template-rows: clamp(100px, 20vh, 132px) minmax(0, 1fr);
    }

    .auth-product {
        padding-block: 12px;
    }

    .auth-product__brand {
        margin-bottom: 6px;
    }

    .auth-product__brand small,
    .auth-product__lead {
        display: none;
    }

    .auth-product h1 {
        font-size: clamp(1.3rem, min(6.5vw, 3.8vh), 1.65rem);
    }

    .auth-access {
        padding-block: 8px max(7px, env(safe-area-inset-bottom));
    }

    .auth-access__content {
        padding-block: 5px;
    }

    .auth-form-heading {
        margin-bottom: 8px;
    }

    .auth-form-heading p,
    .auth-access__content > .muted {
        display: none;
    }

    .auth-login-form,
    .auth-form {
        gap: 7px;
    }

    .auth-security-note {
        margin-top: 6px;
    }

    .auth-footer {
        font-size: .61rem;
    }
}

@media (max-width: 640px) and (max-height: 560px) {
    .auth-shell {
        grid-template-rows: 92px minmax(0, 1fr);
    }

    .auth-product__brand {
        margin-bottom: 3px;
    }

    .auth-product__mark {
        width: 34px;
        height: 34px;
    }

    .auth-product__name {
        font-size: 1rem;
    }

    .auth-product h1 {
        font-size: 1.2rem;
    }

    .auth-language a {
        height: 29px;
        min-height: 29px;
    }

    .auth-form-eyebrow,
    .auth-security-note,
    .auth-footer > span {
        display: none;
    }

    .auth-form-heading h2,
    .auth-access__content > h2 {
        margin-top: 0;
        font-size: 1.4rem;
    }

    .auth-input-group input,
    .auth-form input,
    .auth-submit {
        min-height: 44px;
    }

    .auth-footer {
        justify-content: center;
    }
}

@media (max-height: 430px) and (orientation: landscape) {
    .auth-shell {
        grid-template-columns: minmax(190px, .74fr) minmax(0, 1.26fr);
        grid-template-rows: 1fr;
    }

    .auth-product {
        padding: 14px 18px;
        border-radius: 0;
    }

    .auth-product__brand {
        margin-bottom: 8px;
    }

    .auth-product__brand small,
    .auth-product__lead,
    .auth-product__eyebrow,
    .auth-benefits,
    .auth-product__trust {
        display: none;
    }

    .auth-product h1 {
        font-size: clamp(1.25rem, 3.6vw, 1.75rem);
    }

    .auth-access {
        padding: 8px 18px 7px;
        border-radius: 0;
    }

    .auth-access__content {
        width: min(390px, 100%);
        padding-block: 3px;
    }

    .auth-form-heading {
        margin-bottom: 5px;
    }

    .auth-form-eyebrow,
    .auth-form-heading p,
    .auth-security-note,
    .auth-footer {
        display: none;
    }

    .auth-form-heading h2,
    .auth-access__content > h2 {
        margin-top: 0;
        font-size: 1.25rem;
    }

    .auth-login-form,
    .auth-form {
        gap: 5px;
    }

    .auth-input-group label,
    .auth-form label {
        font-size: .75rem;
    }

    .auth-input-group input,
    .auth-form input,
    .auth-submit {
        min-height: 40px;
    }
}
