/* Rasca y gana de eito. Usa las variables de /cuenta (cuenta.css): --amarillo, --fondo, --t-hue, --t-suisse, --t-greed. Los valores de respaldo valen para la maqueta. */
.rasca{--r-azul:#314edd;--r-amarillo:var(--amarillo,#ffe576);--r-hue:var(--t-hue,"HB Hue",Georgia,serif);--r-suisse:var(--t-suisse,Suisse,Helvetica,Arial,sans-serif);--r-greed:var(--t-greed,Greed,Arial,sans-serif);
  position:relative;overflow:hidden;background:#fff;color:#000;border:1px solid #000;border-radius:20px;padding:22px 22px 20px}
.rasca-aviso{--r-amarillo:var(--amarillo,#ffe576);--r-hue:var(--t-hue,"HB Hue",Georgia,serif);--r-greed:var(--t-greed,Greed,Arial,sans-serif)}
.rasca-g{font:400 13px/16px var(--r-greed);letter-spacing:.07em;text-transform:uppercase}
.rasca-arriba{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rasca-logo{display:block;width:60px;height:auto;fill:currentColor}
.rasca-candado{display:block;flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}
.rasca-h{margin-top:14px;font:400 40px/40px var(--r-hue);letter-spacing:-.3px}
.rasca-h-perfil{font-size:32px;line-height:34px}
.rasca-p{margin-top:8px;font-size:15px;line-height:20px;max-width:38ch}
.rasca-zona{position:relative;margin-top:18px;border-radius:14px;overflow:hidden;aspect-ratio:2.1}
.rasca-perfil .rasca-zona{aspect-ratio:2.4}
.rasca-debajo{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:6px;padding:0 12px;text-align:center;background:var(--r-amarillo)}
.rasca-gran{font:400 72px/64px var(--r-hue);letter-spacing:-1px}
.rasca-sub{display:flex;align-items:center;gap:8px;font:400 15px/18px var(--r-greed);letter-spacing:.1em;text-transform:uppercase}
.rasca-peq{font-size:13px;line-height:17px;max-width:32ch}
.rasca canvas,.rasca-mini canvas{position:absolute;inset:0;width:100%;height:100%}
.rasca-franjas{position:absolute;inset:0;display:grid;grid-template-rows:repeat(4,1fr);pointer-events:none}
.rasca-franjas span{display:flex;align-items:center;padding-left:14px;font:400 12px/13px var(--r-greed);letter-spacing:.07em;text-transform:uppercase;color:#000}
.rasca-franjas span.ok{visibility:hidden}
.rasca-pie{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-top:14px}
.rasca-cuenta{font:400 16px/20px var(--r-suisse)}
.rasca-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 4px;border:1px solid currentColor;border-radius:100px;font:400 12px/14px var(--r-greed);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.rasca-chip .rasca-candado{width:14px;height:14px}
.rasca-falta{margin-top:10px;font-size:15px;line-height:20px}
.rasca-falta a{color:inherit;text-underline-offset:3px}
/* Consumo: la segunda vía de puntos, con candado hasta que eito la abra */
.rasca-compras{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:12px 14px;border:1px dashed #000;border-radius:12px}
.rasca-compras p{display:grid;gap:3px;font-size:14px;line-height:19px}
.rasca-vivo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.rasca-confeti{position:absolute;z-index:5;display:block;pointer-events:none}
/* Ficha por campo */
/* Aviso del registro */
.rasca-aviso{display:flex;gap:12px;align-items:center;padding:8px 10px;border:1px solid #000;border-radius:16px;background:#fff}
.rasca-mini{position:relative;flex:none;width:84px;aspect-ratio:1.55;border-radius:10px;overflow:hidden}
.rasca-mini .rasca-gran{font-size:30px;line-height:30px}
.rasca-aviso p{display:grid;gap:4px;font-size:14px;line-height:19px}
@media (max-width:600px){
  .rasca{padding:18px 16px 16px}
  .rasca-h{font-size:30px;line-height:32px;margin-top:10px}
  .rasca-zona{aspect-ratio:1.55}
  .rasca-perfil .rasca-zona{aspect-ratio:1.8}
  .rasca-gran{font-size:54px;line-height:50px}
  .rasca-mini{width:88px}
  .rasca-mini .rasca-gran{font-size:24px;line-height:24px}
}
/* Ronda de mejora (Andrea, 11 nov: «mejora la animación del rasca y gana») */
.rasca-premio{display:grid;justify-items:center;gap:6px;transform-origin:50% 100%}
.rasca-franjas span{transition:opacity .35s ease}
.rasca-franjas span.ok{visibility:visible;opacity:0}
.rasca-moneda{position:absolute;left:0;top:0;z-index:4;width:var(--lado,40px);height:var(--lado,40px);display:grid;place-items:center;border:1px solid #000;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6c4,var(--r-amarillo,#ffe576) 45%,#e9c93c);box-shadow:0 var(--sombra,4px) calc(var(--sombra,4px) * 1.6) rgba(0,0,0,.3);pointer-events:none;will-change:transform}
.rasca-moneda svg{width:62%;height:62%;fill:#000}
.rasca-trozo{position:absolute;left:0;width:100%;z-index:3;pointer-events:none;transform-origin:0 50%}
.rasca-destello{position:absolute;left:0;width:100%;z-index:3;overflow:hidden;pointer-events:none}
.rasca-destello i{position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.9) 50%,transparent 65%)}
.rasca-destello svg{position:absolute;right:16%;top:50%;width:22px;height:22px;margin-top:-11px;fill:#fff;filter:drop-shadow(0 0 4px rgba(255,255,255,.9))}
.rasca-virutas{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.rasca-aviso{position:relative;overflow:hidden}
@media (prefers-reduced-motion:reduce){.rasca-franjas span{transition:none}}
/* Rasca y gana afinado (Andrea, 12 nov: «sí, que lo afine»; Gonzalo lo veía tosco). Se carga después de ../puntos/final/rasca.css y solo cambia el dibujo:
   borde de 1 px, sin fondo blanco, plata más clara y plana, amarillo liso sin rayas y textos en peso normal. rasca.js y rasca.css no se tocan. */
.rasca{border-width:1px;border-radius:16px;background:transparent}
.rasca-zona{border-radius:10px}
.rasca canvas{filter:brightness(1.2) contrast(.62)}
.rasca-debajo{background:var(--r-amarillo)}
.rasca-cuenta{font-weight:400;font-size:15px}
.rasca-chip,.rasca-compras{border-width:1px}
.rasca-candado{stroke-width:1.2}
.rasca-logo{width:52px}