/* Tienda web: el mismo mundo del juego, un poster de tinta y bermellón. */
:root {
  --ink: #121013;
  --ink-2: #1e1a1e;
  --ink-3: #2c2529;
  --line: #4b3c37;
  --paper: #f3eadb;
  --paper-dim: #c2b3a2;
  --seal: #d4482f;
  --seal-deep: #a33320;
  --gold: #e3b45a;
  --jade: #7cc29a;
  --display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --body: Bahnschrift, "Trebuchet MS", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ink); color: var(--paper); font: 16px/1.5 var(--body); }
h1, h2, h3 { font-family: var(--display); margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.muted { color: var(--paper-dim); }

button { font: 700 15px var(--body); min-height: 46px; padding: 0 20px; border-radius: 2px; border: 1px solid var(--line); background: var(--ink-3); color: var(--paper); cursor: pointer; transition: background-color .15s, border-color .15s, transform .15s; }
button:hover { border-color: var(--paper-dim); }
button.primary { background: var(--seal); border-color: var(--seal); color: #fff8ee; }
button.primary:hover { background: var(--seal-deep); border-color: var(--seal-deep); }
button:disabled { opacity: .5; cursor: default; }
input { font: 18px var(--body); min-height: 46px; padding: 8px 12px; background: var(--ink); color: var(--paper); border: 1px solid var(--line); border-radius: 2px; width: 100%; }
label { display: grid; gap: 6px; font-size: 14px; color: var(--paper-dim); }

.hero { position: relative; min-height: 360px; display: grid; place-items: center; padding: 56px 16px 72px; text-align: center; background: url("/tienda/art/bg_login.png") center 35% / cover no-repeat; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 16, 19, .35), rgba(18, 16, 19, .55) 55%, var(--ink)); }
.hero-inner { position: relative; z-index: 1; display: grid; gap: 12px; justify-items: center; }
.logo { width: min(340px, 72vw); height: auto; }
.hero p { font-size: 19px; max-width: 34em; text-shadow: 0 1px 8px #000; }
.lang { position: absolute; z-index: 2; top: 16px; right: 16px; }
.lang button { min-height: 40px; padding: 0 14px; background: rgba(18, 16, 19, .7); }

.page { max-width: 1080px; margin: -40px auto 0; padding: 0 16px 64px; position: relative; z-index: 2; display: grid; gap: 40px; }
.step { display: grid; gap: 16px; }
.step-head { display: flex; gap: 12px; align-items: center; }
.step-num { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--seal); color: #fff8ee; font: 700 20px var(--display); transform: rotate(-4deg); }
.step-head h2 { font-size: 25px; }
.card { background: var(--ink-2); border: 1px solid var(--line); padding: 20px; }
.who { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.who-result { margin-top: 12px; font-size: 17px; }
.who-result strong { color: var(--gold); }
.who-error { margin-top: 12px; color: #ffb8a8; }

.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.pack { position: relative; background: var(--ink-2); border: 1px solid var(--line); padding: 16px; display: grid; gap: 8px; text-align: left; align-content: start; min-height: 0; font-weight: 400; height: 100%; }
.pack:hover { border-color: var(--gold); transform: translateY(-2px); }
.pack[aria-pressed=true] { border-color: var(--seal); box-shadow: inset 0 0 0 1px var(--seal); background: var(--ink-3); }
.pack img { width: 100%; height: 140px; object-fit: contain; }
.pack-art-empty { height: 140px; display: grid; place-items: center; font: 700 44px var(--display); color: var(--gold); }
.pack-name { font: 700 19px var(--display); }
.pack-gives { color: var(--paper-dim); font-size: 14px; }
.pack-price { font: 700 23px var(--display); color: var(--gold); margin-top: 4px; }
.pack-local { font-size: 13px; color: var(--paper-dim); }
.tag { position: absolute; top: 10px; left: 10px; background: var(--seal); color: #fff8ee; font-size: 12px; font-weight: 700; padding: 2px 8px; }
.pay { display: grid; gap: 14px; }
.pay-summary { font-size: 18px; }
.pay-summary strong { color: var(--gold); }
.pay-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.note { font-size: 14px; color: var(--paper-dim); }
.error { color: #ffb8a8; }

.result { max-width: 560px; margin: -40px auto 64px; padding: 0 16px; position: relative; z-index: 2; }
.result .card { display: grid; gap: 14px; text-align: center; justify-items: center; padding: 32px 24px; }
.seal-mark { width: 84px; height: 84px; display: grid; place-items: center; border: 3px solid currentColor; font: 700 34px var(--display); transform: rotate(-6deg); }
.seal-mark.ok { color: var(--jade); }
.seal-mark.wait { color: var(--gold); }
.seal-mark.bad { color: #ff8a73; }
.code { font-family: Consolas, monospace; font-size: 22px; font-weight: 700; color: var(--gold); }
.instructions { white-space: pre-line; background: var(--ink); border: 1px dashed var(--line); padding: 14px; text-align: left; width: 100%; }
.test-banner { background: var(--gold); color: var(--ink); font-weight: 700; padding: 6px 12px; }
footer { text-align: center; color: var(--paper-dim); font-size: 13px; padding: 0 16px 32px; }
@media (max-width: 560px) { .who { grid-template-columns: minmax(0, 1fr); } .hero { min-height: 280px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }