/* Link institucional acima do card de login
   Mantém o card centralizado verticalmente e alinha o final do link
   com a lateral direita do card. */
.login-side {
    position: relative;
}

.login-demo-access {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: min(100%, 430px);
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0 2px;
    pointer-events: none;
}

.login-demo-access__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 34px;
    padding: 4px 0;
    color: #97a3b6;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: "Manrope", "Inter", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 160ms ease, transform 160ms ease, color 160ms ease;
    pointer-events: auto;
}

.login-demo-access__link svg {
    display: none;
}

.login-demo-access__link::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #38b6ff;
    box-shadow:
        0 0 0 0 rgba(56, 182, 255, 0.75),
        0 0 12px rgba(56, 182, 255, 0.65);
    animation: gex-login-demo-pulse 1.8s ease-out infinite;
    flex: 0 0 auto;
}

.login-demo-access__link:hover,
.login-demo-access__link:focus-visible {
    color: #b2bcc9;
    opacity: 1;
    transform: translateY(-1px);
}

.login-demo-access__link:focus-visible {
    outline: 2px solid rgba(56, 182, 255, 0.28);
    outline-offset: 4px;
    border-radius: 6px;
}

@keyframes gex-login-demo-pulse {
    0% {
        transform: scale(0.95);
        box-shadow:
            0 0 0 0 rgba(56, 182, 255, 0.78),
            0 0 12px rgba(56, 182, 255, 0.65);
    }
    70% {
        transform: scale(1);
        box-shadow:
            0 0 0 10px rgba(56, 182, 255, 0),
            0 0 18px rgba(56, 182, 255, 0.4);
    }
    100% {
        transform: scale(0.95);
        box-shadow:
            0 0 0 0 rgba(56, 182, 255, 0),
            0 0 12px rgba(56, 182, 255, 0.3);
    }
}

@media (min-width: 769px) {
    .login-side {
        --recuo-direita: 29px;
        padding-right: 0 !important;
    }

    .login-card {
        position: relative;
        left: auto !important;
        margin-left: auto !important;
        margin-right: var(--recuo-direita) !important;
    }

    .login-demo-access {
        left: auto !important;
        right: var(--recuo-direita) !important;
        transform: none !important;
        width: min(100%, 430px);
        justify-content: flex-end;
    }
}



/* 2026-08-03 - mobile: link no topo, fora do card e alinhado à direita */
@media (max-width: 768px) {
    .login-side {
        position: relative !important;
        padding-top: 2.35rem !important;
    }

    .login-demo-access {
        display: flex !important;
        position: absolute !important;
        top: .35rem !important;
        right: .9rem !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: calc(100% - 1.8rem) !important;
        justify-content: flex-end !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 50 !important;
    }

    .login-demo-access__link {
        min-height: 28px !important;
        padding: 2px 0 !important;
        color: rgba(255,255,255,.92) !important;
        font-size: .72rem !important;
        text-shadow: 0 1px 3px rgba(0,28,68,.45);
    }

    .login-demo-access__link::before {
        width: 7px !important;
        height: 7px !important;
    }
}

/* 2026-08-03 - ajuste final somente mobile: logo interna mantida, logo externa oculta e link no rodapé */
@media (max-width: 768px) {
    .login-layout {
        position: relative !important;
        min-height: 100dvh !important;
        padding-bottom: 2.7rem !important;
    }

    /* Mantém os textos institucionais no topo, mas remove apenas a logo externa. */
    .showcase-logo-mobile {
        display: none !important;
    }

    .login-showcase {
        min-height: 190px !important;
        padding-top: max(.85rem, env(safe-area-inset-top)) !important;
        padding-bottom: 2.35rem !important;
    }

    .showcase-kicker {
        margin-bottom: .5rem !important;
    }

    .showcase-copy h1 {
        margin-top: 0 !important;
    }

    /* Sobe levemente o card aproveitando o espaço deixado pela logo externa. */
    .login-side {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin-top: -3.65rem !important;
        padding-top: 0 !important;
        padding-bottom: 3.2rem !important;
    }

    .login-card,
    .login-card--selection {
        order: 1 !important;
        margin-top: 0 !important;
    }

    /* Garante que a logo dentro do card permaneça visível. */
    .login-card__logo-wrap {
        display: inline-flex !important;
    }

    .login-card__logo {
        display: block !important;
    }

    /* Link fora do card, quase encostado no final da página. */
    .login-demo-access {
        display: flex !important;
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: max(.38rem, env(safe-area-inset-bottom)) !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        max-width: calc(100vw - 1.4rem) !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 80 !important;
    }

    .login-demo-access__link {
        min-height: 26px !important;
        padding: 2px .25rem !important;
        color: rgba(255,255,255,.92) !important;
        font-size: .72rem !important;
        text-shadow: 0 1px 3px rgba(0,28,68,.46) !important;
    }

    .login-demo-access__link::before {
        width: 7px !important;
        height: 7px !important;
    }
}

