/* ============================================================
   MÔNICA OS V2
   LOGIN

   Visual original preservado.
   Tipografia oficial desta versão: SORA.
   ============================================================ */


/* ============================================================
   PALETA
   ============================================================ */

:root {

    --ink: #0d1424;
    --ink-soft: #17213a;

    --paper: #f8f7f4;
    --paper-muted: #efeee9;

    --line:
        rgba(17, 30, 54, 0.12);

    --violet: #7956ff;
    --violet-deep: #5e38f4;

    --orange: #ff8f54;

    --muted: #6b7280;

    --success: #6ddea1;

    --shadow:
        0 28px 80px rgba(5, 12, 26, 0.24);
}


/* ============================================================
   RESET
   ============================================================ */

* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
}


body {

    min-width: 320px;
    min-height: 100vh;

    margin: 0;

    color: var(--ink);

    background:
        var(--paper);

    font-family:
        "Sora",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


a {
    color: inherit;
}


/* ============================================================
   ESTRUTURA
   ============================================================ */

.login-shell {

    display: grid;

    min-height: 100vh;

    grid-template-columns:
        minmax(420px, 1.15fr)
        minmax(440px, 0.85fr);

    overflow: hidden;
}


/* ============================================================
   LADO ESQUERDO
   ============================================================ */

.intro {

    position: relative;

    isolation: isolate;

    display: flex;

    min-height: 100%;

    flex-direction: column;

    justify-content:
        space-between;

    padding:
        40px
        clamp(36px, 6vw, 104px)
        34px;

    color:
        #ffffff;

    background:
        var(--ink);

    overflow:
        hidden;
}


/* ============================================================
   LUZES DE FUNDO
   ============================================================ */

.intro::before,
.intro::after {

    position: absolute;

    z-index: -1;

    content: "";

    border-radius:
        50%;

    filter:
        blur(1px);
}


.intro::before {

    width:
        min(52vw, 720px);

    height:
        min(52vw, 720px);

    right:
        -18%;

    bottom:
        -30%;

    background:
        radial-gradient(
            circle at 42% 38%,
            rgba(121, 86, 255, 0.8),
            rgba(121, 86, 255, 0.03) 66%,
            transparent 68%
        );
}


.intro::after {

    width:
        500px;

    height:
        500px;

    top:
        -210px;

    left:
        -180px;

    background:
        radial-gradient(
            circle,
            rgba(255, 143, 84, 0.25),
            transparent 66%
        );
}


/* ============================================================
   TEXTURA
   ============================================================ */

.grain {

    position: absolute;

    z-index: -1;

    inset: 0;

    opacity:
        0.24;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"
        );

    pointer-events:
        none;
}


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

.brand {

    display: inline-flex;

    align-items:
        center;

    gap:
        13px;

    width:
        fit-content;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    text-decoration:
        none;
}


/* ============================================================
   SÍMBOLO
   ============================================================ */

.brand-symbol {

    position:
        relative;

    width:
        31px;

    height:
        31px;

    border:
        1px solid rgba(255, 255, 255, 0.28);

    border-radius:
        10px;

    transform:
        rotate(-8deg);
}


.brand-symbol::before,
.brand-symbol::after {

    position:
        absolute;

    content:
        "";

    background:
        #ffffff;

    border-radius:
        999px;
}


.brand-symbol::before {

    width:
        4px;

    height:
        17px;

    top:
        6px;

    left:
        8px;

    box-shadow:
        10px 0 0 #ffffff;
}


.brand-symbol::after {

    width:
        17px;

    height:
        4px;

    top:
        13px;

    left:
        7px;

    transform:
        rotate(-24deg);
}


/* ============================================================
   TEXTO PRINCIPAL
   ============================================================ */

.intro-copy {

    max-width:
        670px;

    margin:
        auto 0;

    padding:
        9vh 0;
}


/* ============================================================
   EYEBROW
   ============================================================ */

.eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin:
        0 0 22px;

    color:
        rgba(255, 255, 255, 0.64);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.eyebrow::before {

    width:
        25px;

    height:
        1px;

    content:
        "";

    background:
        var(--orange);
}


/* ============================================================
   TÍTULO PRINCIPAL
   Agora em SORA
   ============================================================ */

.intro h1 {

    max-width:
        630px;

    margin:
        0;

    font-family:
        "Sora",
        sans-serif;

    font-size:
        clamp(45px, 5.1vw, 82px);

    font-weight:
        500;

    letter-spacing:
        -0.055em;

    line-height:
        0.98;
}


.intro h1 em {

    color:
        #ad9aff;

    font-family:
        "Sora",
        sans-serif;

    font-style:
        normal;

    font-weight:
        600;
}


/* ============================================================
   DESCRIÇÃO
   ============================================================ */

.intro-description {

    max-width:
        430px;

    margin:
        32px 0 0;

    color:
        rgba(255, 255, 255, 0.68);

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.7;
}


/* ============================================================
   RODAPÉ ESQUERDO
   ============================================================ */

.intro-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        rgba(255, 255, 255, 0.48);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.secure-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;
}


.secure-status::before {

    width:
        7px;

    height:
        7px;

    content:
        "";

    border-radius:
        50%;

    background:
        var(--success);

    box-shadow:
        0 0 0 4px rgba(109, 222, 161, 0.12);
}


/* ============================================================
   LADO DIREITO
   ============================================================ */

