:root {
  --blue: #2c54ff; --blue-deep: #1c3be0; --blue-soft: #e4eaff; --lime: #d5ff38; --ink: #111216;
  --grey: #71747b; --paper: #f2f1ee; --well: #e8e7e2; --live: #22b455; --danger: #e5352b;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}
.hero { background: linear-gradient(var(--blue), var(--blue-deep)); color: #fff; padding: 36px 20px 64px; text-align: center; border-radius: 0 0 32px 32px; }
.hero img { height: 34px; }
.hero h1 { font: 800 28px/1.15 ui-rounded, "SF Pro Rounded", -apple-system, sans-serif; margin: 18px 0 6px; }
.hero p { margin: 0; opacity: .85; }
main { max-width: 520px; margin: -40px auto 40px; padding: 0 16px; }
.card { background: #fff; border-radius: 24px; padding: 18px; box-shadow: 0 6px 14px rgba(17,18,22,.05); margin-bottom: 14px; }
.card h2 { font: 700 18px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif; margin: 0 0 10px; }
ul.list { list-style: none; padding: 0; margin: 0; }
ul.list li { display: flex; gap: 10px; padding: 6px 0; }
.row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--well); }
.row:first-of-type { border-top: 0; }
button { font: 700 17px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif; border: 0; border-radius: 999px; height: 54px; width: 100%; cursor: pointer; }
.primary { background: linear-gradient(#3a62ff, var(--blue-deep)); color: #fff; box-shadow: 0 6px 12px rgba(44,84,255,.3); }
.ghost { background: #fff; color: var(--ink); margin-top: 10px; }
.danger { background: #fde7e5; color: var(--danger); margin-top: 10px; }
.note { color: var(--grey); font-size: 14px; text-align: center; }
.status { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.status.granted { background: #ddf5e5; color: #16884a; } .status.pending { background: var(--blue-soft); color: var(--blue); }
.status.revoked { background: #fde7e5; color: var(--danger); }
.switch { position: relative; width: 50px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--well); border-radius: 30px; transition: .2s; }
.switch span::before { content: ""; position: absolute; width: 26px; height: 26px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + span { background: var(--live); }
.switch input:checked + span::before { transform: translateX(20px); }
[hidden] { display: none !important; }
/* Páginas legales y de soporte */
.doc { max-width: 720px; margin: -40px auto 40px; padding: 0 16px; }
.doc .card h2 { margin-top: 6px; }
.doc .card p, .doc .card li { color: #2a2c31; }
.draft { background: #fff3cc; color: #7a5b00; border-radius: 16px; padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }
footer.site { text-align: center; color: var(--grey); font-size: 13px; padding: 10px 16px 30px; }
footer.site a { color: var(--grey); margin: 0 8px; }