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

    html,body{height:100%}

    body{

      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

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

      background: linear-gradient(135deg,#fff7e6,#ffe6cc);

      color:#4a3c27;

      padding:20px;

    }



    .card{

      width:100%;max-width:400px;background:#fffef8;border-radius:18px;padding:28px;box-shadow: 0 8px 30px rgba(0,0,0,0.15);

      border:2px solid #f5d07a;position:relative;overflow:hidden;

    }



    .card::before{

      content:"";position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;background:#f9e0a6;z-index:0;

    }



    .logo{

      display:flex;align-items:center;justify-content:center;background:#f5d07a;width:80px;height:80px;border-radius:50%;

      font-size:28px;font-weight:700;color:#4a3c27;margin:0 auto 12px auto;box-shadow: 0 4px 12px rgba(0,0,0,0.1);

    }



    h1{text-align:center;font-size:22px;margin-bottom:6px;}

    p{text-align:center;font-size:14px;margin-bottom:20px;color:#6e5a3d;}



    form{display:flex;flex-direction:column;gap:12px;z-index:1;position:relative}

    label{font-size:13px;font-weight:600;}

    .input{

      border:1px solid #f5d07a;border-radius:10px;padding:10px 14px;font-size:14px;outline:none;background:#fffaf0;color:#4a3c27;

    }

    .input:focus{border-color:#e6b84c;box-shadow:0 0 0 3px rgba(230,184,76,0.2)}



    .row{display:flex;align-items:center;justify-content:space-between}

    .checkbox{display:flex;gap:6px;align-items:center;font-size:13px}

    .hint{font-size:12px;color:#8a7756}



    .btn-primary{

      background:#e6b84c;border:none;padding:10px 14px;border-radius:10px;font-weight:700;color:#fff;cursor:pointer;

      box-shadow:0 4px 10px rgba(230,184,76,0.4);transition:transform 0.1s;

    }

    .btn-primary:active{transform:translateY(1px)}



    .alt{text-align:center;font-size:13px;color:#6e5a3d;margin-top:12px}



    /* Animación de logo */

    @keyframes bounceEgg{

      0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}

    }

    .logo{animation:bounceEgg 3s ease-in-out infinite}