:root {
    --lmd-bg-dark: #031525;
    --lmd-bg-dark-2: #082b4b;
    --lmd-blue: #146fe0;
    --lmd-blue-hover: #0e60c8;
    --lmd-blue-soft: #e8f2ff;

    --text-main: #13253f;
    --text-muted: #66768b;
    --text-light: #d7e6f3;

    --surface: #ffffff;
    --surface-page: #f3f7fa;
    --border: #d7e1eb;

    --danger-bg: #fff2f1;
    --danger-border: #efb9b3;
    --danger-text: #922f28;

    --radius-card: 24px;
    --radius-control: 11px;

    --shadow-card:
        0 24px 70px rgba(10, 40, 72, .15);

    --focus:
        0 0 0 4px rgba(20, 111, 224, .15);
}

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

html,
body {
    min-height: 100%;
}

html {
    background: var(--surface-page);
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;

    color: var(--text-main);

    font-family:
        "Segoe UI Variable",
        "Segoe UI",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: var(--surface-page);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input {
    font: inherit;
}

/* ==========================================================
   ESTRUTURA PRINCIPAL — 60 / 40
   ========================================================== */

.login-page {
    width: 100%;
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(0, 3fr)
        minmax(380px, 2fr);
}

/* ==========================================================
   PAINEL INSTITUCIONAL — 60%
   ========================================================== */

.login-hero {
    position: relative;

    min-width: 0;
    min-height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: #fff;

    background:
        radial-gradient(
            circle at 82% 23%,
            rgba(41, 137, 255, .25),
            transparent 27%
        ),
        radial-gradient(
            circle at 18% 81%,
            rgba(33, 111, 201, .18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--lmd-bg-dark) 0%,
            #041c32 48%,
            var(--lmd-bg-dark-2) 100%
        );
}

.login-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .24;

    background-image:
        linear-gradient(
            rgba(88, 166, 247, .11) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(88, 166, 247, .08) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
}

.login-hero::after {
    content: "";

    position: absolute;

    right: -310px;
    bottom: -410px;

    width: 760px;
    height: 760px;

    border:
        1px solid
        rgba(74, 160, 255, .20);

    border-radius: 50%;

    box-shadow:
        0 0 0 95px rgba(50, 145, 255, .024),
        0 0 0 190px rgba(50, 145, 255, .020);

    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;

    width: min(84%, 680px);

    margin-left:
        clamp(48px, 7vw, 118px);

    padding:
        clamp(48px, 7vh, 74px)
        0;
}

/* ==========================================================
   MARCA
   ========================================================== */

.hero-brand {
    min-height: 88px;

    display: flex;
    align-items: center;

    margin-bottom:
        clamp(38px, 5vh, 54px);
}

.hero-brand__image {
    display: block;

    width: auto;
    max-width: 220px;
    max-height: 98px;

    object-fit: contain;
}

.brand-fallback {
    display: inline-flex;
    flex-direction: column;

    line-height: 1;
}

.brand-fallback__main {
    display: flex;
    align-items: flex-start;

    color: #f0f7ff;

    font-size:
        clamp(46px, 4vw, 61px);

    font-weight: 900;

    letter-spacing: -3.5px;
}

.brand-fallback__dots {
    margin-left: 7px;
    padding-top: 2px;

    color: #bc273c;

    font-size: .39em;
    letter-spacing: 1px;
}

.brand-fallback__sub {
    margin-top: 8px;

    color: rgba(255, 255, 255, .72);

    font-size: 14px;
    font-weight: 750;

    letter-spacing: 6px;
}

/* ==========================================================
   CONTEÚDO INSTITUCIONAL
   ========================================================== */

.hero-eyebrow {
    margin: 0 0 10px;

    color: #63b9ff;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.hero-title {
    max-width: 650px;

    margin: 0 0 14px;

    font-size:
        clamp(40px, 3.8vw, 58px);

    font-weight: 820;

    line-height: 1.04;

    letter-spacing: -1.8px;
}

.hero-title span {
    color: #2b8cff;
}

.hero-subtitle {
    max-width: 590px;

    margin: 0 0 25px;

    color: #e0edf8;

    font-size:
        clamp(18px, 1.45vw, 21px);

    line-height: 1.48;
}

.hero-rule {
    width: 72px;
    height: 4px;

    margin: 0 0 26px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #1775e8,
            #58bcff
        );
}

