/* Uno de Miga · estilos compartidos (tarjeta del cliente)
   Tema único a propósito: la marca de Uno de Miga (crema + rojo del logo). */
:root{
  --cream:#F5EFE7; --paper:#FFFBF6; --red:#C9300D; --red-dk:#9C240A; --ink:#2A1A14; --ink-2:#6B5249;
  --mustard:#F2B33D; --mustard-soft:#FFF2D4; --olive:#3D6B38; --line:#E8DCCD; --soft:#EFE5D8;
  --f-display:"Archivo Black","Arial Black",Impact,sans-serif;
  --f-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--cream);margin:0}
body{color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}
[hidden]{display:none!important}
input,textarea,select{color:var(--ink);-webkit-text-fill-color:var(--ink);background-color:#fff}

.cv{display:flex;flex-direction:column;gap:12px}
.hello{display:flex;align-items:center;gap:10px}
.hello img{width:78px;height:auto}
.hello b{display:block;font-size:16px}
.hello small{font:500 11px/1.2 var(--f-mono);color:var(--ink-2)}
.hello button{border:0;background:none;padding:0;font-size:12px;color:var(--ink-2);text-decoration:underline}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px}
.card h3{margin:0;font-family:var(--f-display);font-size:16px;text-transform:uppercase;display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:400}
.card h3 em{font:500 13px var(--f-mono);font-style:normal;color:var(--ink-2)}
.card .prize{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.grid-st{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:12px 0 10px}
.grid-st.six{grid-template-columns:repeat(6,1fr)}
.slot{aspect-ratio:1;border-radius:50%;border:2px dashed var(--line);display:grid;place-items:center;max-width:100%;position:relative}
.slot > svg{grid-area:1/1}
.slot svg{width:100%;height:100%;display:block}
.slot.on{border:0}
.slot.new{z-index:3}
.slot.new > svg{animation:slam .6s cubic-bezier(.35,0,.25,1) var(--d,0s) both}
.slot.new::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--red);opacity:0;animation:splat .5s ease-out calc(var(--d,0s) + .38s) both;pointer-events:none}
.card:has(.slot.new){animation:hit .35s ease-out .36s both}
.gifts .g2::after{animation-delay:1.08s}
@keyframes slam{0%{transform:scale(4.2) rotate(-18deg);opacity:0;filter:blur(3px)}35%{opacity:.85}62%{transform:scale(.9) rotate(0);opacity:1;filter:blur(0)}78%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes splat{0%{opacity:.7;transform:scale(.85)}100%{opacity:0;transform:scale(1.35)}}
@keyframes hit{0%,100%{transform:translate(0,0)}25%{transform:translate(0,3px)}50%{transform:translate(-2px,-1px)}75%{transform:translate(1px,1px)}}
@keyframes inkin{0%{opacity:0;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
.slot.gift{border-color:var(--mustard);background:var(--mustard-soft)}
.slot.gift.on{background:transparent}
.slot .star{font-size:15px;color:var(--mustard)}
.msg{border-radius:12px;padding:9px 11px;font-size:14px}
.msg.calm{background:var(--soft)}
.msg.mid{background:var(--mustard-soft)}
.msg.near{background:var(--mustard);font-weight:700}
.msg.last{background:var(--red);color:#fff;font-weight:700;animation:glow 1.6s ease-in-out infinite}
.msg.won{background:var(--olive);color:#fff;font-weight:700}
.msg b{font-family:var(--f-display);text-transform:uppercase;font-weight:400}
.promo-w{background:var(--red);color:#fff;border-radius:18px;padding:12px 14px;display:flex;gap:12px;align-items:center}
.promo-w img{width:64px;height:64px;object-fit:cover;border-radius:12px;flex:none}
.promo-w b{font-family:var(--f-display);text-transform:uppercase;font-size:14.5px;display:block;font-weight:400}
.promo-w span{font-size:13px;opacity:.95}
.act{display:grid;gap:8px}
.act a{display:flex;justify-content:space-between;align-items:center;gap:10px;text-decoration:none;border-radius:14px;padding:13px 14px;font-weight:700;font-size:15px;background:var(--ink);color:var(--cream)}
.act a.alt{background:#fff;color:var(--ink);border:1px solid var(--line)}
.act a.rev{background:#fff;color:var(--ink);border:1.5px solid var(--mustard);padding:11px 14px}
.act a.rev span{display:grid;font-weight:500;font-size:13px;color:var(--ink-2)}
.act a.rev span b{font-size:15px;color:var(--ink)}
.act a.rev i{font-style:normal;color:var(--mustard);font-size:21px;letter-spacing:1px;white-space:nowrap;text-shadow:0 1px 0 #C98A12}
.act small{font-weight:500;opacity:.8;font-size:12px}
.foot{text-align:center;font:500 11px var(--f-mono);color:var(--ink-2)}

.welcome{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:18px 4px}
.welcome img{width:150px}
.welcome h3{font-family:var(--f-display);text-transform:uppercase;font-size:25px;line-height:1.05;margin:0;color:var(--red);font-weight:400}
.welcome p{margin:0;font-size:15px;color:var(--ink-2);max-width:30ch}
.gifts{display:flex;gap:14px}
.gifts .slot{width:80px;height:80px}
.gift-tag{font:700 12px var(--f-body);background:var(--mustard);border-radius:99px;padding:5px 12px;text-transform:uppercase;letter-spacing:.05em}
.name-f{width:100%;display:grid;gap:8px}
.name-f input{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;font:inherit;font-size:17px;background:#fff;color:var(--ink);-webkit-text-fill-color:var(--ink);caret-color:var(--red);text-align:center;opacity:1}
.name-f input::placeholder{color:#A8968B;-webkit-text-fill-color:#A8968B}
.name-f small{color:var(--ink-2);font-size:12px}
.big{border:0;background:var(--red);color:#fff;border-radius:14px;padding:13px 16px;font-weight:700;width:100%;font-size:15px}
.big.dark{background:var(--ink)}
.big.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.big.gold{background:var(--mustard);color:var(--ink)}
.linkbtn{border:0;background:none;color:var(--ink-2);text-decoration:underline;font-size:14px;padding:6px}

@keyframes thump{0%{transform:scale(2.3) rotate(-25deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(201,48,13,.4)}50%{box-shadow:0 0 0 6px rgba(201,48,13,0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Avisos del local en la tarjeta */
.promo-badge{background:var(--mustard);color:var(--ink);border-radius:12px;padding:9px 12px;font-size:14px;text-align:center}
.promo-badge b{font-family:var(--f-display);text-transform:uppercase;font-weight:400;letter-spacing:.02em}
.aviso{background:var(--soft);border-radius:12px;padding:9px 12px;font-size:14px;color:var(--ink)}
.welcome .promo-badge,.welcome .aviso{width:100%}

/* Vista del local al tocar un llavero */
.vend{position:relative}
.vbar{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--cream);border-radius:14px;padding:8px 10px;font-size:13px}
.vbar span:nth-child(2){flex:1;opacity:.85}
.vbar a,.vbar button{color:var(--cream);background:none;border:1px solid rgba(255,255,255,.3);border-radius:9px;padding:5px 10px;font-size:13px;text-decoration:none}
.pill-rol{background:var(--mustard);color:var(--ink);border-radius:99px;padding:3px 9px;font:700 11px var(--f-body);text-transform:uppercase;letter-spacing:.05em}
.vhead b{display:block;font-family:var(--f-display);font-size:20px;text-transform:uppercase;font-weight:400;line-height:1.1}
.vhead small{font:500 12px var(--f-mono);color:var(--ink-2)}
.vacts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vacts .big{padding:15px 10px}
.vok{background:var(--olive);color:#fff;border-radius:12px;padding:9px 12px;font-weight:700;font-size:14px}
.vnote{margin:0;font-size:12.5px;color:var(--ink-2);text-align:center}
.vfx{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:20}
.vfx span{font:34px/1 var(--f-display);color:var(--red);border:6px solid var(--red);border-radius:16px;padding:12px 20px;transform:rotate(-14deg) scale(2);opacity:0;text-transform:uppercase;background:rgba(255,251,246,.92)}
.vfx.go span{animation:vstamp .75s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes vstamp{0%{opacity:0;transform:rotate(-14deg) scale(2)}55%{opacity:1;transform:rotate(-14deg) scale(.94)}100%{opacity:1;transform:rotate(-14deg) scale(1)}}