:root {
    --ink: #071f1a;
    --green: #00ad69;
    --gold: #f2bd35;
    --cream: #f7f5ee;
    --muted: #60716b;
    --line: #dce5df;
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(circle at 75% 20%, #174d3f 0, var(--ink) 44%, #051812 100%); font-family: Inter, 'Segoe UI', Arial, sans-serif; }
a { color: inherit; }
.access-page { display: grid; place-items: center; min-height: 100vh; padding: 32px 20px; }
.access-card { width: min(100%, 460px); padding: 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: var(--cream); box-shadow: 0 28px 80px rgba(0,0,0,.3); }
.brand { display: inline-block; margin-bottom: 30px; }
.brand img { display: block; width: 180px; height: auto; }
h1 { margin: 0 0 10px; font-size: clamp(30px, 7vw, 42px); letter-spacing: -.04em; }
.intro { margin: 0 0 28px; color: var(--muted); line-height: 1.55; }
label { display: block; margin: 18px 0 7px; font-size: 14px; font-weight: 700; }
input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fff; font: inherit; }
input:focus { border-color: var(--green); outline: 3px solid rgba(0,173,105,.15); }
.field-help { display: block; margin-top: 7px; color: var(--muted); }
.documento-confirmado { margin: 0 0 22px; padding: 12px 14px; border-radius: 10px; color: var(--muted); background: #e8f5ed; font-size: 14px; }
button { width: 100%; min-height: 52px; margin-top: 24px; border: 0; border-radius: 12px; color: #fff; background: var(--green); font: inherit; font-weight: 750; cursor: pointer; }
button:hover { background: #008d56; }
.alert { margin: 0 0 22px; padding: 13px 15px; border: 1px solid #e7b8b8; border-radius: 10px; color: #7e2525; background: #fff0f0; font-size: 14px; line-height: 1.45; }
.alert-warning { border-color: #ead187; color: #664c00; background: #fff8df; }
.alert-warning a { font-weight: 700; text-decoration: underline; }
.back { display: block; margin-top: 22px; color: var(--muted); font-size: 14px; text-align: center; }
.back:hover { color: var(--green); }

@media (max-width: 520px) {
    .access-card { padding: 30px 22px; }
}