/*=========================
      VARIABLES
==========================*/

:root{
    --primary:#6366F1;
    --secondary:#8B5CF6;
    --success:#10B981;
    --white:#ffffff;
    --text:#1f2937;
    --text2:#6B7280;

    --glass:rgba(255,255,255,.15);
    --border:rgba(255,255,255,.25);
}


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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;

    font-family:
        'Segoe UI',
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


/*=========================
      BODY
==========================*/

body.recovery-page{

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

    display:flex;

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

    overflow:hidden;

    background-image:
        url("../../images/SVISION.png");

    background-repeat:no-repeat;

    background-attachment:fixed;

    background-size:cover;

    background-position:center center;

    animation:bgMove 12s ease infinite;

    position:relative;

}


/*=========================
      FONDO ANIMADO
==========================*/

body.recovery-page::before{

    content:"";

    position:fixed;

    width:350px;
    height:350px;

    background:#ffffff;

    opacity:.10;

    border-radius:50%;

    top:-120px;
    left:-100px;

    filter:blur(20px);

    animation:float1 8s ease-in-out infinite;

    pointer-events:none;

}


body.recovery-page::after{

    content:"";

    position:fixed;

    width:450px;
    height:450px;

    background:#ffffff;

    opacity:.08;

    border-radius:50%;

    bottom:-180px;
    right:-150px;

    filter:blur(30px);

    animation:float2 10s ease-in-out infinite;

    pointer-events:none;

}


/*=========================
      ANIMACIÓN FONDO
==========================*/

@keyframes bgMove{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}


@keyframes float1{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(40px);
    }

}


@keyframes float2{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-40px);
    }

}


/*=========================
      BURBUJAS
==========================*/

.background{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    z-index:1;

    pointer-events:none;

}


.background span{

    position:absolute;

    display:block;

    border-radius:50%;

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

    filter:blur(3px);

    animation:
        bubbleFloat
        10s
        ease-in-out
        infinite;

}


.background span:nth-child(1){

    width:120px;
    height:120px;

    top:10%;
    left:8%;

    animation-delay:0s;

}


.background span:nth-child(2){

    width:180px;
    height:180px;

    bottom:10%;
    left:5%;

    animation-delay:2s;

}


.background span:nth-child(3){

    width:100px;
    height:100px;

    top:15%;
    right:8%;

    animation-delay:4s;

}


.background span:nth-child(4){

    width:160px;
    height:160px;

    bottom:5%;
    right:7%;

    animation-delay:6s;

}


@keyframes bubbleFloat{

    0%,
    100%{

        transform:
            translateY(0)
            translateX(0)
            scale(1);

    }

    50%{

        transform:
            translateY(-35px)
            translateX(20px)
            scale(1.08);

    }

}


/*=========================
      FORMULARIO
==========================*/

form{

    position:relative;

    z-index:10;

    width:420px;

    padding:45px;

    border-radius:25px;

    backdrop-filter:blur(4px);

    -webkit-backdrop-filter:blur(4px);

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

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .15
        );

    box-shadow:
        0 20px 40px
        rgba(
            0,
            0,
            0,
            .12
        );

    animation:
        recoveryForm
        .8s
        ease;

}


/*=========================
      ANIMACIÓN FORM
==========================*/

@keyframes recoveryForm{

    from{

        opacity:0;

        transform:
            translateY(50px)
            scale(.9);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/*=========================
      BOTÓN VOLVER
==========================*/

.btn-back{

    display:inline-flex;

    align-items:center;

    gap:7px;

    margin-bottom:25px;

    color:
        rgb(
            8,
            8,
            78
        );

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}


.btn-back i{

    font-size:14px;

}


.btn-back:hover{

    color:#6366F1;

    transform:
        translateX(-4px);

}


/*=========================
      LOGO / TITULO
==========================*/

.logo{

    width:100%;

    text-align:center;

    margin-bottom:25px;

}


.logo p{

    margin:0;

    font-size:25px;

    font-weight:700;

    color:
        rgb(
            8,
            8,
            78
        );

    text-shadow:
        0 2px 10px
        rgba(
            0,
            0,
            0,
            .30
        );

}


.logo i{

    margin-right:8px;

    color:#6366F1;

}


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

.form-floating{

    position:relative;

    width:100%;

    margin-bottom:22px;

}


.form-control{

    width:100%;

    height:60px;

    padding:
        22px
        18px
        5px;

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

    border:
        5px solid
        rgba(
            7,
            7,
            7,
            .10
        );

    border-radius:15px;

    font-size:15px;

    color:#000000;

    transition:.45s;

}


.form-control::placeholder{

    color:transparent;

}


.form-control:focus{

    outline:none;

    border-color:
        rgba(
            255,
            255,
            255,
            .40
        );

    box-shadow:
        0 0 15px
        rgba(
            255,
            255,
            255,
            .10
        );

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

    transform:
        scale(1.01);

}


/*=========================
      LABEL
==========================*/

.form-floating label{

    position:absolute;

    top:18px;

    left:18px;

    color:
        rgba(
            6,
            38,
            124,
            .70
        );

    pointer-events:none;

    transition:.3s;

}


.form-control:focus ~ label,
.form-control:not(:placeholder-shown) ~ label{

    transform:
        translateY(-15px);

    font-size:12px;

    color:#000000;

}


/*=========================
      INFORMACIÓN
==========================*/

.form-info-text{

    margin:5px 0 20px;

    font-size:13px;

    line-height:1.5;

    color:
        rgb(
            8,
            8,
            78
        );

}


.form-info-text i{

    margin-right:6px;

    color:#6366F1;

}


/*=========================
      BOTÓN PRINCIPAL
==========================*/

.btn-primary{

    width:100%;

    height:58px;

    border:none;

    border-radius:15px;

    cursor:pointer;

    font-size:17px;

    font-weight:600;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #6366F1,
            #8B5CF6
        );

    position:relative;

    overflow:hidden;

    transition:.35s;

    box-shadow:
        0 10px 30px
        rgba(
            0,
            0,
            0,
            .25
        );

}


.btn-primary:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 40px
        rgba(
            0,
            0,
            0,
            .35
        );

}


.btn-primary:active{

    transform:
        translateY(-1px);

}


.btn-primary::before{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                .40
            ),
            transparent
        );

    transition:.8s;

}


.btn-primary:hover::before{

    left:100%;

}


.btn-primary i{

    margin-right:7px;

}


/*=========================
      ESTADO ENVIANDO
==========================*/

.btn-primary:disabled{

    cursor:not-allowed;

}


/*=========================
      RESPONSIVE
==========================*/

@media(max-width:500px){

    body.recovery-page{

        padding:20px;

    }


    form{

        width:95%;

        padding:35px;

    }


    .logo p{

        font-size:21px;

    }


    .form-info-text{

        font-size:12px;

    }

}


@media(max-width:380px){

    form{

        padding:30px 22px;

    }


    .logo p{

        font-size:19px;

    }


    .btn-primary{

        height:54px;

        font-size:15px;

    }

}