:root{
  --red:#F40009; --red-dk:#B4060C; --ink:#12100F; --ink-2:#4A4644;
  --paper:#FBF7F2; --line:#E7DFD5; --gold:#C8A24A;
  --sans:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Playfair Display',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--sans); background:#1A1614; color:var(--ink);
  display:grid; place-items:center; min-height:100dvh; padding:16px;
}

/* Marco de teléfono: en laptop el demo se lee como pieza móvil intencional */
.frame{display:flex;flex-direction:column;align-items:center;gap:12px}
.phone{
  position:relative; width:min(420px,100vw - 32px); height:min(860px,100dvh - 72px);
  background:var(--paper); border-radius:34px; overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
}
.disclaimer{font:400 11px/1.4 var(--sans);color:#6C6461;text-align:center;max-width:420px}

/* Embebido (dentro de un iframe en la propuesta): suelta su propio marco de
   teléfono. Si no, queda un teléfono dentro de un teléfono y el contenido se
   apretuja contra el pie. El marco lo pone quien embebe. */
body.embed{padding:0;background:var(--paper)}
body.embed .frame{width:100%;height:100%;gap:0}
body.embed .phone{width:100%;height:100%;border-radius:0;box-shadow:none}
body.embed .disclaimer{display:none}

.screen{position:absolute;inset:0;display:none;flex-direction:column;background:var(--paper)}
.screen.is-active{display:flex}

/* ── barra ── */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 16px 12px; background:var(--red); color:#fff; flex:0 0 auto;
}
.brand{font:700 16px/1 var(--sans);letter-spacing:.2px;display:flex;align-items:center;gap:9px}
/* Los logos van como archivo en public/logos/. Si faltan, el onerror los quita y
   la barra sigue viéndose bien: el demo nunca muestra un ícono roto. */
.logo-coca{height:18px;width:auto;display:block}
.logo-oxxo{height:22px;width:auto;display:block}   /* ya trae su propio marco blanco/amarillo */
.brand-x{font:400 13px var(--sans);opacity:.6}
.chip{
  font:700 12px var(--sans); color:var(--red); background:#fff; border:0;
  padding:7px 11px; border-radius:99px; cursor:pointer;
}
.chip.ghost{background:rgba(255,255,255,.16);color:#fff}
.chip b{font-size:13px}
.back-t{background:none;border:0;color:#fff;font:600 14px var(--sans);cursor:pointer;padding:4px}

/* ── mapa ── */
#map{flex:1 1 auto;min-height:0;background:#E8E2DA}
.leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.7)}

