@font-face {
    font-family: "Cinzel";
    src: url("/assets/cinzel-500.woff2") format("woff2");
    font-weight: 500;
}

@font-face {
    font-family: "Cinzel";
    src: url("/assets/cinzel-600.woff2") format("woff2");
    font-weight: 600;
}

@font-face {
    font-family: "Cinzel";
    src: url("/assets/cinzel-700.woff2") format("woff2");
    font-weight: 700;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("/assets/cormorant-500.woff2") format("woff2");
    font-weight: 500;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("/assets/cormorant-500i.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
}


:root {
    --azul: #11294f;
    --azul-escuro: #0a1831;
    --azul-claro: #2b5a9c;

    --ouro: #c69a47;
    --ouro-claro: #e8cf8e;
    --ouro-escuro: #8a6424;

    --tinta: #2a2014;
    --tinta-suave: #6a5840;

    --f-titulo: "Cinzel", Georgia, serif;
    --f-display: "Cormorant Garamond", Georgia, serif;
}


* {
    box-sizing: border-box;
}


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


body {
    background: var(--azul-escuro);
    color: var(--tinta);
}


.login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}


.lado {
    position: relative;

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

    padding: 32px 24px;

    overflow: hidden;
}


.lado::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .28;

    background-image:
        radial-gradient(
            rgba(70, 42, 14, .20) 1px,
            transparent 1px
        );

    background-size: 4px 4px;
}


.lado-azul {
    background:
        radial-gradient(
            ellipse at 50% 40%,
            #1d3b6e,
            #11294f 45%,
            #0a1831
        );

    border-right: 5px double var(--ouro);
}


.lado-pergaminho {
    background:
        radial-gradient(
            ellipse at 50% 45%,
            #f3dfae,
            #e2bf7c 45%,
            #b98844 85%,
            #8a5c26
        );
}


/* ======================================================
   PAINEL ESQUERDO
   ====================================================== */

.painel-azul {
    position: relative;
    z-index: 1;

    width: min(
        593px,
        100%,
        calc((100vh - 64px) * 593 / 722)
    );

    aspect-ratio: 593 / 722;

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

    padding: 6% 8%;

    text-align: center;

    background:
        url("/assets/azul-classico.png")
        center / 100% 100%
        no-repeat;

    filter:
        drop-shadow(
            0 12px 22px rgba(0,0,0,.50)
        );
}


.brasao {
    width: 56%;
    height: auto;

    border-radius: 3px;

    box-shadow:
        0 0 0 2px var(--ouro),
        0 10px 22px rgba(0,0,0,.60);
}


.titulo {
    margin: 1.1em 0 .1em;

    font-family: var(--f-titulo);
    font-weight: 700;

    font-size:
        clamp(24px, 2.4vw, 36px);

    line-height: 1;

    letter-spacing: .08em;

    color: var(--ouro-claro);

    text-shadow:
        0 2px 6px rgba(0,0,0,.60);
}


.cap {
    font-size: 1.45em;
    vertical-align: -.04em;
}


.subtitulo {
    margin: 0;

    font-family: var(--f-display);
    font-style: italic;

    font-size:
        clamp(16px,1.35vw,21px);

    color: #eadfbf;
}


.ornamento {
    width: 57%;
    margin-top: 4%;
}


.lema {
    margin: 3% 0 0;

    font-family: var(--f-display);
    font-style: italic;

    font-size:
        clamp(15px,1.2vw,19px);

    color: #d9c9a0;
}


/* ======================================================
   PERGAMINHO
   ====================================================== */

.folha {
    position: relative;
    z-index: 1;

    width: min(
        612px,
        100%,
        calc((100vh - 64px) * 612 / 772)
    );

    aspect-ratio: 612 / 772;

    display: flex;
    justify-content: center;

    padding: 15% 16% 0;

    background:
        radial-gradient(
            ellipse 62% 44% at 50% 40%,
            rgba(250,236,205,.88),
            rgba(250,236,205,.60) 70%,
            transparent 100%
        ),
        url("/assets/sepia-textura.png")
        center / 100% 100%
        no-repeat;

    filter:
        drop-shadow(
            0 12px 22px rgba(50,25,5,.45)
        );
}