@media (max-width: 390px) {
    .login-showcase {
        min-height: 168px !important;
        padding-bottom: 2.05rem !important;
    }

    .login-side {
        margin-top: -3.25rem !important;
    }
}


/* 2026-08-03 - mobile responsivo também pela altura útil da tela */
@media (max-width: 768px) {
    html,
    body.login-page {
        min-height: 100%;
    }

    body.login-page {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .login-layout {
        min-height: 100svh !important;
        min-height: 100dvh !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        align-content: start !important;
        padding-bottom: calc(2.35rem + env(safe-area-inset-bottom)) !important;
    }

    .login-showcase {
        min-height: 0 !important;
        height: auto !important;
        padding:
            max(.62rem, env(safe-area-inset-top))
            .9rem
            .95rem !important;
    }

    .showcase-content {
        min-height: 0 !important;
    }

    .showcase-kicker {
        margin: 0 0 .28rem !important;
        font-size: clamp(.63rem, 2.5vw, .76rem) !important;
        line-height: 1.2 !important;
    }

    .showcase-copy {
        margin-top: 0 !important;
    }

    .showcase-copy h1 {
        margin: 0 !important;
        font-size: clamp(1.28rem, 6vw, 1.75rem) !important;
        line-height: .98 !important;
    }

    .showcase-copy h2 {
        margin: .2rem 0 0 !important;
        font-size: clamp(.76rem, 3.2vw, .98rem) !important;
        line-height: 1.08 !important;
    }

    .showcase-copy p {
        margin: .24rem auto 0 !important;
        max-width: 310px !important;
        font-size: clamp(.62rem, 2.45vw, .73rem) !important;
        line-height: 1.22 !important;
    }

    .login-side {
        min-height: 0 !important;
        margin-top: 0 !important;
        padding:
            0
            .75rem
            calc(2.1rem + env(safe-area-inset-bottom)) !important;
        justify-content: flex-start !important;
    }

    .login-card,
    .login-card--selection {
        width: min(100%, 390px) !important;
        margin-top: 0 !important;
        padding: clamp(.86rem, 3.4vw, 1.12rem) !important;
    }

    .login-card__logo-wrap {
        margin-bottom: .4rem !important;
    }

    .login-card__logo {
        width: clamp(72px, 22vw, 96px) !important;
        height: auto !important;
    }

    .login-card__header {
        margin-bottom: .62rem !important;
    }

    .login-card__header h3 {
        font-size: clamp(.9rem, 3.8vw, 1.08rem) !important;
    }

    .login-card__header p {
        font-size: clamp(.67rem, 2.7vw, .78rem) !important;
    }

    .login-form,
    .form-stack {
        gap: .52rem !important;
    }

    .login-card .field input {
        min-height: 42px !important;
        padding-block: .62rem !important;
    }

    .login-card .button {
        min-height: 42px !important;
    }

    .login-card__footer {
        margin-top: .62rem !important;
        padding-top: .58rem !important;
    }

    .login-demo-access {
        bottom: max(.18rem, env(safe-area-inset-bottom)) !important;
    }
}

/* Celulares baixos: preserva os textos superiores e compacta o card sem exigir zoom. */
@media (max-width: 768px) and (max-height: 760px) {
    .login-showcase {
        padding-top: max(.42rem, env(safe-area-inset-top)) !important;
        padding-bottom: .58rem !important;
    }

    .showcase-kicker {
        margin-bottom: .16rem !important;
        font-size: .62rem !important;
    }

    .showcase-copy h1 {
        font-size: 1.22rem !important;
    }

    .showcase-copy h2 {
        margin-top: .12rem !important;
        font-size: .75rem !important;
    }

    .showcase-copy p {
        margin-top: .14rem !important;
        font-size: .6rem !important;
        line-height: 1.15 !important;
    }

    .login-card,
    .login-card--selection {
        padding: .76rem .82rem !important;
    }

    .login-card__logo {
        width: 68px !important;
    }

    .login-card__logo-wrap {
        margin-bottom: .26rem !important;
    }

    .login-card__header {
        margin-bottom: .44rem !important;
    }

    .login-card__header h3 {
        font-size: .88rem !important;
    }

    .login-card__header p {
        font-size: .65rem !important;
    }

    .login-form,
    .form-stack {
        gap: .42rem !important;
    }

    .login-card .field input,
    .login-card .button {
        min-height: 38px !important;
    }

    .login-card__footer {
        margin-top: .44rem !important;
        padding-top: .42rem !important;
    }
}

/* Alturas muito reduzidas: mantém título institucional e evita sumiço do topo. */
@media (max-width: 768px) and (max-height: 640px) {
    .showcase-copy h2,
    .showcase-copy p {
        display: none !important;
    }

    .login-showcase {
        padding-bottom: .42rem !important;
    }

    .showcase-copy h1 {
        font-size: 1.08rem !important;
        line-height: 1 !important;
    }

    .login-card__logo {
        width: 60px !important;
    }

    .login-card,
    .login-card--selection {
        padding: .66rem .74rem !important;
    }

    .login-card .field input,
    .login-card .button {
        min-height: 36px !important;
    }

    .login-card__footer small {
        font-size: .56rem !important;
    }
}


/* 2026-08-03 - ajuste final mobile: distribuição vertical e alinhamento do card */
@media (max-width: 768px) {
    .login-layout {
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding-bottom: calc(2.8rem + env(safe-area-inset-bottom)) !important;
    }

    .login-showcase {
        flex: 0 0 auto !important;
        min-height: 124px !important;
        padding: max(.62rem, env(safe-area-inset-top)) .9rem .52rem !important;
    }

    .showcase-content {
        display: grid !important;
        place-items: center !important;
        gap: .2rem !important;
        text-align: center !important;
    }

    .showcase-kicker {
        margin: 0 !important;
        font-size: clamp(.62rem, 2.3vw, .72rem) !important;
    }

    .showcase-copy h1 {
        font-size: clamp(1.22rem, 5.5vw, 1.55rem) !important;
        line-height: 1 !important;
    }

    .showcase-copy h2 {
        margin-top: .16rem !important;
        font-size: clamp(.76rem, 3vw, .9rem) !important;
    }

    .showcase-copy p {
        margin-top: .15rem !important;
        font-size: clamp(.6rem, 2.3vw, .69rem) !important;
    }

    .login-side {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding: .2rem .75rem calc(2.6rem + env(safe-area-inset-bottom)) !important;
    }

    .login-card,
    .login-card--selection {
        width: min(calc(100% - .25rem), 390px) !important;
        margin: 0 auto !important;
        padding: clamp(.9rem, 3.6vw, 1.18rem) !important;
    }

    .login-card__logo-wrap {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto .5rem !important;
    }

    .login-card__logo {
        display: block !important;
        width: clamp(92px, 27vw, 118px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .login-card__header {
        text-align: center !important;
        margin-bottom: .7rem !important;
    }

    .login-card__header h3 {
        margin: 0 !important;
        font-size: clamp(.98rem, 4vw, 1.12rem) !important;
    }

    .login-card__header p {
        margin-top: .18rem !important;
        font-size: clamp(.68rem, 2.7vw, .78rem) !important;
    }

    .login-demo-access {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        bottom: max(.38rem, env(safe-area-inset-bottom)) !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        max-width: calc(100% - 1rem) !important;
        margin: 0 !important;
        z-index: 50 !important;
    }

    .login-demo-access__link {
        white-space: nowrap !important;
        font-size: clamp(.7rem, 2.8vw, .8rem) !important;
    }
}

/* Samsung A52s e aparelhos de altura semelhante: ocupa a tela sem esconder o topo. */
@media (max-width: 768px) and (min-height: 700px) and (max-height: 900px) {
    .login-showcase {
        min-height: 116px !important;
        padding-bottom: .42rem !important;
    }

    .login-side {
        padding-top: 0 !important;
    }

    .login-card__logo {
        width: clamp(96px, 28vw, 116px) !important;
    }
}

@media (max-width: 768px) and (max-height: 699px) {
    .login-showcase {
        min-height: 92px !important;
        padding-top: max(.38rem, env(safe-area-inset-top)) !important;
        padding-bottom: .25rem !important;
    }

    .showcase-copy p {
        display: none !important;
    }

    .login-card__logo {
        width: 82px !important;
    }

    .login-card,
    .login-card--selection {
        padding: .72rem .8rem !important;
    }
}


/* 2026-08-03 - ajuste pontual sobre a versão A52s aprovada */
@media (max-width: 768px) {
    /* Desce somente o conteúdo institucional superior, sem alterar a estrutura do card. */
    .login-showcase .showcase-content {
        transform: translateY(2.15rem) !important;
    }

    /* Usuário e senha com altura rigorosamente idêntica. */
    .login-card .field input,
    .login-card .password-input input,
    .login-card input[type="text"],
    .login-card input[type="email"],
    .login-card input[type="password"] {
        box-sizing: border-box !important;
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-radius: 10px !important;
    }
}

@media (max-width: 768px) and (max-height: 699px) {
    .login-showcase .showcase-content {
        transform: translateY(1.35rem) !important;
    }

    .login-card .field input,
    .login-card .password-input input,
    .login-card input[type="text"],
    .login-card input[type="email"],
    .login-card input[type="password"] {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
    }
}


/* 2026-08-03 - garante o texto superior visível em 100% de zoom no mobile */
@media (max-width: 768px) {
    .login-showcase {
        min-height: 154px !important;
        padding-top: max(2.05rem, env(safe-area-inset-top)) !important;
        padding-bottom: .48rem !important;
        overflow: visible !important;
    }

    .login-showcase .showcase-content {
        transform: none !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .login-side {
        flex: 0 0 auto !important;
        min-height: 0 !important;
    }
}

/* A52s e telas com altura útil reduzida pelo navegador: mantém o topo visível sem exigir zoom. */
@media (max-width: 768px) and (max-height: 760px) {
    .login-showcase {
        min-height: 132px !important;
        padding-top: max(1.45rem, env(safe-area-inset-top)) !important;
        padding-bottom: .35rem !important;
    }

    .showcase-copy h1 {
        font-size: 1.2rem !important;
    }

    .showcase-copy h2 {
        font-size: .74rem !important;
    }

    .showcase-copy p {
        font-size: .6rem !important;
    }

    .login-card,
    .login-card--selection {
        padding-top: .82rem !important;
        padding-bottom: .82rem !important;
    }
}

@media (max-width: 768px) and (max-height: 650px) {
    .login-showcase {
        min-height: 104px !important;
        padding-top: max(.9rem, env(safe-area-inset-top)) !important;
    }

    .showcase-copy h2,
    .showcase-copy p {
        display: none !important;
    }
}


/* 2026-08-03 - mobile: desce textos superiores e card aproximadamente 3 linhas */
@media (max-width: 768px) {
    .login-layout {
        box-sizing: border-box !important;
        padding-top: calc(48px + env(safe-area-inset-top)) !important;
    }

    .login-showcase {
        padding-top: 0 !important;
    }

    body.login-page {
        overflow-y: auto !important;
    }
}

/* Em telas mais baixas mantém o mesmo deslocamento, permitindo rolagem natural quando necessário. */
@media (max-width: 768px) and (max-height: 760px) {
    .login-layout {
        padding-top: calc(44px + env(safe-area-inset-top)) !important;
    }
}


/* 2026-08-03 - mobile: usuário e senha com a mesma altura visual */
@media (max-width: 768px) {
    .login-card .field--minimal {
        margin: 0 !important;
    }

    .login-card .field--minimal > input,
    .login-card .field--minimal > .password-field {
        box-sizing: border-box !important;
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        border-radius: 10px !important;
    }

    .login-card .password-field {
        position: relative !important;
        display: flex !important;
        align-items: stretch !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .login-card .password-field > input {
        box-sizing: border-box !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-right: 3rem !important;
        border-radius: 10px !important;
    }

    .login-card .password-field .password-toggle {
        position: absolute !important;
        top: 50% !important;
        right: .72rem !important;
        transform: translateY(-50%) !important;
        width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 768px) and (max-height: 699px) {
    .login-card .field--minimal > input,
    .login-card .field--minimal > .password-field {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
    }
}

/* 2026-08-03 - correção definitiva mobile: textos superiores sempre visíveis */
@media (max-width: 768px) {
    body.login-page {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .login-layout {
        box-sizing: border-box !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
        padding-top: 0 !important;
        padding-bottom: calc(2.4rem + env(safe-area-inset-bottom)) !important;
        display: grid !important;
        grid-template-rows: 168px auto !important;
        align-content: start !important;
    }

    .login-showcase {
        box-sizing: border-box !important;
        min-height: 168px !important;
        height: 168px !important;
        padding: calc(2.1rem + env(safe-area-inset-top)) .9rem .45rem !important;
        overflow: visible !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    .login-showcase .showcase-content {
        position: relative !important;
        z-index: 5 !important;
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .showcase-kicker,
    .showcase-copy,
    .showcase-copy h1,
    .showcase-copy h2,
    .showcase-copy p {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .showcase-kicker {
        margin: 0 0 .28rem !important;
        font-size: .66rem !important;
        line-height: 1.15 !important;
    }

    .showcase-copy {
        margin: 0 !important;
    }

    .showcase-copy h1 {
        margin: 0 !important;
        font-size: 1.32rem !important;
        line-height: 1 !important;
    }

    .showcase-copy h2 {
        margin: .18rem 0 0 !important;
        font-size: .78rem !important;
        line-height: 1.08 !important;
    }

    .showcase-copy p {
        margin: .18rem auto 0 !important;
        max-width: 300px !important;
        font-size: .62rem !important;
        line-height: 1.16 !important;
    }

    .login-side {
        min-height: 0 !important;
        margin-top: -1.4rem !important;
        padding-top: 0 !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 768px) and (max-height: 699px) {
    .login-layout {
        grid-template-rows: 148px auto !important;
    }

    .login-showcase {
        min-height: 148px !important;
        height: 148px !important;
        padding-top: calc(1.35rem + env(safe-area-inset-top)) !important;
    }

    .showcase-copy h1 {
        font-size: 1.18rem !important;
    }

    .showcase-copy h2 {
        font-size: .72rem !important;
    }

    .showcase-copy p {
        display: block !important;
        font-size: .58rem !important;
    }

    .login-side {
        margin-top: -1rem !important;
    }
}


/* 2026-08-03 - mobile: distribuição vertical final sem alterar o desktop */
@media (max-width: 768px) {
    .login-layout {
        position: relative !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
        display: block !important;
        padding: 0 0 calc(5.2rem + env(safe-area-inset-bottom)) !important;
    }

    .login-showcase {
        height: auto !important;
        min-height: 0 !important;
        padding:
            calc(3.2rem + env(safe-area-inset-top))
            .9rem
            0 !important;
        display: block !important;
    }

    .login-showcase .showcase-content {
        width: 100% !important;
        text-align: center !important;
    }

    .showcase-kicker {
        margin: 0 0 .34rem !important;
    }

    .showcase-copy h1 {
        margin-top: .08rem !important;
    }

    .showcase-copy h2 {
        margin-top: .24rem !important;
    }

    /* O texto explicativo passa para o rodapé, logo acima do link institucional. */
    .showcase-copy p {
        position: fixed !important;
        left: 50% !important;
        bottom: calc(2.25rem + env(safe-area-inset-bottom)) !important;
        transform: translateX(-50%) !important;
        width: min(88vw, 330px) !important;
        max-width: 330px !important;
        margin: 0 !important;
        color: rgba(255,255,255,.78) !important;
        font-size: .62rem !important;
        line-height: 1.28 !important;
        text-align: center !important;
        text-shadow: 0 1px 3px rgba(0,25,60,.34) !important;
        z-index: 45 !important;
    }

    .login-side {
        min-height: calc(100svh - 11.5rem) !important;
        min-height: calc(100dvh - 11.5rem) !important;
        margin: 0 !important;
        padding: .5rem .75rem 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .login-card,
    .login-card--selection {
        margin: 0 auto !important;
    }

    .login-demo-access {
        bottom: max(.35rem, env(safe-area-inset-bottom)) !important;
    }
}

/* Telas mobile mais baixas: mantém o card centralizado e evita sobreposição com o rodapé. */
@media (max-width: 768px) and (max-height: 699px) {
    .login-showcase {
        padding-top: calc(2.35rem + env(safe-area-inset-top)) !important;
    }

    .login-side {
        min-height: calc(100svh - 9.8rem) !important;
        min-height: calc(100dvh - 9.8rem) !important;
        padding-top: .25rem !important;
    }

    .showcase-copy p {
        bottom: calc(2.05rem + env(safe-area-inset-bottom)) !important;
        font-size: .58rem !important;
    }
}


/* 2026-08-03 - mobile: bloco superior e card centralizados, sem texto explicativo */
@media (max-width: 768px) {
    .login-layout {
        min-height: 100svh !important;
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: .72rem !important;
        padding:
            max(.8rem, env(safe-area-inset-top))
            .75rem
            calc(3.4rem + env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
    }

    .login-showcase {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .login-showcase .showcase-content {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .showcase-kicker {
        margin: 0 0 .24rem !important;
    }

    .showcase-copy h1 {
        margin: 0 !important;
    }

    .showcase-copy h2 {
        margin: .18rem 0 0 !important;
    }

    .showcase-copy p {
        display: none !important;
        position: static !important;
    }

    .login-side {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .login-card,
    .login-card--selection {
        margin: 0 auto !important;
    }

    .login-demo-access {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        bottom: max(.35rem, env(safe-area-inset-bottom)) !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
    }
}

@media (max-width: 768px) and (max-height: 699px) {
    .login-layout {
        gap: .58rem !important;
        padding-top: max(.55rem, env(safe-area-inset-top)) !important;
        padding-bottom: calc(3rem + env(safe-area-inset-bottom)) !important;
    }
}


/* 2026-08-03 - mobile: título em uma linha e bloco superior junto ao card */
@media (max-width: 768px) {
    .login-layout {
        justify-content: center !important;
        gap: .14rem !important;
    }

    .login-showcase {
        flex: 0 0 auto !important;
    }

    .showcase-copy h1 {
        white-space: nowrap !important;
        font-size: clamp(1rem, 5.05vw, 1.34rem) !important;
        line-height: 1.05 !important;
        margin: 0 !important;
    }

    .showcase-copy h1 br {
        display: none !important;
    }

    .showcase-copy h1 br::after {
        content: " ";
    }

    .showcase-copy h2 {
        margin-top: .1rem !important;
    }

    .login-side {
        margin-top: 0 !important;
    }
}

@media (max-width: 380px) {
    .showcase-copy h1 {
        font-size: .98rem !important;
        letter-spacing: -.025em !important;
    }
}

@media (max-width: 768px) and (max-height: 699px) {
    .login-layout {
        gap: .1rem !important;
    }
}