:root {

    --green-main:#16A34A;
    --green-light:#4ADE80;
    --blue:#1E3A8A;
    --dark:#0f172a;

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

}


/* RESET */

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



body{

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

    height:100vh;

    color:white;

    overflow-x:hidden;


    background:

    radial-gradient(
        circle at top left,
        rgba(255,255,255,.15),
        transparent 35%
    ),

    radial-gradient(
        circle at bottom right,
        rgba(30,58,138,.25),
        transparent 40%
    ),

    #0f172a;

}



/* EFECTOS DE LUZ */

body::before{

    content:"";

    position:fixed;

    width:500px;

    height:500px;

    background:

    radial-gradient(
        rgba(74,222,128,.18),
        transparent 70%
    );

    top:-200px;

    left:-150px;

    z-index:-2;

}


body::after{

    content:"";

    position:fixed;

    width:600px;

    height:600px;

    background:

    radial-gradient(
        rgba(30,58,138,.20),
        transparent 70%
    );

    right:-200px;

    bottom:-200px;

    z-index:-2;

}




/* PARTICULAS */

#particles{

    position:fixed;

    inset:0;

    z-index:-1;

}


.particle{

    position:absolute;

    border-radius:50%;

    background:

    rgba(74,222,128,.35);

    animation:

    floatParticle linear infinite;

}


@keyframes floatParticle{

    from{

        transform:translateY(0);

        opacity:0;

    }


    20%{

        opacity:1;

    }


    to{

        transform:translateY(-250px);

        opacity:0;

    }

}



/* NAVBAR */

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:70px;


    display:flex;

    align-items:center;


    padding:0 8%;


    background:

    rgba(15,23,42,.70);


    backdrop-filter:blur(16px);


    border-bottom:

    1px solid rgba(255,255,255,.05);


    z-index:10;

}


.logo{

    color:var(--green-light);

    font-size:1.5rem;

    font-weight:700;

}



/* CONTENEDOR */


.register-container{

    height:100vh;


    display:flex;

    justify-content:center;

    align-items:center;


    padding-top:60px;

}




/* TARJETA */


.register-card{

    width:360px;


    padding:25px;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid rgba(255,255,255,.08);


    backdrop-filter:blur(20px);


    border-radius:25px;


    box-shadow:

    var(--shadow);


    animation:

    showCard .6s ease;

}



@keyframes showCard{

    from{

        opacity:0;

        transform:
        translateY(25px);

    }


    to{

        opacity:1;

        transform:
        translateY(0);

    }

}





/* TITULO */


.register-header{

    text-align:center;

    margin-bottom:18px;

}



.tag{

    display:inline-block;

    padding:6px 14px;


    border-radius:40px;


    background:

    rgba(74,222,128,.12);


    border:

    1px solid rgba(74,222,128,.30);


    color:

    var(--green-light);


    font-size:.65rem;


    margin-bottom:12px;

}



h1{

    font-size:1.55rem;

    margin-bottom:8px;

}


h1 span{

    color:var(--green-light);

}


.register-header p{

    color:#cbd5e1;

    font-size:.75rem;

    line-height:1.4;

}




/* FORMULARIO */


.input-group{

    display:flex;

    flex-direction:column;


    gap:4px;


    margin-bottom:10px;

}



label{

    color:#cbd5e1;

    font-size:.75rem;

}



input,
select{


    width:100%;


    height:36px;


    padding:8px 12px;


    border-radius:12px;


    border:

    1px solid rgba(255,255,255,.08);


    background:

    rgba(0,0,0,.25);


    color:white;


    outline:none;


    font-family:inherit;


    font-size:.75rem;

}



select option{

    color:black;

}



input:focus,
select:focus{

    border-color:

    var(--green-light);


    box-shadow:

    0 0 10px rgba(74,222,128,.2);

}





/* BOTON */


button{


    width:100%;


    height:38px;


    margin-top:8px;


    border:none;


    border-radius:50px;


    background:

    linear-gradient(

    135deg,

    var(--green-main),

    var(--green-light)

    );


    color:white;


    font-weight:600;


    cursor:pointer;


    font-size:.8rem;


    transition:.3s;

}



button:hover{

    transform:translateY(-3px);

}





@media(max-width:500px){


    .register-card{

        width:90%;

        padding:20px;

    }


}

/* NUEVA DISTRIBUCIÓN DEL FORMULARIO */


.register-card{

    width:520px;

}



.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

}



.input-group{

    margin-bottom:0;

}



.full{

    grid-column:1 / -1;

}



input,
select{

    height:42px;

    font-size:.85rem;

}



button{

    height:45px;

    font-size:.9rem;

}



@media(max-width:600px){


    .register-card{

        width:90%;

    }


    .form-grid{

        grid-template-columns:1fr;

    }


    .full{

        grid-column:auto;

    }

}

/* =====================================
   RESPONSIVE REGISTRO FUTVISION
===================================== */


/* Tablets */

@media(max-width:900px){


    body{

        overflow:auto;

    }


    .register-container{


        min-height:100vh;

        height:auto;

        padding:

        100px 20px 40px;


    }



    .register-card{


        width:90%;

        max-width:520px;


    }


}





/* Móviles */

@media(max-width:600px){


    .navbar{


        padding:

        18px 5%;


    }



    .logo{


        font-size:1.3rem;


    }





    .register-container{


        padding:

        90px 15px 30px;


        align-items:flex-start;


    }





    .register-card{


        width:100%;


        padding:22px;


        border-radius:22px;


    }





    .form-grid{


        grid-template-columns:1fr;


        gap:12px;


    }





    .full{


        grid-column:auto;


    }





    .register-header h1{


        font-size:1.4rem;


    }





    .register-header p{


        font-size:.75rem;


    }





    input,
    select{


        height:40px;


        font-size:.8rem;


    }





    button{


        height:42px;


    }



}






/* Móviles pequeños */

@media(max-width:380px){


    .register-card{


        padding:18px;


    }



    .tag{


        font-size:.6rem;


    }



    .register-header h1{


        font-size:1.2rem;


    }



}