:root { --verde: #1c7e59; --verde-osc: #1c684a; --oro: #ebab25; --hoja: #68ab44; --menta: #e3f0ea; --fg: #17302a; --muted: #5b6f68; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--fg); background: linear-gradient(160deg, var(--verde-osc), var(--verde) 55%, #2a9a6e); display: grid; place-items: center; padding: 16px; overflow: hidden; }
.bg span { position: fixed; border-radius: 50%; filter: blur(2px); opacity: .18; animation: float 14s ease-in-out infinite; }
.bg span:nth-child(1) { width: 420px; height: 420px; background: var(--oro); top: -120px; right: -100px; }
.bg span:nth-child(2) { width: 300px; height: 300px; background: var(--hoja); bottom: -80px; left: -60px; animation-delay: -5s; }
.bg span:nth-child(3) { width: 180px; height: 180px; background: #fff; top: 40%; left: 12%; animation-delay: -9s; }
@keyframes float { 50% { transform: translate(30px, -40px) scale(1.08); } }
.card { position: relative; width: min(420px, 100%); background: #fff; border-radius: 18px; padding: 32px 28px; box-shadow: 0 30px 60px rgba(0,0,0,.25); animation: rise .7s cubic-bezier(.2,.8,.2,1) both; border-top: 6px solid var(--oro); }
@keyframes rise { from { opacity: 0; transform: translateY(30px) scale(.97); } }
.logo { height: 64px; display: block; margin-bottom: 18px; }
h1 { margin: 0 0 6px; color: var(--verde-osc); font-size: 1.4rem; }
p { color: var(--muted); margin: 0 0 20px; line-height: 1.45; font-size: .95rem; }
label { font-size: .8rem; font-weight: 600; color: var(--verde-osc); text-transform: uppercase; letter-spacing: .05em; }
.row { display: flex; gap: 8px; margin: 6px 0 14px; }
input { flex: 1; min-width: 0; font: inherit; padding: 12px 14px; border: 2px solid #d5e6de; border-radius: 10px; outline: none; transition: border-color .2s; }
input:focus { border-color: var(--verde); }
#eye { border: 2px solid #d5e6de; background: #fff; border-radius: 10px; width: 48px; cursor: pointer; }
#go { width: 100%; font: inherit; font-weight: 600; padding: 12px; border: 0; border-radius: 10px; background: var(--verde); color: #fff; cursor: pointer; transition: background .2s, transform .1s; }
#go:hover { background: var(--verde-osc); } #go:active { transform: scale(.98); }
#go:disabled { opacity: .7; cursor: wait; }
#msg { min-height: 1.3em; margin: 12px 0 0; color: #b3261e; font-size: .9rem; }
.shake { animation: shake .4s; }
@keyframes shake { 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }