body{
background: linear-gradient(135deg, rgb(228, 226, 226), #fff5f5);
min-height:100vh;
margin:0;
display:flex;
justify-content:center;
align-items:flex-start; /* 👈 aquí está la solución */
padding-top:80px; /* espacio para mostrar el logo */
font-family:'Segoe UI';
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
}

.card-registro{
background:white;
border-radius:25px;
padding:60px 40px 40px 40px;
width:95%;
max-width:850px;
box-shadow:0px 15px 35px rgba(0,0,0,.08);
position:relative;
}

.logo-box{
position:absolute;
top:-60px;
left:50%;
transform:translateX(-50%);
background:none;
padding:10px 25px;
border-radius:20px;
/*box-shadow:0px 8px 25px rgba(0,0,0,.08);*/
}

.logo-box img{
height:80px;
}

.titulo{
font-weight:600;
color:#d40000;
}

.btn-guardar{
background:#d40000;
color:white;
border:none;
padding:14px;
border-radius:12px;
font-size:17px;
font-weight:600;
transition:.35s ease;
box-shadow:0px 8px 20px rgba(212,0,0,.25);
letter-spacing:.5px;
}

.btn-guardar:hover{
background:#333333;
transform:translateY(-2px);
box-shadow:0px 12px 28px rgba(0,0,0,.35);
}

.btn-guardar:hover{
background:#a61d1d;
transform:translateY(-2px);
box-shadow:0px 12px 28px rgba(198,40,40,.35);
}

.form-control{
border-radius:10px;
padding:12px;
}

@media(max-width:768px){

.logo-box img{
height:60px;
}

.card-registro{
padding:70px 25px 30px 25px;
}

}