:root {
    --fundo: #030914;
    --fundo-claro: #071421;
    --card: #0c1d30;
    --card-escuro: #071421;

    --borda: #244766;
    --borda-azul: #2f8fec;

    --azul: #1687ff;
    --azul-claro: #65b5ff;

    --dourado: #f4b400;
    --dourado-claro: #ffda6a;

    --texto: #ffffff;
    --texto-suave: #a8bacd;
    --texto-apagado: #73879c;

    --sucesso: #25cf84;
    --erro: #ff6868;
}


* {
    box-sizing: border-box;
}


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


body {
    margin: 0;

    color: var(--texto);

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(22, 135, 255, 0.16),
            transparent 30%
        ),
        var(--fundo);

    font-family:
        Inter,
        Arial,
        sans-serif;
}


button,
input {
    font: inherit;
}


.recuperacao-layout {
    display: grid;
    grid-template-columns:
        minmax(400px, 1.15fr)
        minmax(420px, 0.85fr);

    min-height: 100vh;
}


.recuperacao-apresentacao {
    position: relative;

    display: flex;

    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;

    padding: 44px 7vw;

    border-right:
        1px solid rgba(47, 143, 236, 0.32);

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(22, 135, 255, 0.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 80% 85%,
            rgba(244, 180, 0, 0.08),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #0d2540,
            #061421 62%,
            #030914
        );
}


.recuperacao-apresentacao::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.28;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.02) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.02) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    pointer-events: none;
}


.recuperacao-marca {
    position: relative;
    z-index: 1;

    display: inline-flex;
    width: fit-content;

    align-items: center;
    gap: 13px;

    color: #ffffff;

    text-decoration: none;
}


.recuperacao-marca img {
    width: 57px;
    height: 57px;
    flex: 0 0 57px;

    object-fit: cover;

    border: 2px solid var(--dourado);
    border-radius: 50%;

    box-shadow:
        0 0 27px rgba(22, 135, 255, 0.25),
        0 0 19px rgba(244, 180, 0, 0.14);
}


.recuperacao-marca strong,
.recuperacao-marca small {
    display: block;
}


.recuperacao-marca strong {
    font-size: 20px;
    font-weight: 950;

    letter-spacing: 0.035em;
}


.recuperacao-marca strong em {
    color: var(--azul-claro);
    font-style: normal;
}


.recuperacao-marca small {
    margin-top: 3px;

    color: var(--dourado-claro);

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

    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.recuperacao-apresentacao-conteudo {
    position: relative;
    z-index: 1;

    max-width: 680px;

    margin: auto 0;
}


.recuperacao-etiqueta,
.recuperacao-card-etiqueta {
    color: var(--dourado-claro);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.recuperacao-apresentacao h1 {
    margin: 18px 0 20px;

    font-size:
        clamp(
            42px,
            5.8vw,
            72px
        );

    line-height: 0.99;
    letter-spacing: -0.055em;
}


.recuperacao-apresentacao p {
    max-width: 610px;

    margin: 0;

    color: var(--texto-suave);

    font-size: 17px;
    line-height: 1.72;
}


.recuperacao-beneficios {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;

    margin-top: 28px;

    color: #a9c4df;

    font-size: 12px;
}


.recuperacao-formulario-area {
    display: grid;

    place-items: center;

    padding: 38px;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(22, 135, 255, 0.12),
            transparent 28%
        ),
        var(--fundo);
}


.recuperacao-card {
    width: min(480px, 100%);

    padding: 34px;

    border: 1px solid var(--borda);
    border-top-color:
        rgba(244, 180, 0, 0.7);

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 90% 0,
            rgba(22, 135, 255, 0.16),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            var(--card),
            var(--card-escuro)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.48);
}


.recuperacao-card h2 {
    margin: 12px 0 9px;

    font-size: 31px;
    letter-spacing: -0.04em;
}


.recuperacao-card > p {
    margin: 0 0 25px;

    color: var(--texto-suave);

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


.recuperacao-card form {
    display: grid;
    gap: 11px;
}


.recuperacao-card label {
    margin-top: 5px;

    color: #dce7f2;

    font-size: 12px;
    font-weight: 750;
}


.recuperacao-card input {
    width: 100%;
    min-height: 53px;

    padding: 0 16px;

    border: 1px solid #31516f;
    border-radius: 12px;

    outline: none;

    color: #ffffff;
    background: #061320;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


.recuperacao-card input:focus {
    border-color: var(--azul);

    box-shadow:
        0 0 0 4px rgba(22, 135, 255, 0.13);
}


.recuperacao-card form > button,
#botao-redefinir-senha {
    width: 100%;
    min-height: 52px;

    margin-top: 8px;

    border: 1px solid var(--azul-claro);
    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--azul),
            #0b5fc8
        );

    box-shadow:
        0 14px 32px rgba(22, 135, 255, 0.23);

    font-weight: 900;

    cursor: pointer;
}


.recuperacao-card form > button:disabled,
#botao-redefinir-senha:disabled {
    opacity: 0.58;

    cursor: wait;
}


.recuperacao-senha-campo {
    position: relative;
}


.recuperacao-senha-campo input {
    padding-right: 88px;
}


.recuperacao-senha-campo button {
    position: absolute;

    top: 50%;
    right: 8px;

    min-height: 36px;

    padding: 6px 10px;

    transform: translateY(-50%);

    border: 1px solid #294862;
    border-radius: 8px;

    color: var(--azul-claro);
    background: #0a1c2e;

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

    cursor: pointer;
}


.recuperacao-mensagem {
    min-height: 0;

    margin-top: 17px;

    border-radius: 11px;

    font-size: 12px;
    line-height: 1.6;
}