.hero-copy {
    max-width: 580px;

    margin: 0 0 34px;

    color: rgba(220, 235, 247, .87);

    font-size: 15px;
    line-height: 1.65;
}

/* ==========================================================
   BLOCOS INFORMATIVOS
   ========================================================== */

.hero-features {
    max-width: 570px;

    display: grid;

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

    gap:
        17px
        24px;
}

.hero-feature {
    min-width: 0;

    display: grid;

    grid-template-columns:
        43px
        minmax(0, 1fr);

    gap: 13px;

    align-items: start;
}

.hero-feature__marker {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(87, 168, 255, .52);

    border-radius: 11px;

    color: #72c1ff;

    background:
        rgba(5, 39, 73, .62);

    font-size: 13px;
    font-weight: 850;
}

.hero-feature strong {
    display: block;

    margin:
        1px
        0
        3px;

    color: #fff;

    font-size: 14px;
    font-weight: 740;

    line-height: 1.3;
}

.hero-feature span {
    display: block;

    color: #c7d8e7;

    font-size: 12.5px;
    line-height: 1.45;
}

/* ==========================================================
   PAINEL DE LOGIN — 40%
   ========================================================== */

.login-side {
    position: relative;

    min-width: 0;
    min-height: 100vh;

    display: grid;
    place-items: center;

    overflow: hidden;

    padding:
        clamp(34px, 5vh, 58px)
        clamp(26px, 3.5vw, 60px);

    background:
        radial-gradient(
            circle at 82% 13%,
            rgba(31, 125, 236, .09),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            #fbfcfd,
            #eef4f8
        );
}

.login-side::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .30;

    background-image:
        radial-gradient(
            circle,
            rgba(15, 104, 213, .16) 1px,
            transparent 1.3px
        );

    background-size: 45px 45px;

    mask-image:
        linear-gradient(
            135deg,
            transparent 12%,
            #000 92%
        );
}

/* ==========================================================
   CARD DE LOGIN
   ========================================================== */

.login-card {
    position: relative;
    z-index: 1;

    width: min(100%, 505px);

    padding:
        clamp(34px, 3vw, 46px);

    border:
        1px solid
        rgba(214, 225, 235, .94);

    border-radius:
        var(--radius-card);

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

    box-shadow:
        var(--shadow-card);
}

.login-card__header {
    margin-bottom: 29px;
}

.login-eyebrow {
    margin: 0 0 10px;

    color: var(--lmd-blue);

    font-size: 11.5px;
    font-weight: 850;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}

.login-title {
    margin: 0 0 9px;

    color: #102746;

    font-size:
        clamp(34px, 2.7vw, 42px);

    font-weight: 780;

    line-height: 1.06;

    letter-spacing: -1px;
}

.login-description {
    max-width: 360px;

    margin: 0;

    color: var(--text-muted);

    font-size: 14.5px;
    line-height: 1.5;
}

/* ==========================================================
   ALERTA
   ========================================================== */

.login-alert {
    margin: 0 0 20px;

    padding: 12px 14px;

    border:
        1px solid
        var(--danger-border);

    border-radius: 10px;

    color: var(--danger-text);

    background:
        var(--danger-bg);

    font-size: 13.5px;
    line-height: 1.45;
}

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

.login-form {
    display: grid;
    gap: 19px;
}

.form-field {
    min-width: 0;

    display: grid;
    gap: 7px;
}

.form-label {
    color: #1b304c;

    font-size: 13.5px;
    font-weight: 720;
}

.input-shell {
    position: relative;
    min-width: 0;
}

.form-input {
    width: 100%;
    height: 52px;

    padding:
        0
        15px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-control);

    outline: none;

    color: var(--text-main);

    background: #fff;

    font-size: 15px;

    line-height: 1;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background-color 150ms ease;
}

.form-input::placeholder {
    color: #9ba8b8;
}

.form-input:hover {
    border-color: #b8c6d5;
}

.form-input:focus {
    border-color: var(--lmd-blue);
    box-shadow: var(--focus);
}

