body{
    font-family: Arial, Helvetica, sans-serif;
    background:#eef5ff;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
}

.container{
    width:100%;
    max-width:420px;
}

/* 🌾 ESCENA CAMPO */
.scene{
    width:100%;
    height:160px;
    background:linear-gradient(#87CEEB,#c7ecff);
    border-radius:15px 15px 0 0;
    position:relative;
    overflow:hidden;
}

/* ☀️ SOL */
.sun{
    width:60px;
    height:60px;
    background:#FFD93D;
    border-radius:50%;
    position:absolute;
    top:20px;
    right:20px;
    animation: sunMove 6s infinite alternate;
}

@keyframes sunMove{
    from{ transform:translateY(0); }
    to{ transform:translateY(10px); }
}

/* ☁️ NUBES */
.cloud{
    width:70px;
    height:30px;
    background:white;
    border-radius:50px;
    position:absolute;
}

.cloud1{
    top:30px;
    left:-80px;
    animation: cloudMove 18s linear infinite;
}

.cloud2{
    top:70px;
    left:-120px;
    animation: cloudMove 25s linear infinite;
}

@keyframes cloudMove{
    from{ left:-120px; }
    to{ left:500px; }
}

/* 🌱 SUELO */
.ground{
    position:absolute;
    bottom:0;
    width:100%;
    height:50px;
    background:#6dbf4b;
}

/* 👨‍🌾 AGRICULTOR */
.farmer{
    position:absolute;
    bottom:40px;
    left:40px;
}

/* cabeza */
.head{
    width:22px;
    height:22px;
    background:#ffcc99;
    border-radius:50%;
    position:absolute;
    top:0;
    left:10px;
}

/* sombrero */
.hat{
    width:35px;
    height:10px;
    background:#8B5E3C;
    position:absolute;
    top:-5px;
    left:3px;
    border-radius:5px;
}

/* cuerpo */
.body{
    width:18px;
    height:30px;
    background:#2d6cdf;
    position:absolute;
    top:20px;
    left:12px;
}

/* brazos animados */
.arm{
    width:6px;
    height:22px;
    background:#ffcc99;
    position:absolute;
    top:22px;
    transform-origin:top;
    animation:armMove 1s infinite alternate;
}

.arm-left{ left:5px; }
.arm-right{ left:25px; animation-delay:.5s; }

@keyframes armMove{
    from{ transform:rotate(20deg); }
    to{ transform:rotate(-20deg); }
}

/* piernas caminando */
.leg{
    width:6px;
    height:22px;
    background:#333;
    position:absolute;
    top:50px;
    transform-origin:top;
    animation:walk 1s infinite alternate;
}

.leg-left{ left:12px; }
.leg-right{ left:20px; animation-delay:.5s; }

@keyframes walk{
    from{ transform:rotate(20deg); }
    to{ transform:rotate(-20deg); }
}

/* 🧾 FORMULARIO */
.card{
    background:white;
    padding:25px;
    border-radius:0 0 15px 15px;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

h2{text-align:center;}

label{
    font-weight:bold;
    margin-top:10px;
    display:block;
}

input{
    width:100%;
    padding:10px;
    margin-top:5px;
    border-radius:8px;
    border:1px solid #ccc;
}

button{
    width:100%;
    padding:12px;
    margin-top:20px;
    border:none;
    background:#4CAF50;
    color:white;
    font-size:16px;
    border-radius:8px;
    cursor:pointer;
    transition:.3s;
}

button:hover{
    background:#3e9c40;
}