.recuperacao-mensagem:not(:empty) {
    padding: 12px 14px;

    border: 1px solid var(--borda);
    background: #071725;
}


.recuperacao-mensagem.sucesso {
    border-color:
        rgba(37, 207, 132, 0.44);

    color: #8debc1;

    background:
        rgba(37, 207, 132, 0.07);
}


.recuperacao-mensagem.erro {
    border-color:
        rgba(255, 104, 104, 0.44);

    color: #ffaaaa;

    background:
        rgba(255, 104, 104, 0.07);
}


.recuperacao-link-local {
    margin-top: 17px;
    padding: 15px;

    border: 1px solid
        rgba(244, 180, 0, 0.36);

    border-radius: 12px;

    background:
        rgba(244, 180, 0, 0.06);
}


.recuperacao-link-local strong {
    color: var(--dourado-claro);

    font-size: 11px;
}


.recuperacao-link-local p {
    margin: 7px 0 10px;

    color: var(--texto-suave);

    font-size: 11px;
}


.recuperacao-link-local a {
    color: var(--azul-claro);

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


.recuperacao-voltar {
    display: inline-flex;

    margin-top: 24px;

    color: var(--texto-apagado);

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

    text-decoration: none;
}


.recuperacao-voltar:hover {
    color: #ffffff;
}


[hidden] {
    display: none !important;
}


@media (max-width: 900px) {
    .recuperacao-layout {
        grid-template-columns: 1fr;
    }

    .recuperacao-apresentacao {
        min-height: 410px;

        padding: 32px 7vw;

        border-right: 0;
        border-bottom:
            1px solid rgba(47, 143, 236, 0.32);
    }

    .recuperacao-apresentacao h1 {
        font-size: 48px;
    }
}


@media (max-width: 560px) {
    .recuperacao-apresentacao {
        min-height: 360px;
    }

    .recuperacao-marca span {
        display: none;
    }

    .recuperacao-apresentacao h1 {
        font-size: 38px;
    }

    .recuperacao-apresentacao p {
        font-size: 14px;
    }

    .recuperacao-formulario-area {
        padding: 20px 12px 40px;
    }

    .recuperacao-card {
        padding: 25px 19px;
    }
}

/* ==========================================================
   FILM TECH - RECUPERACAO DE SENHA
   AJUSTE VISUAL FINAL
   ========================================================== */

body {
    color: #f8fbff !important;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(22, 135, 255, .16),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 20%,
            rgba(244, 180, 0, .06),
            transparent 26%
        ),
        #030914 !important;
}


/* ==========================================================
   TITULOS - CORRIGE O PRETO SOBRE FUNDO ESCURO
   ========================================================== */

.recuperacao-layout h1,
.recuperacao-layout h2,
.recuperacao-layout h3,
.recuperacao-card h1,
.recuperacao-card h2,
.recuperacao-card h3,
[class*="recuperacao-"] h1,
[class*="recuperacao-"] h2 {
    color: #ffffff !important;
}


/* TITULO GRANDE DA ESQUERDA */

.recuperacao-apresentacao h1,
.recuperacao-conteudo h1,
.recuperacao-lado-esquerdo h1 {
    color: #ffffff !important;

    text-shadow:
        0 4px 30px rgba(22, 135, 255, .10);
}


/* ==========================================================
   TEXTOS
   ========================================================== */

.recuperacao-apresentacao p,
.recuperacao-conteudo p,
.recuperacao-card p {
    color: #c8d8e8 !important;
}

.recuperacao-card label {
    color: #eef6ff !important;
}


/* ==========================================================
   CARD
   ========================================================== */

.recuperacao-card {
    border:
        1px solid rgba(101, 181, 255, .30) !important;

    border-top:
        1px solid rgba(255, 218, 106, .70) !important;

    background:
        radial-gradient(
            circle at 95% 0,
            rgba(22, 135, 255, .12),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #0d2137,
            #071421
        ) !important;

    box-shadow:
        0 28px 70px rgba(0, 0, 0, .30),
        0 0 0 1px rgba(101, 181, 255, .04) inset !important;
}


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

.recuperacao-card input {
    color: #ffffff !important;

    background:
        #071725 !important;

    border:
        1px solid #315676 !important;
}

.recuperacao-card input::placeholder {
    color: #7990a7 !important;
}

.recuperacao-card input:focus {
    border-color:
        #2f8fec !important;

    box-shadow:
        0 0 0 4px rgba(22, 135, 255, .13) !important;
}


/* ==========================================================
   BOTAO
   ========================================================== */

.recuperacao-card button {
    color: #ffffff !important;

    border:
        1px solid #65b5ff !important;

    background:
        linear-gradient(
            135deg,
            #1687ff 0%,
            #1267d6 60%,
            #0b54b4 100%
        ) !important;

    box-shadow:
        0 14px 34px rgba(22, 135, 255, .22) !important;
}

.recuperacao-card button:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 18px 40px rgba(22, 135, 255, .30) !important;
}


/* ==========================================================
   ETIQUETAS / DESTAQUES
   ========================================================== */

.recuperacao-etiqueta,
.recuperacao-card-etiqueta {
    color:
        #ffda6a !important;
}


/* ==========================================================
   LINKS
   ========================================================== */

.recuperacao-voltar,
.recuperacao-link-local a {
    color:
        #8cc8ff !important;
}

.recuperacao-voltar:hover,
.recuperacao-link-local a:hover {
    color:
        #ffffff !important;
}


/* ==========================================================
   BENEFICIOS DA ESQUERDA
   ========================================================== */

.recuperacao-beneficios,
.recuperacao-beneficios span {
    color:
        #b9d5ed !important;
}