/* ============================================================================ * Juego 1 «La búsqueda del avioncito» — caza del cupón (tema modern). * El avioncito aparece solo en la sección configurada (lo decide el JS). * Marca: cambiá --jg-1 / --jg-2 para re-brandear. * ==========================================================================*/ /* Las variables se declaran también en .jg-overlay porque el modal se inyecta en (fuera de #juego-avioncito) y las custom properties solo heredan hacia abajo. */ #juego-avioncito, .jg-overlay, .gaso-avioncito { --jg-1:#6d5efc; --jg-2:#9b6cfb; --jg-ok:#0e9f6e; --jg-text:#1f2430; } /* ---- El avioncito escondido (botón flotante discreto) ---- */ .gaso-avioncito{ position:fixed; left:18px; bottom:20px; z-index:99990; width:52px; height:52px; padding:0; border:none; background:transparent; cursor:pointer; opacity:.55; transform:rotate(-8deg); transition:opacity .25s ease, transform .25s ease; animation:jg-fly 4.5s ease-in-out infinite; -webkit-tap-highlight-color:transparent; } .gaso-avioncito:hover, .gaso-avioncito:focus{ opacity:1; transform:rotate(-8deg) scale(1.12); outline:none; } .gaso-avioncito svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 3px 5px rgba(20,20,60,.28)); } @keyframes jg-fly{ 0%,100%{ transform:translateY(0) rotate(-8deg); } 50%{ transform:translateY(-10px) rotate(-4deg); } } @media (max-width:640px){ .gaso-avioncito{ width:46px; height:46px; left:14px; bottom:78px; } } /* ---- Overlay + tarjeta ---- */ .jg-overlay{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; background:rgba(20,20,45,.55); padding:18px; animation:jg-fade .2s ease; } @keyframes jg-fade{ from{opacity:0} to{opacity:1} } .jg-card{ width:380px; max-width:100%; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 24px 60px rgba(20,20,60,.35); font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; animation:jg-pop .28s cubic-bezier(.18,.89,.32,1.28); } @keyframes jg-pop{ from{opacity:0; transform:translateY(14px) scale(.94)} to{opacity:1; transform:none} } .jg-head{ background:linear-gradient(135deg,var(--jg-1),var(--jg-2)); color:#fff; padding:18px 20px; display:flex; align-items:center; gap:12px; position:relative; } .jg-head .jg-ava{ width:44px; height:44px; border-radius:50%; background:#fff; overflow:hidden; flex:0 0 auto; box-shadow:0 2px 8px rgba(0,0,0,.18); } .jg-head .jg-ava img{ width:100%; height:100%; object-fit:contain; } .jg-head h3{ margin:0; font-size:17px; line-height:1.2; } .jg-head p{ margin:2px 0 0; font-size:12.5px; opacity:.92; } .jg-close{ position:absolute; top:12px; right:14px; background:none; border:none; color:#fff; font-size:22px; line-height:1; cursor:pointer; opacity:.85; } .jg-close:hover{ opacity:1; } .jg-body{ padding:18px 20px 20px; } .jg-body p.jg-intro{ margin:0 0 14px; font-size:14px; color:var(--jg-text); } .jg-field{ margin-bottom:12px; } .jg-field label{ display:block; font-size:12.5px; font-weight:600; color:#54617a; margin-bottom:5px; } .jg-field input[type=text], .jg-field input[type=tel], .jg-field input[type=email]{ width:100%; border:1px solid #dfe3ee; border-radius:10px; padding:11px 13px; font-size:14px; color:var(--jg-text); } .jg-field input:focus{ outline:none; border-color:var(--jg-1); box-shadow:0 0 0 3px rgba(109,94,252,.15); } .jg-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .jg-consent{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:#54617a; margin:4px 0 16px; } .jg-consent input{ margin-top:2px; flex:0 0 auto; } .jg-btn{ width:100%; border:none; border-radius:12px; padding:13px; font-size:15px; font-weight:700; cursor:pointer; background:linear-gradient(135deg,var(--jg-1),var(--jg-2)); color:#fff; transition:opacity .15s, transform .15s; } .jg-btn:hover{ opacity:.92; } .jg-btn:active{ transform:scale(.98); } .jg-btn[disabled]{ opacity:.6; cursor:default; } .jg-error{ color:#b3261e; font-size:12.5px; margin:8px 0 0; min-height:16px; } /* ---- Estado "ganaste" ---- */ .jg-win{ text-align:center; } .jg-win .jg-emoji{ font-size:40px; line-height:1; } .jg-win .jg-msg{ font-size:14px; color:var(--jg-text); margin:8px 0 12px; } .jg-code{ display:flex; align-items:center; justify-content:center; gap:10px; background:#f3f4fb; border:2px dashed var(--jg-1); border-radius:12px; padding:14px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:24px; font-weight:800; letter-spacing:2px; color:var(--jg-1); } .jg-copy{ background:var(--jg-1); color:#fff; border:none; border-radius:8px; padding:6px 10px; font-size:12px; font-weight:700; cursor:pointer; letter-spacing:0; } .jg-copy:hover{ opacity:.9; } .jg-note{ font-size:12.5px; color:#54617a; margin:12px 0 0; }