/* Recompensas: saldo, catálogo de canje, niveles y movimientos. Sello y barra viven en cuenta.css. */
.rc{display:grid;gap:0;grid-template-areas:"s" "p" "n" "m";margin-top:20px}
.rc-inv{grid-template-areas:"s" "r" "p" "n"}
.rc .seccion{margin-top:40px}
.rc>.sello{margin-top:0}
.saldo-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.niv-chip{background:var(--crema);color:var(--tinta);border-color:var(--tinta)}
.niv-chip .i{width:16px;height:16px;color:var(--rojo)}
.saldo-mult{font-size:var(--t14);font-weight:800}
.inv-acc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin-top:16px}
.inv-acc .btn{margin-top:0}
.inv-entrar{font-weight:800;min-height:48px;display:inline-flex;align-items:center;text-underline-offset:4px}

/* reglas */
.reglas{display:grid;gap:12px}
.reglas li{display:flex;gap:14px;align-items:center;background:var(--papel);border:2px solid var(--tinta);border-radius:14px;padding:12px 16px;box-shadow:0 3px 0 var(--tinta)}
.regla-n{flex:none;width:40px;height:40px;border-radius:50%;background:var(--tinta);color:var(--amar);display:grid;place-items:center;font-family:"Alfa",serif;font-size:var(--t20)}

/* catálogo */
.premios{display:grid;gap:16px}
.premio{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;background:var(--papel);border:2px solid var(--tinta);border-radius:14px;box-shadow:0 4px 0 var(--tinta);padding:10px;align-items:center}
.premio-foto{aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--oscuro);display:grid;place-items:center;border:2px solid var(--tinta)}
.premio-foto img{width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease-out)}
.premio-foto.bloque{color:var(--crema);background:repeating-linear-gradient(90deg,var(--oscuro) 0 14px,#8F1020 14px 28px)}


.premio-foto .i{width:40px;height:40px}
.premio-c{display:grid;gap:4px;min-width:0}
.premio-c h3{font-family:"Alfa",serif;font-weight:400;font-size:var(--t20);line-height:1.12}
.premio-pts{font-size:var(--t14);color:var(--verde)}
.premio-pts b{font-size:var(--t20)}
.premio-acc{margin-top:6px;min-height:48px;display:grid;align-items:center}
.premio-acc .btn{width:100%}
.falta p{font-size:var(--t14);font-weight:700}
.falta-barra{height:8px;border-radius:99px;background:var(--sk);border:2px solid var(--tinta);overflow:hidden;margin-bottom:6px}
.falta-barra i{display:block;height:100%;background:var(--tinta);transform-origin:left center;transform:scaleX(var(--p,0))}
.premio:not(.alcanza){background:#F3E7CC}
.premio:not(.alcanza) .premio-foto{opacity:.88}

/* niveles */
.niveles{display:grid;gap:12px}
.niv{display:grid;gap:2px;background:var(--papel);border:2px solid var(--linea);border-radius:14px;padding:14px 16px}
.niv h3{font-family:"Alfa",serif;font-weight:400;font-size:var(--t20)}
.niv-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.niv-desde{font-size:var(--t14);color:var(--verde);font-weight:800}
.niv .niv-aqui{display:none}
.niv[aria-current=true]{border-color:var(--tinta);box-shadow:0 4px 0 var(--tinta)}
.niv[aria-current=true] .niv-aqui{display:inline-flex;background:var(--tinta);color:var(--crema)}

/* movimientos */
.movs{display:grid;border:2px solid var(--tinta);border-radius:14px;background:var(--papel);overflow:hidden}
.mov{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:2px solid var(--linea)}
.mov:first-child{border-top:0}
.mov-t{font-weight:800}
.mov-f{font-size:var(--t14);color:rgba(31,26,23,.78)}
.mov-p{font-family:"Alfa",serif;font-size:var(--t20)}
.mov-p.mas{color:var(--verde)}

@media (min-width:900px){
  .rc{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"s p" "n p" "m p";column-gap:48px;align-items:start;margin-top:32px}
  .rc-inv{grid-template-areas:"s p" "r p" "n p"}
  .rc>.sello{position:sticky;top:96px}
  .rc>.seccion:first-of-type{margin-top:40px}
  .premios{grid-template-columns:1fr 1fr}
  .premio{grid-template-columns:1fr;text-align:left}
  .premio-foto{aspect-ratio:4/3}
}
@media (hover:hover){
  .premio.alcanza:hover .premio-foto img{transform:scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
  .premio-foto img{transition:none}
}
.premio-foto .mosaico{position:static;width:100%;height:100%;padding:0}.premio-foto .mosaico svg{width:55%}