*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}

body{

    background:linear-gradient(135deg,#eef8f2,#dceef0);

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

}

.contenedor{

    width:100%;
    display:flex;
    justify-content:center;

}

.tarjeta{

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

    background:#fff;

    border-radius:25px;

    padding:45px;

    box-shadow:0 10px 35px rgba(0,0,0,.12);

}

.logo{

    display:block;

    width:180px;

    margin:auto;
    margin-bottom:25px;

}

h1{

    text-align:center;

    color:#0a7a38;

    margin-bottom:20px;

    font-size:36px;

}

.texto{

    text-align:center;

    color:#666;

    line-height:1.6;

    margin-bottom:35px;

}

form{

    display:flex;

    flex-direction:column;

}

label{

    font-weight:bold;

    margin-bottom:8px;

    margin-top:18px;

}

input[type=text],
input[type=email]{

    width:100%;

    padding:14px;

    border:1px solid #ddd;

    border-radius:12px;

    font-size:16px;

    transition:.25s;

}

input:focus{

    outline:none;

    border-color:#0a7a38;

    box-shadow:0 0 0 3px rgba(11,125,59,.15);

}

.check{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-top:25px;

}

.check label{

    margin:0;
    font-weight:normal;
    color:#555;
    line-height:1.5;

}

button{

    margin-top:30px;

    padding:16px;

    background:#11862f;

    color:#fff;

    border:none;

    border-radius:12px;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

button:hover{

    background:#0d6b26;

    transform:translateY(-2px);

}

#mensaje{

    margin-top:25px;

    text-align:center;

    font-weight:bold;

    min-height:24px;

}

.exito{

    color:#11862f;

}

.error{

    color:#d62828;

}

.volver{

    display:block;

    text-align:center;

    margin-top:35px;

    color:#0a7a38;

    font-weight:bold;

    text-decoration:none;

}

.volver:hover{

    text-decoration:underline;

}

@media(max-width:700px){

.tarjeta{

    padding:30px;

}

h1{

    font-size:30px;

}

.logo{

    width:150px;

}

input[type=text],
textarea{
    text-transform:uppercase;
}

}

@media(max-width:480px){
    body{
        padding:12px;
        overflow-x:hidden;
    }

    .tarjeta{
        padding:24px 18px;
        border-radius:22px;
    }

    h1{
        font-size:25px;
    }

    p{
        font-size:15px;
    }

    input[type=text],
    input[type=email],
    button{
        font-size:16px;
        min-height:46px;
    }

    button{
        width:100%;
    }
}