.access-panel {

    position:
        relative;

    display:
        flex;

    min-height:
        100%;

    align-items:
        center;

    justify-content:
        center;

    padding:
        44px
        clamp(28px, 6.2vw, 92px);

    background:

        linear-gradient(
            135deg,
            transparent 0 74%,
            rgba(121, 86, 255, 0.05) 74% 75%,
            transparent 75%
        ),

        var(--paper);
}


.access-panel::before {

    position:
        absolute;

    width:
        260px;

    height:
        260px;

    top:
        -148px;

    right:
        -92px;

    content:
        "";

    border:
        1px solid rgba(121, 86, 255, 0.12);

    border-radius:
        50%;
}


.access-panel::after {

    position:
        absolute;

    width:
        12px;

    height:
        12px;

    right:
        11.5%;

    bottom:
        13%;

    content:
        "";

    border-radius:
        2px;

    background:
        var(--orange);

    box-shadow:
        30px 29px 0 rgba(121, 86, 255, 0.42);

    transform:
        rotate(30deg);
}


/* ============================================================
   CARD DE ACESSO
   ============================================================ */

.access-card {

    position:
        relative;

    width:
        min(100%, 395px);
}


.access-kicker {

    margin:
        0 0 15px;

    color:
        var(--violet-deep);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


/* ============================================================
   TÍTULO DIREITO — SORA
   ============================================================ */

.access-card h2 {

    margin:
        0;

    color:
        var(--ink);

    font-family:
        "Sora",
        sans-serif;

    font-size:
        clamp(35px, 3.7vw, 49px);

    font-weight:
        500;

    letter-spacing:
        -0.055em;

    line-height:
        1.02;
}


.access-intro {

    margin:
        21px 0 34px;

    color:
        var(--muted);

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1.65;
}


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

form {

    display:
        grid;

    gap:
        19px;
}


.field {

    display:
        grid;

    gap:
        8px;
}


.field label {

    color:
        #35415a;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.input-wrap {

    position:
        relative;
}


.input-wrap svg {

    position:
        absolute;

    width:
        18px;

    height:
        18px;

    top:
        50%;

    left:
        16px;

    color:
        #9aa1b1;

    pointer-events:
        none;

    transform:
        translateY(-50%);
}


/* ============================================================
   INPUT
   ============================================================ */

.field input {

    width:
        100%;

    height:
        54px;

    padding:
        0 16px 0 47px;

    color:
        var(--ink);

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

    border-radius:
        12px;

    outline:
        none;

    background:
        rgba(255, 255, 255, 0.82);

    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.72) inset;

    font-family:
        "Sora",
        sans-serif;

    font-size:
        13px;

    font-weight:
        400;

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


.field input::placeholder {

    color:
        #a8adb8;
}


.field input:focus {

    border-color:
        rgba(121, 86, 255, 0.64);

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px rgba(121, 86, 255, 0.12);
}


/* ============================================================
   LINHA DE OPÇÕES
   ============================================================ */

.form-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin:
        2px 0 5px;
}


.remember {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #687084;

    font-size:
        11px;

    font-weight:
        400;
}


.remember input {

    width:
        15px;

    height:
        15px;

    accent-color:
        var(--violet-deep);
}


.forgot {

    color:
        var(--violet-deep);

    font-size:
        11px;

    font-weight:
        600;

    text-decoration:
        none;
}


.forgot:hover {

    text-decoration:
        underline;
}


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

.submit-button {

    display:
        inline-flex;

    min-height:
        55px;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    padding:
        0 22px;

    color:
        #ffffff;

    border:
        0;

    border-radius:
        12px;

    background:
        linear-gradient(
            122deg,
            var(--violet-deep),
            var(--violet)
        );

    box-shadow:
        0 16px 26px rgba(94, 56, 244, 0.24);

    cursor:
        pointer;

    font-family:
        "Sora",
        sans-serif;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

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


.submit-button:hover {

    box-shadow:
        0 19px 32px rgba(94, 56, 244, 0.32);

    filter:
        brightness(1.04);

    transform:
        translateY(-2px);
}


.submit-button:active {

    box-shadow:
        0 9px 17px rgba(94, 56, 244, 0.25);

    transform:
        scale(0.98);
}


.submit-button svg {

    width:
        17px;

    height:
        17px;
}


/* ============================================================
   NOTA
   ============================================================ */

.access-note {

    margin:
        26px 0 0;

    color:
        #9096a2;

    font-size:
        10px;

    font-weight:
        400;

    line-height:
        1.6;

    text-align:
        center;
}


.access-note a {

    color:
        #656c7b;
}


/* ============================================================
   RESPONSIVIDADE
   ============================================================ */

@media (max-width: 860px) {

    .login-shell {

        grid-template-columns:
            1fr;
    }


    .intro {

        min-height:
            320px;

        padding:
            28px 30px;
    }


    .intro-copy {

        margin:
            auto 0 0;

        padding:
            50px 0 14px;
    }


    .intro h1 {

        max-width:
            460px;

        font-size:
            clamp(43px, 9vw, 65px);
    }


    .intro-description {

        display:
            none;
    }


    .access-panel {

        min-height:
            590px;

        padding:
            62px 30px;
    }

}


@media (max-width: 480px) {

    .intro {

        min-height:
            281px;

        padding:
            24px;
    }


    .brand {

        font-size:
            11px;
    }


    .intro h1 {

        font-size:
            42px;
    }


    .intro-footer {

        font-size:
            9px;
    }


    .access-panel {

        min-height:
            calc(100vh - 281px);

        padding:
            48px 23px;
    }


    .access-card h2 {

        font-size:
            39px;
    }


    .form-row {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


/* ============================================================
   ACESSIBILIDADE
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;
    }

}