.form {
    width: 100%;
}


.boas-vindas {
    margin: 0 0 4px;

    font-family: var(--f-titulo);
    font-weight: 700;

    font-size:
        clamp(22px,2vw,32px);

    letter-spacing: .06em;

    color: var(--azul);
}


.frase {
    margin: 0 0 22px;

    font-family: var(--f-display);
    font-style: italic;

    font-size:
        clamp(16px,1.2vw,19px);

    color: var(--tinta-suave);
}


.divisor {
    display: block;

    width: 62%;
    margin: 0 auto 18px;
}


.campo {
    display: block;

    margin-bottom: 14px;
}


.campo span {
    display: block;

    margin-bottom: 4px;

    font-family: var(--f-titulo);

    font-size: 12px;

    letter-spacing: .14em;

    text-transform: uppercase;

    color: var(--azul);
}


.campo input {
    width: 100%;
    height: 46px;

    padding: 0 14px;

    border-radius: 8px;

    border:
        2px solid var(--ouro);

    background: #fffaf0;

    font-family:
        var(--f-display);

    font-size: 17px;

    color: var(--tinta);

    box-shadow:
        inset 0 1px 3px
        rgba(80,55,15,.20);

    transition:
        border-color .15s,
        box-shadow .15s;
}


.campo input:hover {
    border-color:
        var(--ouro-escuro);
}


.campo input:focus {
    outline: none;

    border-color:
        var(--azul-claro);

    box-shadow:
        0 0 0 3px
        rgba(43,90,156,.22);
}


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

.btn-entrar {
    width: 100%;
    height: 52px;

    border-radius: 9px;

    cursor: pointer;

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

    gap: 12px;

    font-family: var(--f-titulo);

    font-size: 16px;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: var(--ouro-claro);

    border:
        2px solid var(--ouro);

    background:
        radial-gradient(
            ellipse at 50% 0%,
            var(--azul-claro),
            var(--azul) 75%
        );

    box-shadow:
        inset 0 0 0 1px
        var(--ouro-claro),
        0 0 14px
        rgba(198,154,71,.40);

    transition:
        all .18s;
}


.btn-entrar img {
    height: 34px;

    transform:
        rotate(-8deg);

    filter:
        drop-shadow(
            0 1px 2px
            rgba(0,0,0,.60)
        );

    transition:
        transform .30s;
}


.btn-entrar:hover {
    color: #fff6dc;

    border-color:
        var(--ouro-claro);

    background:
        radial-gradient(
            ellipse at 50% 0%,
            #3a70bd,
            #173667 75%
        );

    box-shadow:
        inset 0 0 0 1px
        var(--ouro-claro),
        0 0 20px
        rgba(232,207,142,.60);
}


.btn-entrar:hover img {
    transform:
        rotate(-8deg)
        translateX(3px);
}


.btn-entrar:active {
    transform:
        translateY(1px);
}


.rodape {
    margin: 16px 0 0;

    text-align: center;

    font-family:
        var(--f-display);

    font-style: italic;

    font-size: 15px;

    color:
        var(--tinta-suave);
}


/* ======================================================
   RESPONSIVO
   ====================================================== */

@media (max-width: 900px) {

    .login {
        grid-template-columns: 1fr;
    }

    .lado-azul {
        border-right: 0;

        border-bottom:
            5px double var(--ouro);
    }

    .painel-azul {
        width:
            min(440px,100%);
    }

    .folha {
        width:
            min(480px,100%);

        padding:
            16% 14% 8%;
    }
}


@media (max-width: 480px) {

    .lado {
        padding:
            20px 16px;
    }

    .folha {
        aspect-ratio: auto;

        padding:
            56px 36px 64px;
    }
}