/* Look & feel Foto/Set: editorial, sobrio, Source Serif 4, fondo gris cálido, tinta oscura, dorado como acento */
:root {
  color-scheme: light;
  --bg:#f3f2f2; --ink:#201e1d; --gold:#bfa166; --gold-ink:#8a6a2b; --error:#aa0b56;
  --line:color-mix(in srgb, var(--ink) 22%, transparent);
  --soft:color-mix(in srgb, var(--ink) 6%, transparent);
  --muted:color-mix(in srgb, var(--ink) 68%, var(--bg));
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.6 var(--serif); text-wrap:pretty; overflow-x:hidden; }
main { max-width:560px; margin:0 auto; padding:0 20px 120px; }
img { max-width:100%; display:block; }
a { color:var(--ink); }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

.brand { padding:18px 0 14px; border-bottom:1px solid var(--line); margin-bottom:28px; display:flex; align-items:center; justify-content:space-between; }
.brand img { height:52px; width:auto; }
.brand a.tiny { font-size:12px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; }

h1 { font:600 clamp(28px,7vw,38px)/1.15 var(--serif); margin:0 0 10px; letter-spacing:-.005em; }
h2 { font:600 15px/1.3 var(--serif); margin:30px 0 12px; }
.kicker { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); margin:0 0 10px; }
p.sub { color:var(--muted); margin:0 0 22px; }
em, .it { font-style:italic; }

button, .btn { font:600 14px/1 var(--serif); letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--ink); border-radius:2px;
  padding:15px 22px; background:var(--ink); color:var(--bg); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
button:hover, .btn:hover { background:color-mix(in srgb, var(--ink) 82%, var(--bg)); }
button.ghost, .btn.ghost { background:transparent; color:var(--ink); border-color:color-mix(in srgb, var(--ink) 45%, transparent); }
button.ghost:hover, .btn.ghost:hover { background:var(--soft); border-color:var(--ink); }
button:disabled { opacity:.4; cursor:default; }

input[type=text] { font:inherit; width:100%; padding:13px 14px; border-radius:2px; border:1px solid var(--line); background:transparent; color:var(--ink); margin:8px 0 18px; }
label { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

button.back { background:transparent; color:var(--ink); border:1px solid var(--ink); padding:11px 16px; margin:0 0 22px; font-size:13px; }
button.back:hover { background:var(--soft); }

/* lista de retos: filas con filete, número editorial */
.list { margin-top:-26px; }
.challenge { display:flex; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.challenge:hover .t { text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px; }
.challenge .num { font-style:italic; font-size:22px; color:var(--gold-ink); min-width:34px; }
.challenge .t { flex:1; line-height:1.35; }
.challenge .st { display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
.challenge.done .st { color:var(--gold-ink); }
.thumb { width:52px; height:66px; object-fit:cover; border-radius:0; }

.progress { height:1px; background:var(--line); margin:4px 0 26px; position:relative; }
.progress i { position:absolute; left:0; top:-1px; height:3px; background:var(--gold); }

.bar { position:fixed; left:0; right:0; bottom:0; padding:14px 20px calc(14px + env(safe-area-inset-bottom)); background:var(--bg); border-top:1px solid var(--line); }
.bar > div { max-width:560px; margin:0 auto; display:flex; gap:10px; }
.bar button, .bar .btn { flex:1; }

.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.grid.album { grid-template-columns:repeat(3,1fr); gap:6px; }
.shot { position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--soft); border:1px solid transparent; cursor:pointer; }
.shot img { width:100%; height:100%; object-fit:cover; }
.shot .chk { position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; background:var(--bg); color:var(--ink); border:1px solid var(--ink); display:grid; place-items:center; font-size:13px; line-height:1; }
.shot.sel { border-color:var(--ink); box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--gold); }
.shot.sel .chk { background:var(--ink); color:var(--bg); }

.chips { display:flex; gap:8px; overflow-x:auto; padding:0 20px 12px; margin:0 -20px 14px; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip { white-space:nowrap; padding:8px 14px; border:1px solid color-mix(in srgb, var(--ink) 35%, transparent); font-size:12px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; border-radius:2px; }
.chip.on { background:var(--ink); color:var(--bg); border-color:var(--ink); }

.lightbox { position:fixed; inset:0; background:rgba(32,30,29,.96); display:none; flex-direction:column; align-items:center; justify-content:center; gap:16px; z-index:9; padding:16px; }
.lightbox.open { display:flex; }
.lightbox img { max-height:72vh; }
.lightbox .cap { color:var(--bg); text-align:center; }
.lightbox .btn { background:var(--bg); color:var(--ink); border-color:var(--bg); }
.lightbox .ghost { color:var(--bg); border-color:color-mix(in srgb, var(--bg) 50%, transparent); }

.card { border:1px solid var(--line); padding:20px; margin-bottom:12px; }
.hidden { display:none !important; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; transition:none !important; } }