:root {
  --ground:#F8FAF9; --surface:#FFFFFF; --surface-2:#F1F5F4;
  --ink:#132220; --ink-2:#3D514E; --muted:#6B7F7C;
  --line:#DCE5E3; --line-strong:#C3D1CE;
  --accent:#0E6A5F; --accent-ink:#FFFFFF; --accent-soft:#E2EFEC; --accent-line:#9CC7C0;
  --warn:#A44A22; --warn-soft:#F7EAE3;
  --shadow:0 1px 2px rgba(19,34,32,.06), 0 8px 24px rgba(19,34,32,.06);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --radius:10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0D1615; --surface:#152220; --surface-2:#1C2C2A;
    --ink:#E8EFED; --ink-2:#BCCCC9; --muted:#8FA3A0;
    --line:#263835; --line-strong:#354B48;
    --accent:#4FC0AE; --accent-ink:#08211D; --accent-soft:#173330; --accent-line:#2C5B54;
    --warn:#E08A5C; --warn-soft:#33231A;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  }
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
}
.wrap { max-width:820px; margin:0 auto; padding:0 20px 120px; }

/* barra superior */
.bar { position:sticky; top:0; z-index:20; background:var(--ground); border-bottom:1px solid var(--line); }
.bar-in { max-width:820px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.brand { font-family:var(--serif); font-size:15px; margin-right:auto; }
.brand b { font-weight:600; }
.brand span { color:var(--muted); }
.stat { font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink-2); white-space:nowrap; }
.stat u { text-decoration:none; color:var(--muted); }
.track { height:3px; background:var(--line); }
.track > i { display:block; height:100%; background:var(--accent); width:0; transition:width .25s ease; }

/* tipografía */
h1 { font-family:var(--serif); font-weight:600; font-size:31px; line-height:1.2; margin:0 0 10px; text-wrap:balance; letter-spacing:-.01em; }
h2 { font-family:var(--serif); font-weight:600; font-size:21px; margin:0 0 10px; }
.eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 12px; }
.lede { color:var(--ink-2); margin:0 0 14px; max-width:62ch; }
header.intro { padding:40px 0 8px; }

/* superficies */
.card { background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:26px; }
.note { background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--accent-line);
        border-radius:var(--radius); padding:14px 16px; color:var(--ink-2); font-size:14.5px; }
.note b { color:var(--ink); }
.alert { background:var(--warn-soft); border:1px solid var(--warn); color:var(--warn);
         border-radius:var(--radius); padding:12px 15px; font-size:14.5px; }

/* controles */
.btn { font:inherit; font-size:15px; padding:11px 20px; border-radius:var(--radius);
       border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
       cursor:pointer; transition:background .12s, border-color .12s; }
.btn:hover { background:var(--surface-2); border-color:var(--accent-line); }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.btn-main { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; }
.btn-main:hover { filter:brightness(1.08); background:var(--accent); border-color:var(--accent); }
.btn-quiet { border-color:transparent; background:transparent; color:var(--ink-2); }
.nav { display:flex; gap:10px; align-items:center; margin-top:22px; flex-wrap:wrap; }
.nav .spacer { margin-left:auto; }

input[type="email"] {
  font:inherit; padding:12px 14px; border-radius:var(--radius); width:100%;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
}
input[type="email"]:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* estado de sincronización */
.sync { font-family:var(--mono); font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.sync::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--muted); }
.sync[data-state="ok"]::before { background:var(--accent); }
.sync[data-state="pend"]::before { background:var(--warn); }
.sync[data-state="err"]::before { background:var(--warn); }

.hide { display:none !important; }
footer { margin-top:44px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }