{"id":2601,"date":"2026-05-30T00:31:57","date_gmt":"2026-05-30T00:31:57","guid":{"rendered":"https:\/\/maanyuba.com\/?page_id=2601"},"modified":"2026-06-08T19:59:57","modified_gmt":"2026-06-08T19:59:57","slug":"recargas","status":"publish","type":"page","link":"https:\/\/maanyuba.com\/en\/gallo-card\/recargas\/","title":{"rendered":"Recargas Gallo Card"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nRecarga Tiempo Aire \u2013 Gallo Card<\/title>\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');\r\n\r\n\/* \u2500\u2500 WRAPPER \u2500\u2500 *\/\r\n#bg-demo {\r\n --bg-bg:#f2f4f8; --bg-white:#ffffff; --bg-black:#17181C!important;\r\n --bg-blue:#1a50e8; --bg-blue-dark:#1240c4; --bg-blue-light:#eef2fe;\r\n --bg-text:#0d0f12; --bg-text-2:#444c5e; --bg-text-3:#8a92a6;\r\n --bg-border:#e4e7ef; --bg-green:#17b362; --bg-green-bg:#edfbf4;\r\n --bg-radius:16px; --bg-radius-sm:10px;\r\n --bg-shadow:0 1px 6px rgba(0,0,0,.06),0 2px 14px rgba(0,0,0,.05);\r\n --bg-nav-h: 10px;\r\n display:block !important;\r\n position:relative;\r\n width:100% !important;\r\n min-height:100vh;\r\n background:#17181C!important;\r\n font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif !important;\r\n font-size:16px !important;\r\n line-height:1.5 !important;\r\n color:#0d0f12 !important;\r\n overflow-x:hidden;\r\n padding:0 !important;\r\n margin:0 !important;\r\n box-sizing:border-box !important;\r\n}\r\n#bg-demo *,#bg-demo *::before,#bg-demo *::after {\r\n box-sizing:border-box !important;\r\n -webkit-tap-highlight-color:transparent;\r\n}\r\n\r\n\/* \u2500\u2500 SCREENS \u2500\u2500 *\/\r\n#bg-demo .bg-screen {\r\n display:none !important;\r\n flex-direction:column;\r\n height:100svh;\r\n min-height:calc(100svh - var(--bg-nav-h));\r\n max-width:430px;\r\n margin:0 auto !important;\r\n background:var(--bg-bg);\r\n padding:0 !important;\r\n padding-top: var(--bg-nav-h) !important;\r\n}\r\n#bg-demo .bg-screen.bg-active { display:flex !important; animation:bg-fadeUp .22s ease; }\r\n@keyframes bg-fadeUp { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:translateY(0)} }\r\n\r\n\/* \u2500\u2500 SCREEN LAYOUT: dark header + rounded light container \u2500\u2500 *\/\r\n#bg-demo .bg-screen.bg-active {\r\n background: var(--bg-black) !important;\r\n}\r\n#bg-demo .bg-screen.bg-active .bg-page-content,\r\n#bg-demo .bg-screen.bg-active .bg-flow-page-content {\r\n background: var(--bg-bg) !important;\r\n border-radius: 26px 26px 0 0 !important;\r\n overflow: hidden auto !important;\r\n flex: 1 1 auto;\r\n min-height: 0;\r\n}\r\n\r\n\/* \u2500\u2500 PAGE HEADER (hidden in embed, kept for structure) \u2500\u2500 *\/\r\n#bg-demo .bg-page-header { display:none !important; }\r\n\r\n\/* \u2500\u2500 FLOW PAGE CONTENT \u2500\u2500 *\/\r\n#bg-demo .bg-flow-page-content { padding:22px 16px 130px; }\r\n#bg-demo .bg-page-content { padding:22px 16px 110px; flex:1; overflow-y:auto; }\r\n\r\n\/* \u2500\u2500 FLOW TAG \/ TITLE \u2500\u2500 *\/\r\n#bg-demo .bg-flow-tag { display:inline-block; background:var(--bg-blue-light); color:var(--bg-blue) !important; font-size:10px; font-weight:700; letter-spacing:1.2px; padding:4px 10px; border-radius:99px; margin-bottom:10px; }\r\n#bg-demo .bg-flow-title { font-size:26px; font-weight:700; color:var(--bg-text) !important; letter-spacing:-.5px; margin-bottom:6px; }\r\n#bg-demo .bg-flow-sub { font-size:14px; color:var(--bg-text-2); line-height:1.5; margin-bottom:20px; }\r\n\r\n\/* \u2500\u2500 SELECTABLE CARDS \u2500\u2500 *\/\r\n#bg-demo .bg-sel-card { background:var(--bg-white) !important; border:1.5px solid var(--bg-border) !important; border-radius:var(--bg-radius); padding:16px !important; display:flex !important; align-items:center; gap:14px; cursor:pointer; transition:border-color .15s,box-shadow .15s; box-shadow:var(--bg-shadow); margin-bottom:10px; }\r\n#bg-demo .bg-sel-card:active,#bg-demo .bg-sel-card.bg-selected { border-color:var(--bg-blue) !important; box-shadow:0 0 0 3px rgba(26,80,232,.08) !important; }\r\n#bg-demo .bg-sel-icon { width:48px; height:48px; background:var(--bg-blue-light); border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:22px; }\r\n#bg-demo .bg-sel-card.bg-selected .bg-sel-icon { background:var(--bg-blue) !important; }\r\n#bg-demo .bg-sel-body { flex:1; }\r\n#bg-demo .bg-sel-title { font-size:15px; font-weight:600; color:var(--bg-text) !important; margin-bottom:3px; }\r\n#bg-demo .bg-sel-desc { font-size:12px; color:var(--bg-text-3); line-height:1.4; }\r\n#bg-demo .bg-sel-arrow { color:var(--bg-text-3); }\r\n#bg-demo .bg-sel-card.bg-selected .bg-sel-arrow { color:var(--bg-blue); }\r\n\r\n\/* \u2500\u2500 OPERADORA LIST \u2500\u2500 *\/\r\n#bg-demo .bg-op-list { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }\r\n#bg-demo .bg-op-card { background:var(--bg-white) !important; border:1.5px solid var(--bg-border) !important; border-radius:var(--bg-radius); padding:14px 16px !important; display:flex !important; flex-direction:row; align-items:center; gap:14px; cursor:pointer; transition:border-color .15s,box-shadow .15s; box-shadow:var(--bg-shadow); }\r\n#bg-demo .bg-op-card:active,#bg-demo .bg-op-card.bg-selected { border-color:var(--bg-blue) !important; box-shadow:0 0 0 3px rgba(26,80,232,.08) !important; background:var(--bg-blue-light) !important; }\r\n#bg-demo .bg-op-logo { width:48px; height:48px; border-radius:12px; flex-shrink:0; overflow:hidden; }\r\n#bg-demo .bg-op-name { font-size:15px; font-weight:600; color:var(--bg-text) !important; flex:1; }\r\n#bg-demo .bg-op-arrow { color:var(--bg-text-3); flex-shrink:0; }\r\n#bg-demo .bg-op-card.bg-selected .bg-op-arrow { color:var(--bg-blue); }\r\n#bg-demo .bg-op-sub { display:none; }\r\n\r\n\/* \u2500\u2500 PAQUETE LIST \u2500\u2500 *\/\r\n#bg-demo .bg-paquete-list { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }\r\n#bg-demo .bg-paquete-card { background:var(--bg-white) !important; border:1.5px solid var(--bg-border) !important; border-radius:var(--bg-radius); padding:14px 16px !important; display:flex !important; align-items:center; gap:14px; cursor:pointer; transition:border-color .15s,box-shadow .15s; box-shadow:var(--bg-shadow); }\r\n#bg-demo .bg-paquete-card:active,#bg-demo .bg-paquete-card.bg-selected { border-color:var(--bg-blue) !important; box-shadow:0 0 0 3px rgba(26,80,232,.08) !important; background:var(--bg-blue-light) !important; }\r\n#bg-demo .bg-paquete-left { display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; width:52px; }\r\n#bg-demo .bg-paquete-amt { font-family:'Bebas Neue',sans-serif !important; font-size:26px; color:var(--bg-text) !important; line-height:1; }\r\n#bg-demo .bg-paquete-card.bg-selected .bg-paquete-amt { color:var(--bg-blue) !important; }\r\n#bg-demo .bg-paquete-popular { background:var(--bg-blue) !important; color:#fff !important; font-size:9px; font-weight:700; letter-spacing:.8px; padding:2px 7px; border-radius:99px; white-space:nowrap; }\r\n#bg-demo .bg-paquete-body { flex:1; min-width:0; }\r\n#bg-demo .bg-paquete-name { font-size:13px; font-weight:700; color:var(--bg-text) !important; margin-bottom:3px; }\r\n#bg-demo .bg-paquete-desc { font-size:11px; color:var(--bg-text-3); line-height:1.4; }\r\n#bg-demo .bg-paquete-arrow { color:var(--bg-text-3); flex-shrink:0; }\r\n#bg-demo .bg-paquete-card.bg-selected .bg-paquete-arrow { color:var(--bg-blue); }\r\n\r\n\/* \u2500\u2500 EDIT BUTTON in found-card \u2500\u2500 *\/\r\n#bg-demo .bg-found-edit-btn { background:rgba(255,255,255,.15) !important; border:1px solid rgba(255,255,255,.25) !important; border-radius:8px !important; color:#fff !important; width:32px; height:32px; display:flex !important; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; padding:0 !important; -webkit-appearance:none !important; appearance:none !important; transition:background .15s; }\r\n#bg-demo .bg-found-edit-btn:active { background:rgba(255,255,255,.28) !important; }\r\n#bg-demo .bg-found-card-row { display:flex !important; align-items:flex-end; justify-content:space-between; gap:10px; }\r\n\r\n\/* \u2500\u2500 MONTO GRID (keep for fallback, hidden now) \u2500\u2500 *\/\r\n#bg-demo .bg-monto-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }\r\n#bg-demo .bg-monto-card { background:var(--bg-white) !important; border:1.5px solid var(--bg-border) !important; border-radius:var(--bg-radius); padding:14px 8px !important; display:flex !important; flex-direction:column; align-items:center; gap:3px; cursor:pointer; transition:border-color .15s,box-shadow .15s,background .15s; box-shadow:var(--bg-shadow); }\r\n#bg-demo .bg-monto-card:active,#bg-demo .bg-monto-card.bg-selected { border-color:var(--bg-blue) !important; box-shadow:0 0 0 3px rgba(26,80,232,.08) !important; background:var(--bg-blue-light) !important; }\r\n#bg-demo .bg-monto-amt { font-family:'Bebas Neue',sans-serif !important; font-size:28px; color:var(--bg-text) !important; line-height:1; }\r\n#bg-demo .bg-monto-card.bg-selected .bg-monto-amt { color:var(--bg-blue) !important; }\r\n#bg-demo .bg-monto-tag { font-size:10px; font-weight:600; color:var(--bg-text-3); }\r\n#bg-demo .bg-monto-card.bg-selected .bg-monto-tag { color:var(--bg-blue) !important; }\r\n\r\n\/* \u2500\u2500 FORM ELEMENTS \u2500\u2500 *\/\r\n#bg-demo .bg-sec-h { font-size:20px; font-weight:700; color:var(--bg-text) !important; letter-spacing:-.3px; margin-bottom:4px; }\r\n#bg-demo .bg-sec-sub { font-size:13px; color:var(--bg-text-2); margin-bottom:18px; line-height:1.5; }\r\n#bg-demo .bg-form-card { background:var(--bg-white) !important; border-radius:var(--bg-radius); box-shadow:var(--bg-shadow); padding:16px; margin-bottom:14px; display:flex !important; flex-direction:column; gap:14px; }\r\n#bg-demo .bg-form-group { display:flex !important; flex-direction:column; gap:6px; }\r\n#bg-demo .bg-form-label { font-size:12px !important; font-weight:600 !important; color:var(--bg-text-2) !important; }\r\n#bg-demo .bg-form-input { background:#fff !important; border:1.5px solid var(--bg-border) !important; border-radius:var(--bg-radius-sm) !important; color:var(--bg-text) !important; font-size:15px !important; padding:12px 14px !important; width:100% !important; outline:none !important; transition:border-color .15s; font-family:inherit !important; -webkit-appearance:none !important; appearance:none !important; box-shadow:none !important; margin:0 !important; }\r\n#bg-demo .bg-form-input::placeholder { color:var(--bg-text-3); }\r\n#bg-demo .bg-form-input:focus { border-color:var(--bg-blue) !important; }\r\n#bg-demo .bg-prefix-wrap { display:flex !important; align-items:center; background:#fff; border:1.5px solid var(--bg-border) !important; border-radius:var(--bg-radius-sm); overflow:hidden; transition:border-color .15s; }\r\n#bg-demo .bg-prefix-wrap:focus-within { border-color:var(--bg-blue) !important; }\r\n#bg-demo .bg-prefix { font-size:14px; color:var(--bg-text-2); padding:12px 10px 12px 14px; border-right:1px solid var(--bg-border) !important; white-space:nowrap; background:#f8f9fb; }\r\n#bg-demo .bg-form-input.bg-pre { border:none !important; border-radius:0 !important; flex:1; }\r\n#bg-demo .bg-info-note { display:flex; align-items:flex-start; gap:8px; background:#f8f9fb; border:1px solid var(--bg-border) !important; border-radius:var(--bg-radius-sm); padding:12px 14px; font-size:12px; color:var(--bg-text-2); line-height:1.5; margin-bottom:14px; }\r\n#bg-demo .bg-info-note svg { color:var(--bg-text-3); flex-shrink:0; margin-top:1px; }\r\n\r\n\/* \u2500\u2500 RESUMEN \/ DETAIL CARD \u2500\u2500 *\/\r\n#bg-demo .bg-found-card { background:linear-gradient(135deg,#1240c4,#2d7aff) !important; border-radius:var(--bg-radius); padding:18px 20px; margin-bottom:14px; box-shadow:0 4px 20px rgba(26,80,232,.25); }\r\n#bg-demo .bg-found-lbl { font-size:9px; font-weight:700; letter-spacing:1.5px; color:rgba(255,255,255,.6) !important; margin-bottom:5px; }\r\n#bg-demo .bg-found-name { font-size:18px; font-weight:700; color:#fff !important; margin-bottom:2px; }\r\n#bg-demo .bg-found-num { font-size:13px; color:rgba(255,255,255,.7) !important; font-family:'SF Mono','Courier New',monospace !important; }\r\n#bg-demo .bg-detail-card { background:var(--bg-white) !important; border-radius:var(--bg-radius); box-shadow:var(--bg-shadow); padding:4px 0; margin-bottom:14px; }\r\n#bg-demo .bg-det-row { display:flex !important; justify-content:space-between; align-items:center; padding:14px 16px; gap:12px; }\r\n#bg-demo .bg-det-key { font-size:13px; color:var(--bg-text-2); }\r\n#bg-demo .bg-det-val { font-size:13px; font-weight:500; color:var(--bg-text) !important; text-align:right; max-width:60%; }\r\n#bg-demo .bg-det-val.bg-hi { font-size:18px; font-weight:700; color:var(--bg-blue) !important; }\r\n#bg-demo .bg-det-div { height:1px; background:var(--bg-border); margin:0 16px; }\r\n\r\n\/* \u2500\u2500 CHIP \u2500\u2500 *\/\r\n#bg-demo .bg-chip-badge { display:inline-flex; align-items:center; gap:5px; background:var(--bg-blue-light); color:var(--bg-blue) !important; font-size:11px; font-weight:700; padding:4px 10px; border-radius:99px; }\r\n\r\n\/* \u2500\u2500 BUTTONS \u2500\u2500 *\/\r\n#bg-demo .bg-btn-primary,\r\n#bg-demo .bg-btn-secondary,\r\n#bg-demo .bg-btn-back-em,\r\n#bg-demo .bg-qty-btn {\r\n -webkit-appearance:none !important;\r\n appearance:none !important;\r\n box-shadow:none !important;\r\n text-shadow:none !important;\r\n text-decoration:none !important;\r\n cursor:pointer;\r\n}\r\n#bg-demo .bg-btn-primary { width:100% !important; background:var(--bg-blue) !important; color:#fff !important; border:none !important; border-radius:12px !important; padding:16px !important; font-size:16px !important; font-weight:600 !important; font-family:inherit !important; transition:background .15s,transform .1s; display:flex !important; align-items:center; justify-content:center; gap:8px; margin-bottom:10px; letter-spacing:-.2px; outline:none !important; }\r\n#bg-demo .bg-btn-primary:active { background:var(--bg-blue-dark) !important; transform:scale(.98); }\r\n#bg-demo .bg-btn-secondary { width:100% !important; background:#fff !important; color:var(--bg-text-2) !important; border:1.5px solid var(--bg-border) !important; border-radius:12px !important; padding:15px !important; font-size:14px !important; font-weight:500 !important; font-family:inherit !important; transition:background .15s; margin-bottom:10px; display:block !important; text-align:center; }\r\n#bg-demo .bg-btn-back-em {\r\n width: 52px !important; height: 52px !important; flex: 0 0 52px !important;\r\n background: var(--bg-bg) !important; border: 1.5px solid var(--bg-border) !important;\r\n border-radius: 12px !important; display: flex !important; align-items: center !important;\r\n justify-content: center !important; color: var(--bg-text-2) !important; cursor: pointer;\r\n padding: 0 !important; -webkit-appearance: none !important; appearance: none !important;\r\n transition: background .15s !important;\r\n}\r\n#bg-demo .bg-btn-back-em:active { background: var(--bg-border) !important; }\r\n\r\n\/* \u2500\u2500 FIXED BOTTOM CTA \u2500\u2500 *\/\r\n#bg-demo .bg-screen .bg-flow-cta-bar { display:none !important; }\r\n#bg-demo .bg-screen.bg-active .bg-flow-cta-bar {\r\n display:block !important;\r\n position:fixed; bottom:0; left:50%; transform:translateX(-50%);\r\n width:100%; max-width:430px;\r\n background:#fff !important;\r\n padding:12px 16px calc(12px + env(safe-area-inset-bottom));\r\n border-top:1px solid var(--bg-border) !important;\r\n box-shadow:0 -4px 20px rgba(0,0,0,.07);\r\n z-index:20;\r\n}\r\n#bg-demo .bg-screen.bg-active .bg-flow-cta-bar.bg-has-back {\r\n display:flex !important; align-items:center !important; gap:10px !important;\r\n}\r\n#bg-demo .bg-screen.bg-active .bg-flow-cta-bar.bg-has-back .bg-btn-primary {\r\n flex:1 1 auto !important; width:auto !important; margin-bottom:0 !important;\r\n}\r\n#bg-demo .bg-screen.bg-active .bg-flow-cta-bar.bg-back-only {\r\n padding-top:10px !important; padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important;\r\n}\r\n#bg-demo .bg-flow-cta-bar .bg-btn-primary { margin-bottom:0; }\r\n\r\n\/* \u2500\u2500 CONFIRM \u2500\u2500 *\/\r\n#bg-demo .bg-confirm-wrap { display:flex !important; flex-direction:column; align-items:center; text-align:center; }\r\n#bg-demo .bg-confirm-icon {\r\n width:72px !important; height:72px !important; min-width:72px !important; min-height:72px !important;\r\n flex:0 0 72px !important; aspect-ratio:1\/1 !important; border-radius:999px !important;\r\n display:flex !important; align-items:center !important; justify-content:center !important;\r\n background:var(--bg-blue) !important;\r\n box-shadow:0 0 0 12px rgba(26,80,232,.10),0 0 0 24px rgba(26,80,232,.05) !important;\r\n margin-bottom:20px;\r\n}\r\n#bg-demo .bg-confirm-icon svg { width:38px !important; height:38px !important; display:block !important; }\r\n#bg-demo .bg-confirm-title { font-size:22px; font-weight:700; color:var(--bg-text) !important; letter-spacing:-.5px; margin-bottom:10px; line-height:1.2; }\r\n#bg-demo .bg-confirm-text { font-size:14px; color:var(--bg-text-2); line-height:1.6; margin-bottom:24px; max-width:360px; }\r\n#bg-demo .bg-folio-card { width:100%; background:var(--bg-white) !important; border-radius:var(--bg-radius); box-shadow:var(--bg-shadow); padding:16px; margin-bottom:14px; text-align:center; }\r\n#bg-demo .bg-folio-lbl { font-size:10px; font-weight:700; letter-spacing:1.5px; color:var(--bg-text-3); margin-bottom:5px; }\r\n#bg-demo .bg-folio-num { font-size:18px; font-weight:700; color:var(--bg-blue) !important; font-family:'SF Mono','Courier New',monospace !important; letter-spacing:1px; }\r\n#bg-demo .bg-conf-summary { width:100%; background:var(--bg-white) !important; border-radius:var(--bg-radius); box-shadow:var(--bg-shadow); padding:4px 0; margin-bottom:24px; text-align:left; }\r\n#bg-demo .bg-conf-row { display:flex !important; justify-content:space-between; padding:12px 16px; font-size:13px; color:var(--bg-text-2); }\r\n#bg-demo .bg-conf-row span:last-child { color:var(--bg-text) !important; font-weight:500; }\r\n#bg-demo .bg-conf-div { height:1px; background:var(--bg-border); margin:0 16px; }\r\n#bg-demo .bg-conf-total { padding:14px 16px; display:flex !important; justify-content:space-between; }\r\n#bg-demo .bg-conf-total span:first-child { font-weight:700; color:var(--bg-text) !important; font-size:14px; }\r\n#bg-demo .bg-conf-total span:last-child { font-weight:700; color:var(--bg-blue) !important; font-size:16px; }\r\n\r\n\/* \u2500\u2500 PAGO MINI CARD \u2500\u2500 *\/\r\n#bg-demo .bg-pago-mini { background:var(--bg-white) !important; border-radius:var(--bg-radius); box-shadow:var(--bg-shadow); padding:14px 16px; margin-bottom:18px; display:flex; align-items:center; gap:12px; }\r\n#bg-demo .bg-pago-mini-icon { width:40px; height:40px; background:linear-gradient(135deg,#1240c4,#2d7aff); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }\r\n#bg-demo .bg-pago-mini-body { flex:1; }\r\n#bg-demo .bg-pago-mini-name { font-size:13px; font-weight:600; color:var(--bg-text); }\r\n#bg-demo .bg-pago-mini-sub { font-size:11px; color:var(--bg-text-3); }\r\n\r\n\/* \u2500\u2500 PROCESANDO: centrado real sin scroll negro \u2500\u2500 *\/\r\n#bg-demo #screen-procesando .bg-flow-page-content {\r\n display:flex !important;\r\n align-items:center !important;\r\n justify-content:center !important;\r\n padding:0 !important;\r\n border-radius: 26px 26px 0 0 !important;\r\n}\r\n\r\n\/* \u2500\u2500 \u00c9XITO: layout propio sin heredar bg-flow-page-content \u2500\u2500 *\/\r\n#bg-demo .bg-exito-body {\r\n flex: 1 1 auto;\r\n min-height: 0;\r\n overflow-y: auto;\r\n background: var(--bg-bg) !important;\r\n border-radius: 26px 26px 0 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n padding: 36px 20px 130px;\r\n gap: 0;\r\n}\r\n#bg-demo .bg-exito-body .bg-confirm-icon { margin-bottom: 20px; }\r\n#bg-demo .bg-exito-body .bg-confirm-title { margin-bottom: 10px; }\r\n#bg-demo .bg-exito-body .bg-confirm-text { margin-bottom: 20px; }\r\n#bg-demo .bg-exito-body .bg-folio-card,\r\n#bg-demo .bg-exito-body .bg-conf-summary { text-align: left; width: 100%; }\r\n#bg-demo .bg-proc-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:20px; }\r\n#bg-demo .bg-proc-spinner { width:56px; height:56px; border-radius:50%; border:3px solid var(--bg-blue-light); border-top-color:var(--bg-blue); animation:spin .7s linear infinite; }\r\n@keyframes spin { to{transform:rotate(360deg)} }\r\n#bg-demo .bg-proc-text { font-size:15px; font-weight:600; color:var(--bg-text); }\r\n#bg-demo .bg-proc-sub { font-size:13px; color:var(--bg-text-3); text-align:center; }\r\n\r\n\/* \u2500\u2500 TOKENS DE LOGO POR OPERADORA \u2500\u2500 *\/\r\n\/* Reemplaza cada url() con la imagen real de cada compa\u00f1\u00eda *\/\r\n#bg-demo {\r\n --logo-telcel: url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/05\/telcel2.jpg');\r\n --logo-att: url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/05\/att.png');\r\n --logo-movistar: url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/05\/movistar.png');\r\n --logo-unefon: url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/05\/unefon2.jpg');\r\n --logo-bait: url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/05\/bait.png');\r\n --logo-virgin: url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/05\/virgin.png');\r\n}\r\n\r\n#bg-demo .bg-op-logo img,\r\n#bg-demo .bg-sel-icon img { display:block; width:100%; height:100%; object-fit:cover; }\r\n\r\n\/* Logos por operadora usando los tokens CSS *\/\r\n#bg-demo .bg-op-logo--telcel,\r\n#bg-demo .bg-op-logo--att,\r\n#bg-demo .bg-op-logo--movistar,\r\n#bg-demo .bg-op-logo--unefon,\r\n#bg-demo .bg-op-logo--bait,\r\n#bg-demo .bg-op-logo--virgin,\r\n#bg-demo .bg-recent-logo--telcel,\r\n#bg-demo .bg-recent-logo--att,\r\n#bg-demo .bg-recent-logo--movistar,\r\n#bg-demo .bg-recent-logo--unefon,\r\n#bg-demo .bg-recent-logo--bait,\r\n#bg-demo .bg-recent-logo--virgin {\r\n background-size: cover !important;\r\n background-repeat: no-repeat !important;\r\n background-position: center !important;\r\n display: block !important; \/* sin flex para que el background se vea *\/\r\n font-size: 0 !important; \/* oculta cualquier emoji residual *\/\r\n}\r\n#bg-demo .bg-op-logo--telcel, #bg-demo .bg-recent-logo--telcel { background-image: var(--logo-telcel) !important; }\r\n#bg-demo .bg-op-logo--att, #bg-demo .bg-recent-logo--att { background-image: var(--logo-att) !important; }\r\n#bg-demo .bg-op-logo--movistar, #bg-demo .bg-recent-logo--movistar { background-image: var(--logo-movistar) !important; }\r\n#bg-demo .bg-op-logo--unefon, #bg-demo .bg-recent-logo--unefon { background-image: var(--logo-unefon) !important; }\r\n#bg-demo .bg-op-logo--bait, #bg-demo .bg-recent-logo--bait { background-image: var(--logo-bait) !important; }\r\n#bg-demo .bg-op-logo--virgin, #bg-demo .bg-recent-logo--virgin { background-image: var(--logo-virgin) !important; }\r\n\r\n@keyframes bg-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }\r\n#bg-demo .bg-shake { animation:bg-shake .4s ease; border-color:#e84040 !important; }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"bg-demo\">\r\n\r\n<!-- ======= SCREEN 1: SELECCI\u00d3N DE COMPA\u00d1\u00cdA ======= -->\r\n<div id=\"screen-operadora\" class=\"bg-screen bg-active\">\r\n <div class=\"bg-page-header\"><\/div>\r\n <div class=\"bg-flow-page-content\">\r\n <div class=\"bg-flow-tag\">GALLO CARD \u00b7 RECARGAS<\/div>\r\n <h1 class=\"bg-flow-title\">Recarga tiempo aire<\/h1>\r\n <p class=\"bg-flow-sub\">Selecciona tu compa\u00f1\u00eda telef\u00f3nica para comenzar.<\/p>\r\n\r\n <div class=\"bg-op-list\">\r\n <div class=\"bg-op-card\" data-op=\"Telcel\">\r\n <div class=\"bg-op-logo bg-op-logo--telcel\" style=\"background:#fff3f3;\"><\/div>\r\n <div class=\"bg-op-name\">Telcel<\/div>\r\n <div class=\"bg-op-arrow\"><svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\r\n <\/div>\r\n <div class=\"bg-op-card\" data-op=\"AT&T\">\r\n <div class=\"bg-op-logo bg-op-logo--att\" style=\"background:#e8f6fd;\"><\/div>\r\n <div class=\"bg-op-name\">AT&T<\/div>\r\n <div class=\"bg-op-arrow\"><svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\r\n <\/div>\r\n <div class=\"bg-op-card\" data-op=\"Movistar\">\r\n <div class=\"bg-op-logo bg-op-logo--movistar\" style=\"background:#e8f4ff;\"><\/div>\r\n <div class=\"bg-op-name\">Movistar<\/div>\r\n <div class=\"bg-op-arrow\"><svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\r\n <\/div>\r\n <div class=\"bg-op-card\" data-op=\"Unefon\">\r\n <div class=\"bg-op-logo bg-op-logo--unefon\" style=\"background:#fff2eb;\"><\/div>\r\n <div class=\"bg-op-name\">Unefon<\/div>\r\n <div class=\"bg-op-arrow\"><svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\r\n <\/div>\r\n <div class=\"bg-op-card\" data-op=\"Bait\">\r\n <div class=\"bg-op-logo bg-op-logo--bait\" style=\"background:#f5f0ff;\"><\/div>\r\n <div class=\"bg-op-name\">Bait<\/div>\r\n <div class=\"bg-op-arrow\"><svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\r\n <\/div>\r\n <div class=\"bg-op-card\" data-op=\"Virgin Mobile\">\r\n <div class=\"bg-op-logo bg-op-logo--virgin\" style=\"background:#fff0f3;\"><\/div>\r\n <div class=\"bg-op-name\">Virgin Mobile<\/div>\r\n <div class=\"bg-op-arrow\"><svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-info-note\">\r\n <svg width=\"15\" height=\"15\" viewbox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M12 8v1M12 11v5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n  Las recargas se aplican de forma inmediata y no son reembolsables.\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ======= SCREEN 2: SELECCI\u00d3N DE MONTO ======= -->\r\n<div id=\"screen-monto\" class=\"bg-screen\">\r\n <div class=\"bg-page-header\"><\/div>\r\n <div class=\"bg-flow-page-content\">\r\n <div class=\"bg-flow-tag\" id=\"tag-monto-op\">TELCEL<\/div>\r\n <h2 class=\"bg-sec-h\">Selecciona el monto<\/h2>\r\n <p class=\"bg-sec-sub\">Toca un monto para continuar.<\/p>\r\n\r\n <div class=\"bg-paquete-list\" id=\"paquete-list\">\r\n <!-- Renderizado din\u00e1mico por JS seg\u00fan operadora -->\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-flow-cta-bar bg-back-only\">\r\n <button class=\"bg-btn-back-em\" data-target=\"screen-operadora\"><svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M15 19l-7-7 7-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ======= SCREEN 3: N\u00daMERO CELULAR ======= -->\r\n<div id=\"screen-numero\" class=\"bg-screen\">\r\n <div class=\"bg-page-header\"><\/div>\r\n <div class=\"bg-flow-page-content\">\r\n <div class=\"bg-flow-tag\" id=\"tag-operadora\">TELCEL<\/div>\r\n <h2 class=\"bg-sec-h\" id=\"numero-titulo\">\u00bfA qu\u00e9 n\u00famero?<\/h2>\r\n <p class=\"bg-sec-sub\">Ingresa el n\u00famero celular que deseas recargar.<\/p>\r\n\r\n <div class=\"bg-form-card\">\r\n <div class=\"bg-form-group\">\r\n <label class=\"bg-form-label\">N\u00famero celular<\/label>\r\n <div class=\"bg-prefix-wrap\">\r\n <span class=\"bg-prefix\">\ud83c\uddf2\ud83c\uddfd +52<\/span>\r\n <input class=\"bg-form-input bg-pre\" type=\"tel\" id=\"inp-numero\" placeholder=\"10 d\u00edgitos\" maxlength=\"10\" inputmode=\"numeric\" pattern=\"[0-9]*\"\/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-info-note\" style=\"margin-bottom:0;\">\r\n <svg width=\"15\" height=\"15\" viewbox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M12 8v1M12 11v5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n  Verifica el n\u00famero antes de continuar. Las recargas no son reembolsables.\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- N\u00fameros recientes: se renderizan din\u00e1micamente filtrando por operadora -->\r\n <div id=\"recientes-section\">\r\n <p style=\"font-size:11px;font-weight:700;letter-spacing:1px;color:var(--bg-text-3);margin-bottom:10px;\">RECIENTES<\/p>\r\n <div id=\"recientes-list\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-flow-cta-bar bg-has-back\">\r\n <button class=\"bg-btn-back-em\" data-target=\"screen-monto\"><svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M15 19l-7-7 7-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/button>\r\n <button class=\"bg-btn-primary\" id=\"btn-continuar-numero\">Continuar<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ======= SCREEN 4: RESUMEN ======= -->\r\n<div id=\"screen-resumen\" class=\"bg-screen\">\r\n <div class=\"bg-page-header\"><\/div>\r\n <div class=\"bg-flow-page-content\">\r\n <div class=\"bg-flow-tag\">CONFIRMAR RECARGA<\/div>\r\n <h2 class=\"bg-sec-h\">Resumen de recarga<\/h2>\r\n <p class=\"bg-sec-sub\" style=\"margin-bottom:18px;\">Revisa los datos antes de confirmar.<\/p>\r\n\r\n <div class=\"bg-found-card\">\r\n <div class=\"bg-found-lbl\">N\u00daMERO A RECARGAR<\/div>\r\n <div class=\"bg-found-card-row\">\r\n <div>\r\n <div class=\"bg-found-name\" id=\"res-numero\">\u2013\u2013<\/div>\r\n <div class=\"bg-found-num\" id=\"res-operadora\">\u2013\u2013<\/div>\r\n <\/div>\r\n <button class=\"bg-found-edit-btn\" id=\"btn-editar-numero\" title=\"Editar n\u00famero\">\r\n <svg width=\"15\" height=\"15\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-detail-card\">\r\n <div class=\"bg-det-row\"><span class=\"bg-det-key\">Compa\u00f1\u00eda<\/span><span class=\"bg-det-val\" id=\"res-op\">\u2013\u2013<\/span><\/div>\r\n <div class=\"bg-det-div\"><\/div>\r\n <div class=\"bg-det-row\"><span class=\"bg-det-key\">Monto de recarga<\/span><span class=\"bg-det-val bg-hi\" id=\"res-monto\">\u2013\u2013<\/span><\/div>\r\n <div class=\"bg-det-div\"><\/div>\r\n <div class=\"bg-det-row\"><span class=\"bg-det-key\">M\u00e9todo de pago<\/span><span class=\"bg-det-val\">Gallo Card \u00b7\u00b7\u00b7\u00b7 5678<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-pago-mini\">\r\n <div class=\"bg-pago-mini-icon\">\r\n <svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\"><rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"3\" stroke=\"white\" stroke-width=\"1.8\"\/><path d=\"M2 10h20\" stroke=\"white\" stroke-width=\"1.8\"\/><\/svg>\r\n <\/div>\r\n <div class=\"bg-pago-mini-body\">\r\n <div class=\"bg-pago-mini-name\">Mastercard Cr\u00e9dito \u00b7\u00b7\u00b7\u00b7 5678<\/div>\r\n <div class=\"bg-pago-mini-sub\">Amaury Almanza \u00b7 Vence 12\/27<\/div>\r\n <\/div>\r\n <span class=\"bg-chip-badge\">Gallo Card<\/span>\r\n <\/div>\r\n\r\n <div class=\"bg-info-note\">\r\n <svg width=\"15\" height=\"15\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 9v4M12 17h.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><path d=\"M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><\/svg>\r\n  Las recargas son inmediatas y no son reembolsables una vez confirmadas.\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-flow-cta-bar bg-has-back\">\r\n <button class=\"bg-btn-back-em\" data-target=\"screen-numero\"><svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M15 19l-7-7 7-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/button>\r\n <button class=\"bg-btn-primary\" id=\"btn-confirmar-recarga\">\r\n <svg width=\"17\" height=\"17\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n Confirmar recarga\r\n <\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ======= SCREEN 5: PROCESANDO ======= -->\r\n<div id=\"screen-procesando\" class=\"bg-screen\">\r\n <div class=\"bg-page-header\"><\/div>\r\n <div class=\"bg-flow-page-content\" style=\"display:flex;align-items:center;justify-content:center;flex:1;\">\r\n <div class=\"bg-proc-wrap\">\r\n <div class=\"bg-proc-spinner\"><\/div>\r\n <div class=\"bg-proc-text\">Procesando recarga\u2026<\/div>\r\n <div class=\"bg-proc-sub\">Conectando con <span id=\"proc-op\">\u2013\u2013<\/span>.<br>Esto toma solo un momento.<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ======= SCREEN 6: \u00c9XITO ======= -->\r\n<div id=\"screen-exito\" class=\"bg-screen\">\r\n <div class=\"bg-page-header\"><\/div>\r\n <div class=\"bg-exito-body\">\r\n <div class=\"bg-confirm-icon\">\r\n <svg width=\"38\" height=\"38\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 6L9 17l-5-5\" stroke=\"white\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/div>\r\n <h1 class=\"bg-confirm-title\">\u00a1Recarga exitosa!<\/h1>\r\n <p class=\"bg-confirm-text\">Tu recarga se realiz\u00f3 correctamente. Te enviamos la confirmaci\u00f3n con los detalles de la operaci\u00f3n.<\/p>\r\n <div class=\"bg-folio-card\">\r\n <div class=\"bg-folio-lbl\">FOLIO DE OPERACI\u00d3N<\/div>\r\n <div class=\"bg-folio-num\" id=\"folio-num\">GC-REC-2025-08341<\/div>\r\n <\/div>\r\n <div class=\"bg-conf-summary\">\r\n <div class=\"bg-conf-row\"><span>N\u00famero recargado<\/span><span id=\"conf-numero\">\u2013\u2013<\/span><\/div>\r\n <div class=\"bg-conf-div\"><\/div>\r\n <div class=\"bg-conf-row\"><span>Compa\u00f1\u00eda<\/span><span id=\"conf-op\">\u2013\u2013<\/span><\/div>\r\n <div class=\"bg-conf-div\"><\/div>\r\n <div class=\"bg-conf-row\"><span>M\u00e9todo de pago<\/span><span>Gallo Card \u00b7\u00b7\u00b7\u00b7 5678<\/span><\/div>\r\n <div class=\"bg-conf-div\"><\/div>\r\n <div class=\"bg-conf-total\"><span>Monto recargado<\/span><span id=\"conf-monto\">\u2013\u2013<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-flow-cta-bar\">\r\n <button class=\"bg-btn-primary\" id=\"btn-volver-inicio\">\r\n <svg width=\"17\" height=\"17\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M3 12h18M3 6h18M3 18h18\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n Volver al inicio\r\n <\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n;(function(){\r\n'use strict';\r\n\r\nvar state = { operadora: '', numero: '', monto: 0, paquete: '' };\r\n\r\nfunction show(id){\r\n document.querySelectorAll('.bg-screen').forEach(function(s){ s.classList.remove('bg-active'); });\r\n var t = document.getElementById(id);\r\n if(t){ t.classList.add('bg-active'); t.scrollTop = 0; window.scrollTo(0,0); }\r\n}\r\n\r\n\/\/ Back buttons\r\ndocument.querySelectorAll('.bg-btn-back-em[data-target]').forEach(function(b){\r\n b.addEventListener('click', function(){ show(b.getAttribute('data-target')); });\r\n});\r\n\r\n\/\/ \u2500\u2500 SCREEN 1: Seleccionar operadora \u2500\u2500\r\ndocument.querySelectorAll('.bg-op-card').forEach(function(card){\r\n card.addEventListener('click', function(){\r\n document.querySelectorAll('.bg-op-card').forEach(function(c){ c.classList.remove('bg-selected'); });\r\n card.classList.add('bg-selected');\r\n state.operadora = card.dataset.op;\r\n \/\/ Actualizar tags\r\n document.getElementById('tag-operadora').textContent = state.operadora.toUpperCase();\r\n document.getElementById('tag-monto-op').textContent = state.operadora.toUpperCase();\r\n \/\/ Render paquetes y recientes de esta operadora\r\n renderPaquetes(state.operadora);\r\n renderRecientes(state.operadora);\r\n setTimeout(function(){ show('screen-monto'); }, 180);\r\n });\r\n});\r\n\r\n\/\/ Solo d\u00edgitos en el input\r\ndocument.getElementById('inp-numero').addEventListener('input', function(){\r\n this.value = this.value.replace(\/\\D\/g,'').substring(0,10);\r\n});\r\n\r\n\/\/ \u2500\u2500 CLASES DE LOGO POR OPERADORA (tokens definidos en CSS) \u2500\u2500\r\nvar logoClass = {\r\n 'Telcel': 'bg-op-logo--telcel',\r\n 'AT&T': 'bg-op-logo--att',\r\n 'Movistar': 'bg-op-logo--movistar',\r\n 'Unefon': 'bg-op-logo--unefon',\r\n 'Bait': 'bg-op-logo--bait',\r\n 'Virgin Mobile': 'bg-op-logo--virgin',\r\n};\r\n\r\n\/\/ \u2500\u2500 RECIENTES: filtramos por operadora al renderizar \u2500\u2500\r\nvar recientesData = [\r\n { numero: '5512345678', operadora: 'Telcel', hace: 'hace 30 d\u00edas' },\r\n { numero: '4498765432', operadora: 'Telcel', hace: 'hace 2 meses' },\r\n { numero: '8112233445', operadora: 'AT&T', hace: 'hace 15 d\u00edas' },\r\n { numero: '3318877654', operadora: 'Movistar', hace: 'hace 1 mes' },\r\n { numero: '7771122334', operadora: 'Unefon', hace: 'hace 3 semanas'},\r\n { numero: '9981234567', operadora: 'Bait', hace: 'hace 1 mes' },\r\n { numero: '5544332211', operadora: 'Virgin Mobile', hace: 'hace 20 d\u00edas' },\r\n];\r\n\r\nfunction fmtNum(n){ return n.substring(0,2)+' '+n.substring(2,6)+' '+n.substring(6,10); }\r\n\r\nfunction renderRecientes(operadora) {\r\n var section = document.getElementById('recientes-section');\r\n var list = document.getElementById('recientes-list');\r\n var filtrados = recientesData.filter(function(r){ return r.operadora === operadora; });\r\n if(!filtrados.length){ section.style.display='none'; return; }\r\n section.style.display='block';\r\n var cls = logoClass[operadora] || '';\r\n list.innerHTML = filtrados.map(function(r){\r\n var fmt = fmtNum(r.numero);\r\n return '<div class=\"bg-sel-card bg-reciente-card\" data-numero=\"'+r.numero+'\" style=\"margin-bottom:10px;\">' +\r\n '<div class=\"bg-sel-icon bg-recent-logo '+cls+'\" style=\"background-color:#f2f4f8;background-size:contain;background-repeat:no-repeat;background-position:center;\"><\/div>' +\r\n '<div class=\"bg-sel-body\">' +\r\n '<div class=\"bg-sel-title\">'+fmt+'<\/div>' +\r\n '<div class=\"bg-sel-desc\">'+operadora+' \u00b7 \u00daltima recarga '+r.hace+'<\/div>' +\r\n '<\/div>' +\r\n '<div class=\"bg-sel-arrow\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>' +\r\n '<\/div>';\r\n }).join('');\r\n list.querySelectorAll('.bg-reciente-card').forEach(function(card){\r\n card.addEventListener('click', function(){\r\n document.getElementById('inp-numero').value = card.dataset.numero;\r\n });\r\n });\r\n}\r\n\r\n\/\/ \u2500\u2500 CAT\u00c1LOGO DE PAQUETES POR OPERADORA \u2500\u2500\r\nvar catalogo = {\r\n 'Telcel': [\r\n { monto: 50, nombre: 'Amigo Sin L\u00edmite 50', desc: '1 GB \u00b7 Redes sociales ilimitadas \u00b7 7 d\u00edas', popular: false },\r\n { monto: 100, nombre: 'Amigo Sin L\u00edmite 100', desc: '3 GB \u00b7 Redes sociales ilimitadas \u00b7 15 d\u00edas', popular: true },\r\n { monto: 150, nombre: 'Amigo Sin L\u00edmite 150', desc: '5 GB \u00b7 Redes sociales ilimitadas \u00b7 30 d\u00edas', popular: false },\r\n { monto: 200, nombre: 'Amigo Sin L\u00edmite 200', desc: '10 GB \u00b7 Redes ilimitadas \u00b7 Llamadas gratis \u00b7 30 d\u00edas', popular: false },\r\n { monto: 300, nombre: 'Amigo Sin L\u00edmite 300', desc: '20 GB \u00b7 Redes ilimitadas \u00b7 Llamadas + SMS gratis \u00b7 30 d\u00edas', popular: false },\r\n { monto: 500, nombre: 'Amigo Sin L\u00edmite MAX', desc: '40 GB + 10 GB extra \u00b7 Todo ilimitado \u00b7 30 d\u00edas', popular: false },\r\n ],\r\n 'AT&T': [\r\n { monto: 50, nombre: 'Plan 50', desc: '1 GB \u00b7 WhatsApp ilimitado \u00b7 7 d\u00edas', popular: false },\r\n { monto: 100, nombre: 'Plan 100', desc: '3 GB \u00b7 Redes sociales ilimitadas \u00b7 15 d\u00edas', popular: true },\r\n { monto: 150, nombre: 'Plan 150', desc: '6 GB \u00b7 Redes ilimitadas \u00b7 30 d\u00edas', popular: false },\r\n { monto: 200, nombre: 'Plan 200', desc: '10 GB \u00b7 Redes ilimitadas \u00b7 Llamadas gratis \u00b7 30 d\u00edas', popular: false },\r\n { monto: 300, nombre: 'Plan 300', desc: '18 GB \u00b7 Todo ilimitado \u00b7 Llamadas + SMS \u00b7 30 d\u00edas', popular: false },\r\n { monto: 500, nombre: 'Plan MAX 500', desc: '35 GB \u00b7 Todo ilimitado \u00b7 Roaming EUA y Canad\u00e1 \u00b7 30 d\u00edas', popular: false },\r\n ],\r\n 'Movistar': [\r\n { monto: 50, nombre: 'Recarga 50', desc: '500 MB \u00b7 WhatsApp ilimitado \u00b7 7 d\u00edas', popular: false },\r\n { monto: 100, nombre: 'Recarga 100', desc: '2 GB \u00b7 Redes sociales ilimitadas \u00b7 15 d\u00edas', popular: true },\r\n { monto: 150, nombre: 'Recarga 150', desc: '5 GB \u00b7 Redes ilimitadas \u00b7 30 d\u00edas', popular: false },\r\n { monto: 200, nombre: 'Recarga 200', desc: '8 GB \u00b7 Redes ilimitadas \u00b7 Llamadas gratis \u00b7 30 d\u00edas', popular: false },\r\n { monto: 300, nombre: 'Recarga 300', desc: '15 GB \u00b7 Todo ilimitado \u00b7 30 d\u00edas', popular: false },\r\n { monto: 500, nombre: 'Recarga MAX', desc: '30 GB \u00b7 Todo ilimitado \u00b7 Llamadas internacionales \u00b7 30 d\u00edas', popular: false },\r\n ],\r\n 'Unefon': [\r\n { monto: 50, nombre: 'Unefon 50', desc: '1 GB \u00b7 WhatsApp y Facebook ilimitados \u00b7 7 d\u00edas', popular: false },\r\n { monto: 100, nombre: 'Unefon 100', desc: '3 GB \u00b7 Redes sociales ilimitadas \u00b7 15 d\u00edas', popular: true },\r\n { monto: 150, nombre: 'Unefon 150', desc: '5 GB \u00b7 Redes ilimitadas \u00b7 30 d\u00edas', popular: false },\r\n { monto: 200, nombre: 'Unefon 200', desc: '10 GB \u00b7 Redes ilimitadas \u00b7 Llamadas gratis \u00b7 30 d\u00edas', popular: false },\r\n { monto: 300, nombre: 'Unefon 300', desc: '20 GB \u00b7 Todo ilimitado \u00b7 30 d\u00edas', popular: false },\r\n { monto: 500, nombre: 'Unefon MAX', desc: '40 GB \u00b7 Todo ilimitado \u00b7 Sin throttling \u00b7 30 d\u00edas', popular: false },\r\n ],\r\n 'Bait': [\r\n { monto: 50, nombre: 'Bait 50', desc: '2 GB \u00b7 Redes sociales ilimitadas \u00b7 15 d\u00edas', popular: false },\r\n { monto: 100, nombre: 'Bait 100', desc: '5 GB \u00b7 Redes ilimitadas \u00b7 30 d\u00edas', popular: true },\r\n { monto: 150, nombre: 'Bait 150', desc: '10 GB \u00b7 Redes ilimitadas \u00b7 Llamadas gratis \u00b7 30 d\u00edas', popular: false },\r\n { monto: 200, nombre: 'Bait 200', desc: '15 GB \u00b7 Todo ilimitado \u00b7 30 d\u00edas', popular: false },\r\n { monto: 300, nombre: 'Bait 300', desc: '25 GB \u00b7 Todo ilimitado \u00b7 Hotspot incluido \u00b7 30 d\u00edas', popular: false },\r\n { monto: 500, nombre: 'Bait MAX', desc: '50 GB \u00b7 Todo ilimitado \u00b7 Hotspot 10 GB \u00b7 30 d\u00edas', popular: false },\r\n ],\r\n 'Virgin Mobile': [\r\n { monto: 50, nombre: 'Virgin 50', desc: '1 GB \u00b7 WhatsApp ilimitado \u00b7 7 d\u00edas', popular: false },\r\n { monto: 100, nombre: 'Virgin 100', desc: '3 GB \u00b7 Redes sociales ilimitadas \u00b7 15 d\u00edas', popular: true },\r\n { monto: 150, nombre: 'Virgin 150', desc: '6 GB \u00b7 Redes ilimitadas \u00b7 30 d\u00edas', popular: false },\r\n { monto: 200, nombre: 'Virgin 200', desc: '10 GB \u00b7 Redes ilimitadas \u00b7 Llamadas gratis \u00b7 30 d\u00edas', popular: false },\r\n { monto: 300, nombre: 'Virgin 300', desc: '20 GB \u00b7 Todo ilimitado \u00b7 30 d\u00edas', popular: false },\r\n { monto: 500, nombre: 'Virgin MAX', desc: '40 GB \u00b7 Todo ilimitado \u00b7 Roaming EUA \u00b7 30 d\u00edas', popular: false },\r\n ],\r\n};\r\n\r\nvar ARROW_SVG = '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>';\r\n\r\nfunction renderPaquetes(operadora) {\r\n var lista = catalogo[operadora] || [];\r\n var container = document.getElementById('paquete-list');\r\n container.innerHTML = lista.map(function(p) {\r\n return '<div class=\"bg-paquete-card\" data-monto=\"' + p.monto + '\" data-paquete=\"' + p.nombre + '\">' +\r\n '<div class=\"bg-paquete-left\">' +\r\n '<div class=\"bg-paquete-amt\">$' + p.monto + '<\/div>' +\r\n (p.popular ? '<div class=\"bg-paquete-popular\">Popular<\/div>' : '') +\r\n '<\/div>' +\r\n '<div class=\"bg-paquete-body\">' +\r\n '<div class=\"bg-paquete-name\">' + p.nombre + '<\/div>' +\r\n '<div class=\"bg-paquete-desc\">' + p.desc + '<\/div>' +\r\n '<\/div>' +\r\n '<div class=\"bg-paquete-arrow\">' + ARROW_SVG + '<\/div>' +\r\n '<\/div>';\r\n }).join('');\r\n \/\/ Re-bind click events\r\n container.querySelectorAll('.bg-paquete-card').forEach(function(card) {\r\n card.addEventListener('click', function() {\r\n container.querySelectorAll('.bg-paquete-card').forEach(function(c){ c.classList.remove('bg-selected'); });\r\n card.classList.add('bg-selected');\r\n state.monto = parseInt(card.dataset.monto);\r\n state.paquete = card.dataset.paquete;\r\n \/\/ Actualizar t\u00edtulo en pantalla de n\u00famero\r\n document.getElementById('numero-titulo').textContent = state.paquete;\r\n setTimeout(function(){ show('screen-numero'); }, 180);\r\n });\r\n });\r\n}\r\n\r\n\/\/ \u2500\u2500 SCREEN 3: Selecci\u00f3n de paquete (listener en contenedor ya no necesario, se hace en renderPaquetes) \u2500\u2500\r\n\r\n\/\/ \u2500\u2500 SCREEN 4: Resumen \u2500\u2500\r\nfunction fillResumen(){\r\n var num = state.numero;\r\n var fmt = num.substring(0,2)+' '+num.substring(2,6)+' '+num.substring(6,10);\r\n document.getElementById('res-numero').textContent = '+52 ' + fmt;\r\n document.getElementById('res-operadora').textContent = state.operadora;\r\n document.getElementById('res-op').textContent = state.operadora + ' \u00b7 ' + state.paquete;\r\n document.getElementById('res-monto').textContent = '$' + state.monto + '.00';\r\n}\r\n\r\n\/\/ Editar n\u00famero desde resumen\r\ndocument.getElementById('btn-editar-numero').addEventListener('click', function(){\r\n state._editandoNumero = true;\r\n show('screen-numero');\r\n});\r\n\r\ndocument.getElementById('btn-continuar-numero').addEventListener('click', function(){\r\n var num = document.getElementById('inp-numero').value.replace(\/\\D\/g,'');\r\n if(num.length !== 10){ shake('inp-numero'); return; }\r\n state.numero = num;\r\n fillResumen();\r\n show('screen-resumen');\r\n state._editandoNumero = false;\r\n});\r\n\r\ndocument.getElementById('btn-confirmar-recarga').addEventListener('click', function(){\r\n var btn = this;\r\n btn.textContent = 'Procesando\u2026';\r\n btn.disabled = true;\r\n document.getElementById('proc-op').textContent = state.operadora;\r\n show('screen-procesando');\r\n setTimeout(function(){\r\n btn.textContent = 'Confirmar recarga';\r\n btn.disabled = false;\r\n fillExito();\r\n show('screen-exito');\r\n }, 1800);\r\n});\r\n\r\n\/\/ \u2500\u2500 SCREEN 6: \u00c9xito \u2500\u2500\r\nfunction fillExito(){\r\n var num = state.numero;\r\n var fmt = num.substring(0,2)+' '+num.substring(2,6)+' '+num.substring(6,10);\r\n var folio = 'GC-REC-2025-' + Math.floor(10000 + Math.random()*89999);\r\n document.getElementById('folio-num').textContent = folio;\r\n document.getElementById('conf-numero').textContent = '+52 ' + fmt;\r\n document.getElementById('conf-op').textContent = state.operadora;\r\n document.getElementById('conf-monto').textContent = '$' + state.monto + '.00';\r\n}\r\n\r\ndocument.getElementById('btn-volver-inicio').addEventListener('click', function(){\r\n reset();\r\n show('screen-operadora');\r\n});\r\n\r\nfunction shake(id){\r\n var el = document.getElementById(id);\r\n if(!el) return;\r\n el.classList.add('bg-shake');\r\n setTimeout(function(){ el.classList.remove('bg-shake'); }, 500);\r\n}\r\n\r\nfunction reset(){\r\n state = { operadora: '', numero: '', monto: 0, paquete: '', _editandoNumero: false };\r\n document.getElementById('inp-numero').value = '';\r\n document.querySelectorAll('.bg-op-card,.bg-paquete-card').forEach(function(c){ c.classList.remove('bg-selected'); });\r\n}\r\n\r\n})();\r\n<\/script>\r\n<\/div>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Recarga Tiempo Aire \u2013 Gallo Card GALLO CARD \u00b7 RECARGAS Recarga tiempo aire Selecciona tu compa\u00f1\u00eda telef\u00f3nica para comenzar. Telcel AT&T Movistar Unefon Bait Virgin Mobile  Las recargas se aplican de forma inmediata y no son reembolsables. TELCEL Selecciona el monto Toca un monto para continuar. TELCEL \u00bfA qu\u00e9 n\u00famero? Ingresa el n\u00famero celular que […]<\/p>","protected":false},"author":5,"featured_media":0,"parent":2599,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-2601","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/pages\/2601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/comments?post=2601"}],"version-history":[{"count":13,"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/pages\/2601\/revisions"}],"predecessor-version":[{"id":2761,"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/pages\/2601\/revisions\/2761"}],"up":[{"embeddable":true,"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/pages\/2599"}],"wp:attachment":[{"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/media?parent=2601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}