/* Minijuego Geocerca (components/geocerca). Todo va encapsulado bajo #zg-geo. */
.zg-wrap { background: #fff; padding: clamp(40px, 6vw, 72px) 16px; }
#zg-geo { --navy: #010440; --accent: #c64106; --accent-h: #a83705; --accent-bg: #FAECE7; --accent-tx: #993C1D;
    font-family: var(--zn-font, 'Familjen Grotesk', system-ui, sans-serif); color: var(--navy); max-width: 1100px; margin: 0 auto; }
#zg-geo * { box-sizing: border-box; }
#zg-geo .zg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
#zg-geo .zg-title { font-size: 20px; font-weight: 600; margin: 0; }
#zg-geo .zg-title small { font-weight: 400; font-size: 15px; color: rgba(1, 4, 64, .6); margin-left: 6px; }
#zg-geo .zg-stat { font-size: 14px; color: rgba(1, 4, 64, .7); font-variant-numeric: tabular-nums; }
#zg-geo .zg-stage { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(1, 4, 64, .1); }
#zg-geo canvas.zg-game { display: block; width: 100%; aspect-ratio: 1280/440; cursor: none; touch-action: pan-y; background: #F1EFE8; }
#zg-geo.is-armed canvas.zg-game { touch-action: none; }
#zg-geo canvas.zg-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
#zg-geo .zg-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; color: var(--navy);
    border-radius: 999px; padding: 10px 18px; font: inherit; font-size: 15px; font-weight: 500; pointer-events: none; transition: opacity .4s;
    border: 1px solid rgba(1, 4, 64, .12); max-width: calc(100% - 32px); text-align: center; cursor: pointer; }
#zg-geo .zg-hint__touch { display: none; }
#zg-geo.is-touch .zg-hint { pointer-events: auto; }
#zg-geo.is-touch .zg-hint__mouse { display: none; }
#zg-geo.is-touch .zg-hint__touch { display: inline; }
#zg-geo .zg-end { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(1, 4, 64, .25); z-index: 2; padding: 16px; }
#zg-geo .zg-end.on { display: flex; }
#zg-geo .zg-card { background: #fff; border: 1px solid rgba(1, 4, 64, .12); border-radius: 16px; padding: 22px 24px 20px; text-align: center; width: 340px; max-width: 100%;
    transform: translateY(12px) scale(.96); opacity: 0; transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), opacity .35s; }
#zg-geo .zg-end.show .zg-card { transform: none; opacity: 1; }
#zg-geo .zg-brand { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: rgba(1, 4, 64, .6); margin-bottom: 12px; }
#zg-geo .zg-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
#zg-geo .zg-h { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.2; }
#zg-geo .zg-sub { margin: 4px 0 16px; font-size: 15px; color: rgba(1, 4, 64, .7); }
#zg-geo .zg-sub b { color: var(--navy); font-weight: 600; }
#zg-geo .zg-coupon { border: 1.5px dashed var(--accent); border-radius: 10px; padding: 12px; background: var(--accent-bg); }
#zg-geo .zg-coupon p { margin: 0; font-size: 13px; color: var(--accent-tx); }
#zg-geo .zg-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
#zg-geo .zg-code { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 22px; font-weight: 600; letter-spacing: 3px; }
#zg-geo .zg-note { margin: 10px 0 16px; font-size: 12px; color: rgba(1, 4, 64, .55); }
#zg-geo .zg-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
#zg-geo .zg-btn { border: none; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 500; padding: 10px 18px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
#zg-geo .zg-btn.sec { background: #fff; color: var(--navy); border: 1px solid rgba(1, 4, 64, .25); }
#zg-geo .zg-btn.sec:hover { background: #f4f4f8; }
#zg-geo .zg-btn.pri { background: var(--accent); color: #fff; }
#zg-geo .zg-btn.pri:hover { background: var(--accent-h); color: #fff; }
#zg-geo .zg-btn.sm { padding: 4px 12px; font-size: 12px; }
#zg-geo .zg-btn:focus-visible, #zg-geo .zg-hint:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) {
    #zg-geo canvas.zg-game { aspect-ratio: 1280/1000; }
    #zg-geo .zg-hint { font-size: 14px; border-radius: 16px; }
    #zg-geo .zg-title small { display: block; margin: 2px 0 0; }
}
@media (prefers-reduced-motion: reduce) { #zg-geo .zg-card { transition: none; } }