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

body{

min-height:100vh;

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

font-family:'Segoe UI',sans-serif;

background:
linear-gradient(
135deg,
#2b2f33,
#3d434a,
#555c63
);

padding:20px;

}

/* CONTENEDOR */

.contenedor{

width:100%;
max-width:500px;

background:#ffffff;

padding:45px;

border-radius:25px;

box-shadow:
0 20px 50px rgba(0,0,0,.30);

animation:fadeIn .6s ease;

}

@keyframes fadeIn{

from{

    opacity:0;
    transform:translateY(20px);

}

to{

    opacity:1;
    transform:translateY(0);

}

}

/* LOGO */

.logo-login{

text-align:center;
margin-bottom:15px;

}

.logo-login img{

width:150px;
height:auto;

transition:.3s;

}

.logo-login img{

transform:scale(1.05);

}

/* TITULO */

h1{

text-align:center;

color:#343a40;

font-size:32px;

font-weight:700;

margin-bottom:10px;

letter-spacing:1px;

}

.subtitulo{

text-align:center;

color:#6c757d;

margin-bottom:30px;

font-size:15px;

}

/* LABELS */

label{

font-weight:600;

color:#495057;

margin-bottom:6px;

display:block;

}

/* INPUTS */

.form-control{

height:52px;

border-radius:12px;

border:1px solid #ced4da;

transition:.3s;

}

.form-control{

border-color:#6c757d;

box-shadow:
0 0 0 .25rem rgba(108,117,125,.20);

}

/* BOTON LOGIN */

.btn-login{

width:100%;

border:none;

background:#343a40;

color:white;

padding:14px;

border-radius:12px;

font-size:16px;

font-weight:600;

transition:.3s;

cursor:pointer;

}

.btn-login{

background:#212529;

transform:translateY(-2px);

}

/* REGISTRO */

.registro-link{

margin-top:30px;

text-align:center;

border-top:1px solid #dee2e6;

padding-top:20px;

}

.registro-link p{

color:#6c757d;

margin-bottom:15px;

}

/* BOTON REGISTRO */

.btn-unete{

display:block;

width:100%;

text-decoration:none;

background:#6c757d;

color:white;

padding:14px;

border-radius:12px;

font-weight:600;

transition:.3s;

}

.btn-unete{

background:#495057;

color:white;

transform:translateY(-2px);

}

/* RESPONSIVE */

@media(max-width:768px){

.contenedor{

    padding:30px;
}

.logo-login img{

    width:120px;
}

h1{

    font-size:26px;
}

}