@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

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

:root{

    --verde:#4CAF50;
    --verde-hover:#3d9641;
    --verde-claro:#eef8ef;
    --gris:#666;
    --gris-claro:#ececec;
    --blanco:#fff;
}

body{

    min-height:100vh;

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

}

.ficha{

    width:420px;
    background:var(--blanco);

    border-radius:20px;

    padding:40px;

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

    border-top:6px solid var(--verde);

}

.logo{

    display:flex;
    justify-content:center;
    margin-bottom:20px;

}

.logo img{

    width:140px;
    object-fit:contain;

}

.titulo{

    text-align:center;
    color:#333;
    font-size:2rem;
    margin-bottom:10px;

}

.parrafo{

    text-align:center;
    color:var(--gris);
    margin-bottom:30px;
    line-height:1.5;

}

.form{

    display:flex;
    flex-direction:column;
    gap:18px;

}

.form-div{

    display:flex;
    flex-direction:column;

}

.form-label{

    margin-bottom:8px;
    font-size:.95rem;
    color:#444;
    font-weight:500;

}

.form-input{

    width:100%;
    height:50px;

    border:2px solid var(--gris-claro);
    border-radius:12px;

    padding:0 15px;

    outline:none;

    transition:.25s;

    font-size:1rem;

    background:#fafafa;

}

.form-input:focus{

    border-color:var(--verde);
    background:white;
    box-shadow:0 0 0 4px rgba(76,175,80,.15);

}

.input-eye{

    position:relative;

}

.eye-btn{

    position:absolute;

    right:12px;
    top:50%;

    transform:translateY(-50%);

    border:none;
    background:none;

    cursor:pointer;

    color:#666;

    font-size:1rem;

}

.eye-btn:hover{

    color:var(--verde);

}

.link{

    color:var(--verde);

    text-decoration:none;

    font-size:.9rem;

    align-self:flex-end;

    transition:.25s;

}

.link:hover{

    color:var(--verde-hover);
    text-decoration:underline;

}

.boton-enviar{

    width:100%;
    height:52px;

    border:none;

    border-radius:12px;

    background:var(--verde);

    color:white;

    font-size:1rem;
    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.boton-enviar:hover{

    background:var(--verde-hover);
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(76,175,80,.3);

}

.boton-enviar:active{

    transform:scale(.98);

}

.mensaje{

    margin-bottom:15px;
    text-align:center;
    color:#d32f2f;
    font-weight:500;

}

@media(max-width:500px){

    .ficha{

        width:95%;
        padding:30px 25px;

    }

    .logo img{

        width:120px;

    }

}