*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
    display: block;
}


.login-left, .login-card {
    max-width: 100%;
}


.k-textbox, .k-input, .k-dropdownlist, .k-combobox {
    font-size: 16px;
}


.login-left, .login-card {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.login-layout {
    padding: 0 16px;
}

@media (max-width: 1024px) {
    .login-layout {
        grid-template-columns: 1fr 1fr; 
        gap: 20px;
        margin: 20px auto;
        max-width: 980px;
        padding: 0 14px;
    }

    .login-left {
        padding: 20px;
    }

    .login-left__title {
        font-size: 22px;
    }

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

    .login-left__benefits li {
        font-size: 14px;
    }

    .login-card {
        padding: 24px 20px;
    }

    .login-card__title {
        font-size: 21px;
    }
}

@media (max-width: 768px) {
    .login-layout {
        grid-template-columns: 1fr; 
        gap: 14px;
        margin: 16px auto;
        max-width: 640px; 
        padding: 0 12px;
    }


    .login-left {
        padding: 18px;
    }

    .login-card {
        padding: 20px 16px;
    }


    .login-left__title {
        font-size: 20px;
    }

    .login-left__subtitle {
        font-size: 13.5px;
    }

    .login-left__benefits li {
        font-size: 13.5px;
    }

    .login-card__title {
        font-size: 19px;
    }

    .login-card__desc {
        font-size: 13.5px;
    }


    .login-links {
        font-size: 13.5px;
    }
}

@media (max-width: 420px) {
    .login-layout {
        max-width: 100%;
        padding: 0 10px;
    }

    .login-left {
        padding: 16px;
    }

    .login-card {
        padding: 18px 14px;
    }
}



@media (max-width: 768px) {
    .login-layout.login-layout {
        display: grid;
        grid-template-columns: 1fr !important; 
        gap: 20px !important; 
        margin: 16px auto;
        padding: 0 12px;
        max-width: 100%;
    }


}


@media (max-width: 1024px) {

    .k-dialog,
    .k-window {
        width: clamp(320px, 92vw, 520px) !important;
        max-width: 92vw !important;
        margin: 0 12px !important;
        border-radius: 12px;
        box-shadow: 0 14px 36px rgba(0,0,0,.18);
    }

     
        .k-dialog .k-dialog-titlebar,
        .k-window .k-window-titlebar {
            padding: 10px 16px;
        }

        .k-dialog .k-dialog-content,
        .k-window .k-window-content {
            padding: 14px 18px;
            overflow: auto;
            max-height: calc(100vh - 160px);
            line-height: 1.45;
        }

       
        .k-dialog .k-actions,
        .k-window .k-actions {
            padding: 10px 16px;
            gap: 10px;
            justify-content: flex-end;
        }

            .k-dialog .k-actions .k-button,
            .k-window .k-actions .k-button {
                min-height: 40px;
                min-width: 120px;
            }
}


@media (max-width: 768px) {


    html, body, .page,
    .site-header, .site-header__bar, .site-header__titulo,
    main, .login-layout,
    .site-footer, .site-footer__content, .site-footer__bottom {
        max-width: 100vw;
        overflow-x: clip;
    }

    img, svg {
        max-width: 100%;
        height: auto;
    }


    .footer-col--brand img {
        height: auto; 
        max-height: 300px; 
        width: 100%; 
    }


    .login-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin: 16px auto;
        padding: 0 12px;
    }


    .k-animation-container,
    .k-animation-container-shown {
        max-width: 100vw !important;
        overflow-x: auto; 
    }

    .k-dialog, .k-window {
        max-width: 92vw !important;
    }

    .login-left, .login-card, .site-footer__content {
        overflow-wrap: anywhere;
        word-break: break-word;
    }


    .site-header__bar,
    .site-header__titulo,
    .site-footer__bottom {
        padding-left: 10px;
        padding-right: 10px;
    }


}