.pin{display:grid;place-items:center}
.pin i{
  width:26px;height:26px;border-radius:50%;background:var(--red);
  border:2.5px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.35);
  display:grid;place-items:center;font:800 11px var(--sans);color:#fff;font-style:normal;
}
.pin.legendaria i{background:var(--gold)}
.pin.rara i{background:#7A4B12}
.me i{
  width:16px;height:16px;background:#1673F0;border:3px solid #fff;border-radius:50%;
  box-shadow:0 0 0 6px rgba(22,115,240,.22),0 2px 8px rgba(0,0,0,.3);
}

/* ── hoja inferior ── */
.sheet{
  flex:0 0 auto; background:#fff; border-radius:20px 20px 0 0; padding:8px 16px 14px;
  box-shadow:0 -10px 30px rgba(0,0,0,.10); z-index:500; margin-top:-20px;
}
.sheet-grip{width:38px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 10px}
.sheet h2{font:700 13px var(--sans);letter-spacing:.6px;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
#store-list{list-style:none;display:flex;flex-direction:column;gap:7px}

.store{
  display:flex;align-items:center;gap:11px;padding:10px;border:1px solid var(--line);
  border-radius:13px;background:var(--paper);
}
.store.near{border-color:var(--red);background:#FFF3F3}
.store-dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex:0 0 auto}
.store.legendaria .store-dot{background:var(--gold)}
.store.rara .store-dot{background:#7A4B12}
.store-txt{flex:1 1 auto;min-width:0}
.store-name{font:600 14px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-meta{font:500 11.5px var(--sans);color:var(--ink-2);margin-top:2px}
.store-meta em{font-style:normal;color:var(--gold);font-weight:700}
.store.rara .store-meta em{color:#7A4B12}
.store.comun .store-meta em{color:var(--red)}
.walk{
  font:700 11px var(--sans);color:#fff;background:var(--ink);border:0;border-radius:99px;
  padding:8px 11px;cursor:pointer;flex:0 0 auto;
}
.walk[disabled]{opacity:.35;cursor:default}
.store.near .walk{background:var(--red)}
.store.got .walk{background:#2E7D32}

.demo-note{font:500 10.5px/1.4 var(--sans);color:#8A827E;text-align:center;margin-top:10px}
.demo-note.warn{color:#B4060C;font-weight:700}

.modes{display:flex;gap:5px;margin-bottom:9px;background:var(--paper);padding:3px;
  border-radius:10px;border:1px solid var(--line)}
.mode-b{flex:1;font:700 11px var(--sans);color:var(--ink-2);background:none;border:0;
  padding:7px 4px;border-radius:8px;cursor:pointer;white-space:nowrap}
.mode-b.on{background:var(--red);color:#fff}

/* ── hallazgo ── */
#s-found{background:var(--red);color:#fff;align-items:center;justify-content:center;overflow:hidden}
.found-glow{
  position:absolute;width:150%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.28),transparent 62%);
  animation:pulse 3.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(.82);opacity:.55}50%{transform:scale(1.08);opacity:1}}
.found-inner{position:relative;text-align:center;padding:32px;display:grid;gap:12px;justify-items:center}
.found-kicker{font:600 13px var(--sans);opacity:.85}
.found-title{font:700 34px/1.1 var(--display);letter-spacing:-.3px}
.found-name{font:800 27px/1 var(--sans);letter-spacing:-.6px;margin-top:4px}
.found-tagline{font:italic 700 19px/1 var(--display);opacity:.7}
.rarity{
  font:800 10.5px var(--sans);letter-spacing:1.4px;text-transform:uppercase;
  padding:6px 13px;border-radius:99px;background:#fff;color:var(--red);
}
.rarity.legendaria{background:var(--gold);color:#3A2A00}
.rarity.rara{background:#7A4B12;color:#fff}

.cta{
  font:700 15px var(--sans);color:var(--red);background:#fff;border:0;border-radius:99px;
  padding:15px 26px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.22);width:100%;max-width:300px;
}
.cta:active{transform:translateY(1px)}

/* ── AR ── */
#s-ar{background:#000}
#cam,#gl,.ar-fallback{position:absolute;inset:0;width:100%;height:100%}
#cam{object-fit:cover}
.ar-fallback{background:radial-gradient(120% 80% at 50% 25%,#5B2E2A,#141010 70%);display:none}
.ar-fallback.on{display:grid;align-content:start;justify-items:center;padding-top:64px}
/* Si la cámara falla, el fondo SOLO no basta: hay que decir por qué, o parece
   que el AR está roto (le pasó a Alejo, le va a pasar al cliente). */
.nocam{text-align:center;max-width:250px;color:#fff}
.nocam b{display:block;font:800 14px var(--sans);letter-spacing:.3px;margin-bottom:6px;
  background:rgba(0,0,0,.4);padding:5px 12px;border-radius:99px;display:inline-block}
.nocam p{margin-top:9px;font:500 12px/1.5 var(--sans);opacity:.8;text-shadow:0 1px 6px rgba(0,0,0,.7)}
#gl{pointer-events:none}
.ar-ui{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px;pointer-events:none}
.ar-ui>*{pointer-events:auto}
.back{
  width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;
  font:400 17px var(--sans);cursor:pointer;backdrop-filter:blur(8px);align-self:flex-start;
}
.ar-caption{
  position:absolute;left:16px;right:16px;bottom:86px;text-align:center;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.85);pointer-events:none;
}
.ar-caption b{display:block;font:800 21px var(--sans)}
.ar-caption span{font:italic 700 14px var(--display);opacity:.85}
.ar-hint{display:block;margin-top:7px;font:500 11.5px var(--sans);opacity:.75;font-style:normal}
#btn-claim{align-self:center}

/* ── bono ── */
#s-bono{background:var(--red);align-items:center;justify-content:center;padding:22px}
.bono-wrap{display:grid;gap:18px;justify-items:center;width:100%;max-width:320px}
.bono-kicker{font:600 12.5px var(--sans);color:#fff;opacity:.85;text-align:center}

.ticket{width:100%;background:var(--paper);border-radius:14px;overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.32)}
.ticket-top{padding:22px 20px 18px;text-align:center;display:grid;gap:9px;justify-items:center}
.ticket-offer{font:700 24px/1.15 var(--display);color:var(--ink);letter-spacing:-.2px}
.ticket-detail{font:500 12.5px var(--sans);color:var(--ink-2)}

/* Borde troquelado: los semicírculos laterales + la línea punteada son lo que
   hace que el ojo lo lea como cupón físico y no como tarjeta. */
.ticket-perf{position:relative;height:20px;display:flex;align-items:center}
.ticket-perf::before{content:'';flex:1;margin:0 14px;
  border-top:2px dashed var(--line)}
.ticket-perf span{position:absolute;width:20px;height:20px;border-radius:50%;
  background:var(--red)}
.ticket-perf span:first-child{left:-10px}
.ticket-perf span:last-child{right:-10px}

.ticket-bot{padding:14px 20px 20px;text-align:center;display:grid;gap:8px;justify-items:center}
.barcode{display:flex;align-items:flex-end;gap:2px;height:44px}
.barcode i{display:block;height:100%;background:var(--ink)}
.barcode i:nth-child(3n){height:78%}
.barcode i:nth-child(5n){height:88%}
.ticket-code{font:700 17px/1 ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:2.5px;color:var(--ink)}
.ticket-exp{font:500 10.5px var(--sans);color:var(--ink-2);opacity:.8}

/* ── álbum ── */
#s-album{background:var(--paper)}
.album-scroll{flex:1 1 auto;overflow-y:auto;padding:18px 16px 28px}
.album-lead{font:500 13.5px/1.5 var(--sans);color:var(--ink-2);margin-bottom:16px}
.album-grid{display:grid;gap:12px}
.slot{
  display:flex;gap:13px;padding:13px;border-radius:15px;background:#fff;
  border:1px solid var(--line);align-items:center;
}
.slot.locked{background:transparent;border-style:dashed;opacity:.62}
.slot canvas,.slot .ghosty{
  width:72px;height:96px;flex:0 0 auto;border-radius:9px;background:#F2ECE4;
}
.slot .ghosty{display:grid;place-items:center;font:800 22px var(--sans);color:#C9BFB2}
.slot-txt{flex:1 1 auto;min-width:0}
.slot-year{font:italic 700 18px var(--display);letter-spacing:-.2px}
.slot-name{font:700 13px var(--sans);color:var(--ink-2);margin:2px 0 5px}
.slot-blurb{font:400 11.5px/1.45 var(--sans);color:var(--ink-2)}
.slot-tag{
  display:inline-block;margin-top:6px;font:800 9px var(--sans);letter-spacing:1.1px;
  text-transform:uppercase;padding:3px 8px;border-radius:99px;background:var(--red);color:#fff;
}
.slot-tag.legendaria{background:var(--gold);color:#3A2A00}
.slot-tag.rara{background:#7A4B12}
.slot.locked .slot-year,.slot.locked .slot-name{color:#B3A99C}
.slot.locked .slot-blurb{color:#B3A99C}

.album-done{
  display:none;margin-top:18px;padding:18px;border-radius:15px;
  background:var(--red);color:#fff;text-align:center;
}
.album-done.on{display:block}
.album-done h3{font:800 19px var(--sans);margin-bottom:5px}
.album-done p{font:500 12.5px/1.5 var(--sans);opacity:.9}
.done-reset{margin-top:13px;font:700 12.5px var(--sans);color:var(--red);background:#fff;
  border:0;border-radius:99px;padding:10px 18px;cursor:pointer}

/* Reset del demo: visible pero fuera del camino, para no tocarlo por accidente
   en medio de una presentación. */
.reset{display:block;margin:18px auto 0;font:600 11.5px var(--sans);color:#9A928D;
  background:none;border:1px solid var(--line);border-radius:99px;padding:8px 16px;cursor:pointer}
.reset:active{background:var(--line)}

/* confeti */
#confetti{position:absolute;inset:0;pointer-events:none;z-index:900;display:none}
#confetti.on{display:block}