@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Rajdhani:wght@600;700&display=swap");

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

html {
    min-height: 100%;
    background: #070b0b;
}

body {
    min-height: 100vh;
    color: #e8f0ec;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    text-align: left;
    background-color: #070b0b;
    background-image:
        linear-gradient(90deg, rgba(5, 8, 8, .98) 0%, rgba(5, 8, 8, .80) 55%, rgba(5, 8, 8, .70) 100%),
        url("/assets/img/will-forge-hero.png");
    background-position: center, 68% center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}

.container {
    width: 100%;
    min-height: 100vh;
    padding: 34px 24px;
    display: block;
}

.box {
    position: relative;
    width: 760px;
    max-width: 100%;
    margin: 34px auto;
    overflow: hidden;
    border: 1px solid rgba(105, 173, 146, .34);
    background: rgba(8, 14, 13, .97);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .58);
}

.box:before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: #49d89b;
}

.content {
    width: 100%;
    display: block;
}

/* O cadastro antigo trazia apresentação, dados e redes sociais. No launcher,
   apenas o formulário é necessário. */
.bLeft,
.social,
.developed {
    display: none !important;
}

.bRight {
    float: none;
    width: 100%;
    min-height: 0;
    padding: 40px 48px 42px;
    border: 0;
    background: transparent;
}

.bRight .title {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0 0 22px;
    border-bottom: 1px solid rgba(118, 157, 141, .20);
    text-align: left;
}

.bRight .title:before {
    content: "WILL FORGE  //  CONTA";
    display: block;
    margin-bottom: 8px;
    color: #49d89b;
    font: 700 10px Rajdhani, "Segoe UI", sans-serif;
    letter-spacing: .18em;
}

.bRight .title h1 {
    color: #e8f0ec;
    font: 700 40px Rajdhani, "Segoe UI", sans-serif;
    line-height: 1;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.bRight .title .tagline {
    margin-top: 9px;
    color: #778780;
    font-size: 13px;
}

.bRight .title .tagline a,
.button a {
    color: #62e2aa;
    font-weight: 700;
}

.bRight .title .tagline a:hover,
.button a:hover {
    color: #a1f0ce;
}

.formR {
    float: none;
    width: 100%;
    margin: 24px 0 0;
    padding: 0;
}

.formR form {
    display: block;
}

.formR input:not([type="hidden"]) {
    display: block;
    width: 100%;
    height: 56px;
    margin: 0 0 12px;
    padding: 0 19px;
    border: 1px solid rgba(123, 156, 143, .27);
    border-radius: 0;
    outline: none;
    background: #0c1413;
    color: #e8f0ec;
    font: 600 13px Inter, "Segoe UI", sans-serif;
    letter-spacing: .04em;
}

.formR input:not([type="hidden"]):focus {
    border-color: #49d89b;
    background: #101b18;
    box-shadow: 0 0 0 3px rgba(73, 216, 155, .08);
}

.formR input:not([type="hidden"]):-ms-input-placeholder { color: #63736d; }
.formR input:not([type="hidden"])::placeholder { color: #63736d; }

.divi {
    float: none;
    width: 100%;
    display: block;
    margin: 12px 0 7px;
    padding: 0;
    color: #e27132;
    font: 700 10.5px Rajdhani, "Segoe UI", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.button {
    color: #7d8d87;
    font-size: 13px;
}

.button p {
    margin: 3px 0 0;
    line-height: 1.5;
}

.button button {
    width: 100%;
    min-height: 56px;
    margin-top: 14px;
    padding: 13px 24px;
    border: 1px solid #60dda7;
    border-radius: 0;
    background: linear-gradient(110deg, #35b77d, #77e6b6);
    color: #06110c;
    cursor: pointer;
    font: 700 13.5px Rajdhani, "Segoe UI", sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.button button:hover {
    background: #84edbe;
    color: #06110c;
    box-shadow: 0 12px 30px rgba(73, 216, 155, .16);
}

.button button i { margin-right: 7px; }

.erro,
.ok {
    float: none;
    width: 100%;
    margin: 0 0 17px;
    padding: 12px 14px;
    border-radius: 0;
    font-size: 11px;
    line-height: 1.45;
    text-align: left;
}

.erro { border: 1px solid rgba(240, 120, 108, .45); background: rgba(240, 120, 108, .08); color: #f0786c; }
.ok { border: 1px solid rgba(73, 216, 155, .42); background: rgba(73, 216, 155, .08); color: #79e4b5; }

@media (max-width: 820px) {
    .container { padding: 18px; }
    .box { width: 100%; margin: 18px auto; }
    .bRight { padding: 32px 30px 36px; }
    .bRight .title h1 { font-size: 34px; }
    .formR input:not([type="hidden"]) { height: 52px; }
}

@media (max-width: 560px) {
    .container { padding: 0; }
    .box { min-height: 100vh; margin: 0; border-width: 0 0 0 3px; }
    .bRight { padding: 28px 22px 34px; }
    .bRight .title h1 { font-size: 30px; }
}