.form-input--password {
    padding-right: 82px;
}

.password-toggle {
    position: absolute;

    top: 50%;
    right: 11px;

    transform: translateY(-50%);

    min-height: 34px;

    padding: 0 8px;

    border: 0;
    border-radius: 7px;

    color: #1767bf;

    background: transparent;

    cursor: pointer;

    font-size: 12.5px;
    font-weight: 730;
}

.password-toggle:hover {
    background: #edf5ff;
}

.password-toggle:focus-visible {
    outline:
        2px solid
        var(--lmd-blue);

    outline-offset: 2px;
}

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

.login-button {
    width: 100%;
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 3px;

    border: 0;

    border-radius:
        var(--radius-control);

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #135fc6,
            #1678ee
        );

    box-shadow:
        0 10px 24px
        rgba(20, 103, 207, .22);

    cursor: pointer;

    font-size: 14.5px;
    font-weight: 780;

    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        filter 140ms ease;
}

.login-button:hover {
    filter: brightness(1.035);

    box-shadow:
        0 13px 29px
        rgba(20, 103, 207, .27);
}

.login-button:active {
    transform: translateY(1px);
}

.login-button:focus-visible {
    outline:
        3px solid
        rgba(20, 111, 224, .27);

    outline-offset: 3px;
}

/* ==========================================================
   SEGURANÇA / RODAPÉ
   ========================================================== */

.security-note {
    display: grid;

    grid-template-columns:
        32px
        minmax(0, 1fr);

    gap: 10px;

    align-items: start;

    margin-top: 27px;
    padding-top: 20px;

    border-top:
        1px solid
        #e5ebf1;
}

.security-note__icon {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: var(--lmd-blue);

    background:
        var(--lmd-blue-soft);

    font-size: 14px;
    font-weight: 800;
}

.security-note strong {
    display: block;

    margin-bottom: 2px;

    color: #2a3d56;

    font-size: 12.5px;
}

.security-note p {
    margin: 0;

    color: #788598;

    font-size: 11.5px;
    line-height: 1.5;
}

.login-footer {
    margin: 20px 0 0;

    color: #8996a7;

    text-align: center;

    font-size: 10.5px;

    letter-spacing: .5px;
}

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

@media (max-width: 1050px) {
    .login-page {
        grid-template-columns: 1fr;
    }

    .login-hero {
        min-height: auto;
    }

    .hero-content {
        width: min(88%, 700px);

        margin:
            0
            auto;

        padding:
            54px
            0;
    }

    .hero-features {
        max-width: 650px;
    }

    .login-side {
        min-height: auto;

        padding:
            52px
            22px
            64px;
    }
}

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

@media (max-width: 620px) {
    .hero-content {
        width:
            min(
                calc(100% - 36px),
                560px
            );

        padding:
            40px
            0
            44px;
    }

    .hero-brand {
        min-height: auto;
        margin-bottom: 34px;
    }

    .hero-title {
        font-size: 38px;
    }

    .hero-subtitle {
        font-size: 17px;
    }

    .hero-copy {
        margin-bottom: 29px;

        font-size: 14px;
    }

    .hero-features {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .login-side {
        padding:
            28px
            14px
            44px;
    }

    .login-card {
        padding:
            30px
            22px;

        border-radius: 20px;
    }

    .login-title {
        font-size: 34px;
    }

    .form-input,
    .login-button {
        min-height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================
   LOGOS DO LOGIN — BLOCO CANONICO
   ========================================================== */

.hero-brand {
    min-height: auto;
}

.hero-brand__image {
    display: block;
    width: 300px;
    max-width: 100%;
    max-height: none;
    height: auto;
    object-fit: contain;
}

.login-card__header {
    position: relative;
    padding-right: 145px;
}

.login-card__brand {
    position: absolute;
    top: -2px;
    right: 0;

    width: 122px;

    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.login-card__brand-image {
    display: block;
    width: 122px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 620px) {
    .hero-brand__image {
        width: min(240px, 72vw);
    }

    .login-card__header {
        padding-right: 0;
    }

    .login-card__brand {
        position: static;
        width: 112px;

        margin:
            0
            0
            18px
            auto;
    }

    .login-card__brand-image {
        width: 112px;
    }
}