{"id":2613,"date":"2026-06-02T00:03:43","date_gmt":"2026-06-02T00:03:43","guid":{"rendered":"https:\/\/maanyuba.com\/?page_id=2613"},"modified":"2026-06-08T19:52:50","modified_gmt":"2026-06-08T19:52:50","slug":"pagos-gallo-card","status":"publish","type":"page","link":"https:\/\/maanyuba.com\/en\/gallo-card\/pagos-gallo-card\/","title":{"rendered":"Pagos Gallo Card"},"content":{"rendered":"
\n\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\nPago de Servicios \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\/* =====================================================================\r\n ZONA DE ASSETS \u2014 edita solo aqu\u00ed para cambiar logos de proveedores\r\n Reemplaza url('') con la URL real del logo.\r\n Vac\u00edo = deja vac\u00edo el contenedor del logo.\r\n ===================================================================== *\/\r\n#bg-demo {\r\n --asset-cfe: url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/06\/CFE.png');\r\n --asset-telmex: url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/06\/telmex.png');\r\n --asset-totalplay: url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/06\/totalplay.jpg');\r\n --asset-megacable: url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/06\/megacable-4.png');\r\n --asset-izzi: url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/06\/izzi-2.png');\r\n --asset-sky: url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/06\/sky.png');\r\n --asset-agua: url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/06\/cea.jpg');\r\n --asset-gas: url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/06\/naturgy.png');\r\n --asset-internet: url('');\r\n --asset-dish: url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/06\/dish.png');\r\n --asset-tag: url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/06\/tag.jpg');\r\n --asset-televia: url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/06\/televia.jpeg');\r\n\r\n \/* \u2500\u2500 Sistema de dise\u00f1o \u2014 igual al archivo base \u2500\u2500 *\/\r\n --bg-bg:#f2f4f8; --bg-white:#ffffff; --bg-black:#17181C;\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-yellow-bg:#fffbeb; --bg-yellow-border:#f5e27a; --bg-yellow-text:#7a5c00;\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\r\n display:block !important;\r\n position:relative; width:100% !important; 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; line-height:1.5 !important; color:#0d0f12 !important;\r\n overflow-x:hidden; padding-top:var(--bg-nav-h) !important;\r\n margin:0 !important; box-sizing:border-box !important;\r\n}\r\n#bg-demo *,#bg-demo *::before,#bg-demo *::after {\r\n box-sizing:border-box !important; -webkit-tap-highlight-color:transparent;\r\n}\r\n\r\n\/* \u2500\u2500 SCREENS \u2014 igual al archivo base \u2500\u2500 *\/\r\n#bg-demo .bg-screen {\r\n display:none !important; flex-direction:column;\r\n height:calc(100svh - var(--bg-nav-h));\r\n min-height:calc(100svh - var(--bg-nav-h));\r\n max-width:430px; margin:0 auto !important;\r\n background:var(--bg-bg); padding:0 !important; overflow:hidden;\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 \u2014 igual al base \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#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 PAGE HEADER \u2014 oculto en embed \u2500\u2500 *\/\r\n#bg-demo .bg-page-header { display:none !important; }\r\n\r\n\/* \u2500\u2500 FLOW TAG \/ TITLE \/ SUB \u2014 espaciado reducido \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:6px; }\r\n#bg-demo .bg-flow-title { font-size:26px; font-weight:700; color:var(--bg-text) !important; letter-spacing:-.5px; margin-bottom:2px; }\r\n#bg-demo .bg-flow-sub { font-size:14px; color:var(--bg-text-2); line-height:1.5; margin-bottom:16px; }\r\n\r\n\/* \u2500\u2500 FIXED BOTTOM CTA \u2014 exacto del base \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; position:fixed; bottom:0; left:50%; transform:translateX(-50%);\r\n width:100%; max-width:430px; 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; box-shadow:0 -4px 20px rgba(0,0,0,.07); 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 BUTTONS \u2014 exacto del base \u2500\u2500 *\/\r\n#bg-demo .bg-btn-primary, #bg-demo .bg-btn-back-em {\r\n -webkit-appearance:none !important; appearance:none !important;\r\n box-shadow:none !important; text-shadow:none !important;\r\n text-decoration:none !important; cursor:pointer;\r\n}\r\n#bg-demo .bg-btn-primary {\r\n width:100% !important; background:var(--bg-blue) !important; color:#fff !important;\r\n border:none !important; border-radius:12px !important; padding:16px !important;\r\n font-size:16px !important; font-weight:600 !important; font-family:inherit !important;\r\n transition:background .15s,transform .1s; display:flex !important;\r\n align-items:center; justify-content:center; gap:8px; margin-bottom:10px;\r\n letter-spacing:-.2px; outline:none !important;\r\n}\r\n#bg-demo .bg-btn-primary:active { background:var(--bg-blue-dark) !important; transform:scale(.98); }\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;\r\n padding:0 !important; 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 OPERADORA \/ PROVIDER LIST \u2014 exacto del base \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 {\r\n background:var(--bg-white) !important; border:1.5px solid var(--bg-border) !important;\r\n border-radius:var(--bg-radius); padding:14px 16px !important;\r\n display:flex !important; flex-direction:row; align-items:center; gap:14px;\r\n cursor:pointer; transition:border-color .15s,box-shadow .15s; box-shadow:var(--bg-shadow);\r\n}\r\n#bg-demo .bg-op-card:active, #bg-demo .bg-op-card.bg-selected {\r\n border-color:var(--bg-blue) !important; box-shadow:0 0 0 3px rgba(26,80,232,.08) !important;\r\n background:var(--bg-blue-light) !important;\r\n}\r\n\/* Logo del proveedor \u2014 lee el token de asset como background-image *\/\r\n#bg-demo .bg-op-logo {\r\n width:48px; height:48px; border-radius:12px; flex-shrink:0; overflow:hidden;\r\n background-color:var(--bg-blue-light);\r\n background-size:cover; background-repeat:no-repeat; background-position:center;\r\n display:flex; align-items:center; justify-content:center; color:var(--bg-blue);\r\n}\r\n#bg-demo .bg-op-logo[data-asset=\"cfe\"] { background-image:var(--asset-cfe); }\r\n#bg-demo .bg-op-logo[data-asset=\"telmex\"] { background-image:var(--asset-telmex); }\r\n#bg-demo .bg-op-logo[data-asset=\"totalplay\"] { background-image:var(--asset-totalplay); }\r\n#bg-demo .bg-op-logo[data-asset=\"megacable\"] { background-image:var(--asset-megacable); }\r\n#bg-demo .bg-op-logo[data-asset=\"izzi\"] { background-image:var(--asset-izzi); }\r\n#bg-demo .bg-op-logo[data-asset=\"sky\"] { background-image:var(--asset-sky); }\r\n#bg-demo .bg-op-logo[data-asset=\"agua\"] { background-image:var(--asset-agua); }\r\n#bg-demo .bg-op-logo[data-asset=\"gas\"] { background-image:var(--asset-gas); }\r\n#bg-demo .bg-op-logo[data-asset=\"internet\"] { background-image:var(--asset-internet); }\r\n#bg-demo .bg-op-logo[data-asset=\"dish\"] { background-image:var(--asset-dish); }\r\n#bg-demo .bg-op-logo[data-asset=\"tag\"] { background-image:var(--asset-tag); }\r\n#bg-demo .bg-op-logo[data-asset=\"televia\"] { background-image:var(--asset-televia); }\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-sub { font-size:12px; color:var(--bg-text-3); margin-top:1px; }\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\r\n\/* \u2500\u2500 HUB CARD \u2014 contenedor blanco para frecuentes y explorar \u2500\u2500 *\/\r\n#bg-demo .hub-card {\r\n background:var(--bg-white) !important;\r\n border-radius:var(--bg-radius);\r\n box-shadow:var(--bg-shadow);\r\n padding:16px;\r\n margin-bottom:14px;\r\n}\r\n#bg-demo .hub-card-title {\r\n font-size:17px; font-weight:700; color:var(--bg-text) !important;\r\n letter-spacing:-.2px; margin-bottom:14px;\r\n}\r\n\r\n\/* \u2500\u2500 FRECUENTES \u2014 iconos distribuidos uniformemente dentro del card \u2500\u2500 *\/\r\n#bg-demo .freq-row {\r\n display:flex; justify-content:space-between;\r\n}\r\n#bg-demo .freq-item {\r\n flex:1; display:flex; flex-direction:column; align-items:center; gap:7px;\r\n cursor:pointer; -webkit-tap-highlight-color:transparent;\r\n}\r\n#bg-demo .freq-logo {\r\n width:54px; height:54px; border-radius:14px;\r\n background:var(--bg-bg);\r\n background-size:contain; background-repeat:no-repeat; background-position:center;\r\n display:flex; align-items:center; justify-content:center; color:var(--bg-blue);\r\n overflow:hidden; transition:opacity .15s;\r\n}\r\n#bg-demo .freq-item:active .freq-logo { opacity:.65; }\r\n#bg-demo .freq-logo[data-asset=\"cfe\"] { background-image:var(--asset-cfe); }\r\n#bg-demo .freq-logo[data-asset=\"telmex\"] { background-image:var(--asset-telmex); }\r\n#bg-demo .freq-logo[data-asset=\"totalplay\"] { background-image:var(--asset-totalplay); }\r\n#bg-demo .freq-logo[data-asset=\"agua\"] { background-image:var(--asset-agua); }\r\n#bg-demo .freq-logo[data-asset=\"gas\"] { background-image:var(--asset-gas); }\r\n#bg-demo .freq-logo[data-asset=\"dish\"] { background-image:var(--asset-dish); }\r\n#bg-demo .freq-logo[data-asset=\"tag\"] { background-image:var(--asset-tag); }\r\n#bg-demo .freq-logo[data-asset=\"televia\"] { background-image:var(--asset-televia); }\r\n#bg-demo .freq-name {\r\n font-size:11px; font-weight:500; color:var(--bg-text-2);\r\n text-align:center; line-height:1.3;\r\n}\r\n\r\n\/* \u2500\u2500 FRECUENTES \u2014 iconos distribuidos uniformemente dentro del card \u2500\u2500 *\/\r\n#bg-demo .freq-row {\r\n display:flex; justify-content:space-between;\r\n}\r\n#bg-demo .freq-item {\r\n flex:1; display:flex; flex-direction:column; align-items:center; gap:7px;\r\n cursor:pointer; -webkit-tap-highlight-color:transparent;\r\n}\r\n#bg-demo .freq-logo {\r\n width:48px; height:48px; border-radius:12px;\r\n background:var(--bg-bg);\r\n background-size:contain; background-repeat:no-repeat; background-position:center;\r\n display:flex; align-items:center; justify-content:center; color:var(--bg-blue);\r\n overflow:hidden; transition:opacity .15s;\r\n}\r\n#bg-demo .freq-item:active .freq-logo { opacity:.65; }\r\n#bg-demo .freq-logo[data-asset=\"cfe\"] { background-image:var(--asset-cfe); }\r\n#bg-demo .freq-logo[data-asset=\"telmex\"] { background-image:var(--asset-telmex); }\r\n#bg-demo .freq-logo[data-asset=\"totalplay\"] { background-image:var(--asset-totalplay); }\r\n#bg-demo .freq-logo[data-asset=\"agua\"] { background-image:var(--asset-agua); }\r\n#bg-demo .freq-logo[data-asset=\"gas\"] { background-image:var(--asset-gas); }\r\n#bg-demo .freq-logo[data-asset=\"dish\"] { background-image:var(--asset-dish); }\r\n#bg-demo .freq-logo[data-asset=\"tag\"] { background-image:var(--asset-tag); }\r\n#bg-demo .freq-logo[data-asset=\"televia\"] { background-image:var(--asset-televia); }\r\n#bg-demo .freq-name {\r\n font-size:11px; font-weight:500; color:var(--bg-text-2);\r\n text-align:center; line-height:1.3;\r\n}\r\n\r\n\/* \u2500\u2500 EXPLORAR POR TIPO \u2014 lista compacta de filas con flecha \u2500\u2500 *\/\r\n#bg-demo .cat-list { display:flex; flex-direction:column; }\r\n#bg-demo .cat-list > * + * { border-top:1px solid var(--bg-border) !important; }\r\n#bg-demo .cat-list-row {\r\n display:flex; align-items:center; gap:12px;\r\n padding:13px 0; cursor:pointer; transition:opacity .12s;\r\n -webkit-tap-highlight-color:transparent;\r\n}\r\n#bg-demo .cat-list-row:active { opacity:.6; }\r\n#bg-demo .cat-list-icon {\r\n width:48px; height:48px; border-radius:12px; flex-shrink:0;\r\n background:var(--bg-blue-light);\r\n display:flex; align-items:center; justify-content:center;\r\n color:var(--bg-blue);\r\n}\r\n#bg-demo .cat-list-name {\r\n flex:1; font-size:14px; font-weight:500; color:var(--bg-text) !important;\r\n}\r\n#bg-demo .cat-list-arrow { color:var(--bg-text-3); flex-shrink:0; }\r\n\r\n\/* ocultar restos de cat-section-header viejo *\/\r\n#bg-demo .cat-section-header,\r\n#bg-demo .cat-section-title,\r\n#bg-demo .cat-row,\r\n#bg-demo .cat-item,\r\n#bg-demo .cat-icon,\r\n#bg-demo .cat-label { display:none !important; }\r\n\r\n\/* \u2500\u2500 PAGOS PENDIENTES \u2014 usa bg-sel-card del base, cards separadas \u2500\u2500 *\/\r\n#bg-demo .bg-sel-card {\r\n background:var(--bg-white) !important; border:1.5px solid var(--bg-border) !important;\r\n border-radius:var(--bg-radius); padding:16px !important;\r\n display:flex !important; align-items:center; gap:14px;\r\n cursor:pointer; transition:border-color .15s,box-shadow .15s;\r\n box-shadow:var(--bg-shadow); margin-bottom:10px;\r\n}\r\n#bg-demo .bg-sel-card:active, #bg-demo .bg-sel-card.bg-selected {\r\n border-color:var(--bg-blue) !important; box-shadow:0 0 0 3px rgba(26,80,232,.08) !important;\r\n}\r\n\/* Todos los iconos del hub: mismo tama\u00f1o 48\u00d748 *\/\r\n#bg-demo .bg-sel-icon {\r\n width:48px; height:48px; border-radius:12px; flex-shrink:0;\r\n background-color:var(--bg-blue-light);\r\n background-size:cover; background-repeat:no-repeat; background-position:center;\r\n display:flex; align-items:center; justify-content:center; color:var(--bg-blue);\r\n overflow:hidden;\r\n}\r\n#bg-demo .bg-sel-icon[data-asset=\"cfe\"] { background-image:var(--asset-cfe); }\r\n#bg-demo .bg-sel-icon[data-asset=\"telmex\"] { background-image:var(--asset-telmex); }\r\n#bg-demo .bg-sel-icon[data-asset=\"dish\"] { background-image:var(--asset-dish); }\r\n#bg-demo .bg-sel-icon[data-asset=\"tag\"] { background-image:var(--asset-tag); }\r\n#bg-demo .bg-sel-icon[data-asset=\"televia\"]{ background-image:var(--asset-televia); }\r\n#bg-demo .bg-sel-body { flex:1; min-width:0; }\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-right { text-align:right; flex-shrink:0; }\r\n#bg-demo .bg-sel-monto { font-size:15px; font-weight:700; color:var(--bg-text) !important; margin-bottom:3px; }\r\n#bg-demo .bg-sel-badge {\r\n display:inline-block; background:var(--bg-yellow-bg);\r\n border:1px solid var(--bg-yellow-border) !important; color:var(--bg-yellow-text) !important;\r\n font-size:10px; font-weight:700; padding:2px 8px; border-radius:99px;\r\n}\r\n\r\n\/* \u2500\u2500 SECTION LABEL \u2500\u2500 *\/\r\n#bg-demo .bg-sec-label {\r\n font-size:11px; font-weight:700; letter-spacing:1.2px;\r\n color:var(--bg-text-3); text-transform:uppercase; margin-bottom:10px;\r\n}\r\n\r\n\/* \u2500\u2500 FORMS \u2014 exacto del base \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-form-hint { font-size:12px; color:var(--bg-text-3); line-height:1.4; }\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 BADGE PROVEEDOR (pantalla de referencia) \u2500\u2500 *\/\r\n#bg-demo .bg-svc-badge-row { display:flex; align-items:center; gap:12px; background:var(--bg-white) !important; border-radius:var(--bg-radius); box-shadow:var(--bg-shadow); padding:14px 16px; margin-bottom:18px; }\r\n#bg-demo .bg-svc-badge-icon {\r\n width:44px; height:44px; border-radius:12px; flex-shrink:0;\r\n background-color:var(--bg-blue-light);\r\n background-size:cover; background-repeat:no-repeat; background-position:center;\r\n display:flex !important; align-items:center; justify-content:center; color:var(--bg-blue);\r\n}\r\n#bg-demo .bg-svc-badge-icon[data-asset=\"cfe\"] { background-image:var(--asset-cfe); }\r\n#bg-demo .bg-svc-badge-icon[data-asset=\"telmex\"] { background-image:var(--asset-telmex); }\r\n#bg-demo .bg-svc-badge-icon[data-asset=\"totalplay\"] { background-image:var(--asset-totalplay); }\r\n#bg-demo .bg-svc-badge-icon[data-asset=\"megacable\"] { background-image:var(--asset-megacable); }\r\n#bg-demo .bg-svc-badge-icon[data-asset=\"izzi\"] { background-image:var(--asset-izzi); }\r\n#bg-demo .bg-svc-badge-icon[data-asset=\"sky\"] { background-image:var(--asset-sky); }\r\n#bg-demo .bg-svc-badge-icon[data-asset=\"agua\"] { background-image:var(--asset-agua); }\r\n#bg-demo .bg-svc-badge-icon[data-asset=\"gas\"] { background-image:var(--asset-gas); }\r\n#bg-demo .bg-svc-badge-icon[data-asset=\"internet\"] { background-image:var(--asset-internet); }\r\n#bg-demo .bg-svc-badge-icon[data-asset=\"dish\"] { background-image:var(--asset-dish); }\r\n#bg-demo .bg-svc-badge-icon[data-asset=\"tag\"] { background-image:var(--asset-tag); }\r\n#bg-demo .bg-svc-badge-icon[data-asset=\"televia\"] { background-image:var(--asset-televia); }\r\n#bg-demo .bg-svc-badge-name { font-size:16px; font-weight:700; color:var(--bg-text) !important; }\r\n#bg-demo .bg-svc-badge-sub { font-size:12px; color:var(--bg-text-3); }\r\n\r\n\/* \u2500\u2500 Borde sutil para contenedores de logos con fondo blanco \u2500\u2500 *\/\r\n#bg-demo .bg-op-logo[data-asset],\r\n#bg-demo .freq-logo[data-asset],\r\n#bg-demo .bg-sel-icon[data-asset],\r\n#bg-demo .bg-svc-badge-icon[data-asset] {\r\n background-color:#fff;\r\n border:1px solid var(--bg-border);\r\n}\r\n\r\n\/* \u2500\u2500 RECIBO \u2014 exacto del base \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:20px; 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-found-status { display:inline-flex; align-items:center; gap:6px; margin-top:10px; background:rgba(255,255,255,.15); border-radius:99px; padding:4px 12px; font-size:11px; font-weight:700; color:#fff !important; letter-spacing:.4px; }\r\n#bg-demo .bg-found-dot { width:7px; height:7px; background:#f5c842; border-radius:50%; }\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:13px 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 M\u00c9TODO DE PAGO \u2500\u2500 *\/\r\n#bg-demo .bg-pay-method-row { display:flex; align-items:center; gap:12px; background:var(--bg-white) !important; border-radius:var(--bg-radius); box-shadow:var(--bg-shadow); padding:14px 16px; margin-bottom:14px; }\r\n#bg-demo .bg-pay-method-icon { width:40px; height:40px; background:linear-gradient(135deg,#1240c4,#2d7aff); border-radius:10px; display:flex !important; align-items:center; justify-content:center; flex-shrink:0; }\r\n#bg-demo .bg-pay-method-name { font-size:13px; font-weight:600; color:var(--bg-text); }\r\n#bg-demo .bg-pay-method-sub { font-size:11px; color:var(--bg-text-3); }\r\n\r\n\/* \u2500\u2500 \u00c9XITO \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 { width:72px !important; height:72px !important; min-width:72px !important; min-height:72px !important; flex:0 0 72px !important; border-radius:999px !important; display:flex !important; align-items:center !important; justify-content:center !important; background:var(--bg-blue) !important; margin-bottom:20px; margin-top:8px; box-shadow:0 0 0 12px rgba(26,80,232,.10),0 0 0 24px rgba(26,80,232,.05) !important; }\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:320px; }\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 SHAKE \u2500\u2500 *\/\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<\/style>\r\n<\/head>\r\n<body style=\"margin:0;padding:0;background:#0d0f12;\">\r\n<div id=\"bg-demo\">\r\n\r\n<!-- ======================================================\r\n SCREEN 1 \u2014 HUB\r\n ====================================================== -->\r\n<div id=\"screen-hub\" class=\"bg-screen bg-active\">\r\n <div class=\"bg-page-header\"><\/div>\r\n <div class=\"bg-flow-page-content\">\r\n\r\n <div class=\"bg-flow-tag\">GALLO CARD \u00b7 SERVICIOS<\/div>\r\n <h1 class=\"bg-flow-title\">Pago de servicios<\/h1>\r\n <p class=\"bg-flow-sub\">Paga recibos y servicios desde Gallo Card.<\/p>\r\n\r\n <!-- 1. Pagos pendientes -->\r\n <div class=\"bg-sec-label\">Pagos pendientes<\/div>\r\n\r\n <div class=\"bg-sel-card\" data-pending=\"cfe\">\r\n <div class=\"bg-sel-icon\" data-asset=\"cfe\">\r\n <\/div>\r\n <div class=\"bg-sel-body\">\r\n <div class=\"bg-sel-title\">CFE Electricidad<\/div>\r\n <div class=\"bg-sel-desc\">Vence 28 mayo \u00b7 Mayo 2025<\/div>\r\n <\/div>\r\n <div class=\"bg-sel-right\">\r\n <div class=\"bg-sel-monto\">$428.00<\/div>\r\n <div class=\"bg-sel-badge\">Por pagar<\/div>\r\n <\/div>\r\n <div style=\"color:var(--bg-text-3);margin-left:4px;flex-shrink:0;\">\r\n <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 <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-sel-card\" data-pending=\"telmex\" style=\"margin-bottom:14px;\">\r\n <div class=\"bg-sel-icon\" data-asset=\"telmex\">\r\n <\/div>\r\n <div class=\"bg-sel-body\">\r\n <div class=\"bg-sel-title\">Telmex \/ Infinitum<\/div>\r\n <div class=\"bg-sel-desc\">Vence 10 jun \u00b7 Mayo 2025<\/div>\r\n <\/div>\r\n <div class=\"bg-sel-right\">\r\n <div class=\"bg-sel-monto\">$649.00<\/div>\r\n <div class=\"bg-sel-badge\">Por pagar<\/div>\r\n <\/div>\r\n <div style=\"color:var(--bg-text-3);margin-left:4px;flex-shrink:0;\">\r\n <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 <\/div>\r\n <\/div>\r\n\r\n <!-- 2. Servicios frecuentes \u2014 card blanca -->\r\n <div class=\"hub-card\">\r\n <div class=\"hub-card-title\">Servicios populares<\/div>\r\n <div class=\"freq-row\">\r\n\r\n <div class=\"freq-item\" data-svc=\"CFE\" data-label=\"N\u00famero de servicio\">\r\n <div class=\"freq-logo\" data-asset=\"cfe\">\r\n <\/div>\r\n <div class=\"freq-name\">CFE<\/div>\r\n <\/div>\r\n\r\n <div class=\"freq-item\" data-svc=\"Telmex\" data-label=\"N\u00famero Telmex\">\r\n <div class=\"freq-logo\" data-asset=\"telmex\">\r\n <\/div>\r\n <div class=\"freq-name\">Telmex<\/div>\r\n <\/div>\r\n\r\n <div class=\"freq-item\" data-svc=\"Totalplay\" data-label=\"N\u00famero de cuenta\">\r\n <div class=\"freq-logo\" data-asset=\"totalplay\">\r\n <\/div>\r\n <div class=\"freq-name\">Totalplay<\/div>\r\n <\/div>\r\n\r\n <div class=\"freq-item\" data-svc=\"Gas\" data-label=\"Referencia de pago\">\r\n <div class=\"freq-logo\" data-asset=\"gas\">\r\n <\/div>\r\n <div class=\"freq-name\">Gas<\/div>\r\n <\/div>\r\n\r\n <div class=\"freq-item\" id=\"freq-mas\" data-cat=\"all\">\r\n <div class=\"freq-logo\" style=\"color:var(--bg-text-3);\">\r\n <svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"\/><circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"\/><circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"\/><\/svg>\r\n <\/div>\r\n <div class=\"freq-name\">M\u00e1s<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 3. Explorar por tipo \u2014 card blanca con lista de filas -->\r\n <div class=\"hub-card\">\r\n <div class=\"hub-card-title\">Explorar por tipo<\/div>\r\n <div class=\"cat-list\">\r\n\r\n <div class=\"cat-list-row\" data-cat=\"energia\">\r\n <div class=\"cat-list-icon\">\r\n <svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M13 2L4.09 12.26A1 1 0 005 14h6l-2 8 8.91-10.26A1 1 0 0017 10h-6l2-8z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/div>\r\n <div class=\"cat-list-name\">Energ\u00eda y agua<\/div>\r\n <div class=\"cat-list-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\r\n <div class=\"cat-list-row\" data-cat=\"internet\">\r\n <div class=\"cat-list-icon\">\r\n <svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12.55a11 11 0 0114.08 0M1.42 9a16 16 0 0121.16 0M8.53 16.11a6 6 0 016.95 0M12 20h.01\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/div>\r\n <div class=\"cat-list-name\">Internet y telefon\u00eda<\/div>\r\n <div class=\"cat-list-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\r\n <div class=\"cat-list-row\" data-cat=\"tv\">\r\n <div class=\"cat-list-icon\">\r\n <svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M17 2l-5 5-5-5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/div>\r\n <div class=\"cat-list-name\">TV y entretenimiento<\/div>\r\n <div class=\"cat-list-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\r\n <div class=\"cat-list-row\" data-cat=\"movilidad\">\r\n <div class=\"cat-list-icon\">\r\n <svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\"><rect x=\"1\" y=\"3\" width=\"15\" height=\"13\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M16 8h4l3 3v5h-7V8z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><circle cx=\"5.5\" cy=\"18.5\" r=\"2.5\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><circle cx=\"18.5\" cy=\"18.5\" r=\"2.5\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><\/svg>\r\n <\/div>\r\n <div class=\"cat-list-name\">Movilidad<\/div>\r\n <div class=\"cat-list-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\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div><!-- \/.bg-flow-page-content -->\r\n<\/div>\r\n\r\n\r\n<!-- ======================================================\r\n SCREEN 1B \u2014 LISTA DE CATEGOR\u00cdA\r\n ====================================================== -->\r\n<div id=\"screen-categoria\" 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=\"cat-tag\">CATEGOR\u00cdA<\/div>\r\n <h1 class=\"bg-flow-title\" id=\"cat-title\">Services<\/h1>\r\n <p class=\"bg-flow-sub\" id=\"cat-sub\">Selecciona el proveedor para continuar.<\/p>\r\n <div class=\"bg-op-list\" id=\"cat-prov-list\"><\/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-hub\">\r\n <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>\r\n <\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<!-- ======================================================\r\n SCREEN 2 \u2014 CAPTURA DE REFERENCIA\r\n ====================================================== -->\r\n<div id=\"screen-referencia\" class=\"bg-screen\">\r\n <div class=\"bg-page-header\"><\/div>\r\n <div class=\"bg-flow-page-content\">\r\n <div class=\"bg-svc-badge-row\">\r\n <div class=\"bg-svc-badge-icon\" id=\"ref-badge-icon\">\r\n <\/div>\r\n <div>\r\n <div class=\"bg-svc-badge-name\" id=\"ref-badge-name\">\u2013<\/div>\r\n <div class=\"bg-svc-badge-sub\" id=\"ref-badge-sub\">\u2013<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-form-card\">\r\n <div class=\"bg-form-group\">\r\n <label class=\"bg-form-label\" id=\"ref-label\">REFERENCIA<\/label>\r\n <input class=\"bg-form-input\" id=\"input-referencia\" type=\"text\" inputmode=\"numeric\" placeholder=\"Ej. 8493 1204 8841\" maxlength=\"20\"\/>\r\n <div class=\"bg-form-hint\">Encu\u00e9ntrala en tu recibo impreso o digital.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-info-note\">\r\n <svg width=\"16\" height=\"16\" 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 Esta consulta es simulada. No se realizar\u00e1 ninguna conexi\u00f3n real con el proveedor.\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\" id=\"btn-back-ref\">\r\n <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>\r\n <\/button>\r\n <button class=\"bg-btn-primary\" id=\"btn-consultar\">\r\n <svg width=\"17\" height=\"17\" viewbox=\"0 0 24 24\" fill=\"none\"><circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"white\" stroke-width=\"2\"\/><path d=\"M16 16l4 4\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n Consultar servicio\r\n <\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<!-- ======================================================\r\n SCREEN 3 \u2014 RECIBO ENCONTRADO\r\n ====================================================== -->\r\n<div id=\"screen-recibo\" class=\"bg-screen\">\r\n <div class=\"bg-page-header\"><\/div>\r\n <div class=\"bg-flow-page-content\">\r\n <div class=\"bg-found-card\">\r\n <div class=\"bg-found-lbl\">SERVICIO<\/div>\r\n <div class=\"bg-found-name\" id=\"rec-svc-name\">\u2013<\/div>\r\n <div class=\"bg-found-num\" id=\"rec-ref\">\u2013<\/div>\r\n <div class=\"bg-found-status\"><div class=\"bg-found-dot\"><\/div>Pendiente de pago<\/div>\r\n <\/div>\r\n <div class=\"bg-detail-card\">\r\n <div class=\"bg-det-row\"><span class=\"bg-det-key\">Titular<\/span><span class=\"bg-det-val\">Amaury Almanza<\/span><\/div>\r\n <div class=\"bg-det-div\"><\/div>\r\n <div class=\"bg-det-row\"><span class=\"bg-det-key\">Periodo<\/span><span class=\"bg-det-val\" id=\"rec-periodo\">\u2013<\/span><\/div>\r\n <div class=\"bg-det-div\"><\/div>\r\n <div class=\"bg-det-row\"><span class=\"bg-det-key\">Fecha l\u00edmite<\/span><span class=\"bg-det-val\" id=\"rec-fecha\">\u2013<\/span><\/div>\r\n <div class=\"bg-det-div\"><\/div>\r\n <div class=\"bg-det-row\"><span class=\"bg-det-key\">Monto a pagar<\/span><span class=\"bg-det-val bg-hi\" id=\"rec-monto\">\u2013<\/span><\/div>\r\n <\/div>\r\n <div class=\"bg-info-note\" style=\"background:var(--bg-yellow-bg);border-color:var(--bg-yellow-border) !important;color:var(--bg-yellow-text) !important;\">\r\n <svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\"><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\"\/><path d=\"M12 9v4M12 17h.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n Paga antes de la fecha l\u00edmite para evitar recargos o corte del servicio.\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\" id=\"btn-back-recibo\">\r\n <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>\r\n <\/button>\r\n <button class=\"bg-btn-primary\" id=\"btn-pagar-servicio\">Pagar servicio<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<!-- ======================================================\r\n SCREEN 4 \u2014 CONFIRMACI\u00d3N\r\n ====================================================== -->\r\n<div id=\"screen-confirmar\" class=\"bg-screen\">\r\n <div class=\"bg-page-header\"><\/div>\r\n <div class=\"bg-flow-page-content\">\r\n <h2 class=\"bg-sec-h\">Resumen del pago<\/h2>\r\n <p class=\"bg-sec-sub\">Revisa los datos antes de confirmar.<\/p>\r\n <div class=\"bg-detail-card\">\r\n <div class=\"bg-det-row\"><span class=\"bg-det-key\">Servicio<\/span><span class=\"bg-det-val\" id=\"conf-svc\">\u2013<\/span><\/div>\r\n <div class=\"bg-det-div\"><\/div>\r\n <div class=\"bg-det-row\"><span class=\"bg-det-key\">Referencia<\/span><span class=\"bg-det-val\" id=\"conf-ref\" style=\"font-family:'SF Mono','Courier New',monospace;font-size:12px;\">\u2013<\/span><\/div>\r\n <div class=\"bg-det-div\"><\/div>\r\n <div class=\"bg-det-row\"><span class=\"bg-det-key\">Periodo<\/span><span class=\"bg-det-val\" id=\"conf-periodo\">\u2013<\/span><\/div>\r\n <div class=\"bg-det-div\"><\/div>\r\n <div class=\"bg-det-row\"><span class=\"bg-det-key\">Monto<\/span><span class=\"bg-det-val bg-hi\" id=\"conf-monto\">\u2013<\/span><\/div>\r\n <\/div>\r\n <div class=\"bg-pay-method-row\">\r\n <div class=\"bg-pay-method-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>\r\n <div class=\"bg-pay-method-name\">Gallo Card \u00b7 terminaci\u00f3n 5678<\/div>\r\n <div class=\"bg-pay-method-sub\">Pago simulado \u00b7 Sin cargo real<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-info-note\">\r\n <svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg>\r\n Transacci\u00f3n segura. Este demo no procesa pagos reales ni realiza cargos.\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-recibo\">\r\n <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>\r\n <\/button>\r\n <button class=\"bg-btn-primary\" id=\"btn-confirmar-pago\">\r\n <svg width=\"17\" height=\"17\" 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 Confirmar pago\r\n <\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<!-- ======================================================\r\n SCREEN 5 \u2014 PAGO EXITOSO\r\n ====================================================== -->\r\n<div id=\"screen-exito\" class=\"bg-screen\">\r\n <div class=\"bg-page-header\"><\/div>\r\n <div class=\"bg-flow-page-content bg-confirm-wrap\" style=\"padding-top:28px;\">\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\">\u00a1Pago realizado!<\/h1>\r\n <p class=\"bg-confirm-text\">Tu pago se registr\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=\"exito-folio\">GC-SERV-2025-00000<\/div>\r\n <\/div>\r\n <div class=\"bg-conf-summary\">\r\n <div class=\"bg-conf-row\"><span>Servicio<\/span><span id=\"exito-svc\">\u2013<\/span><\/div>\r\n <div class=\"bg-conf-div\"><\/div>\r\n <div class=\"bg-conf-row\"><span>Referencia<\/span><span id=\"exito-ref\" style=\"font-family:'SF Mono','Courier New',monospace;font-size:12px;\">\u2013<\/span><\/div>\r\n <div class=\"bg-conf-div\"><\/div>\r\n <div class=\"bg-conf-row\"><span>Fecha de operaci\u00f3n<\/span><span id=\"exito-fecha\">\u2013<\/span><\/div>\r\n <div class=\"bg-conf-div\"><\/div>\r\n <div class=\"bg-conf-total\"><span>Monto pagado<\/span><span id=\"exito-monto\">\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\">Volver al inicio<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<\/div><!-- \/#bg-demo -->\r\n<script>\r\n;(function(){\r\n'use strict';\r\n\r\n\/* \u2500\u2500 Cat\u00e1logo de proveedores \u2500\u2500 *\/\r\nvar PROVIDERS = {\r\n 'CFE': { label:'N\u00famero de servicio', subtitle:'Comisi\u00f3n Federal de Electricidad', asset:'cfe', cat:['energia'], monto:428, periodo:'Mayo 2025', fecha:'28 mayo 2025' },\r\n 'Gas': { label:'Referencia de pago', subtitle:'Distribuidora de gas natural', asset:'gas', cat:['energia'], monto:580, periodo:'Mayo 2025', fecha:'25 mayo 2025' },\r\n 'Agua': { label:'Referencia de pago', subtitle:'Agua municipal \/ SAPAC', asset:'agua', cat:['agua'], monto:312, periodo:'Mayo 2025', fecha:'31 mayo 2025' },\r\n 'Telmex': { label:'N\u00famero Telmex', subtitle:'Telmex \/ Infinitum', asset:'telmex', cat:['internet'], monto:649, periodo:'Mayo 2025', fecha:'10 jun 2025' },\r\n 'Totalplay': { label:'N\u00famero de cuenta', subtitle:'Totalplay Telecomunicaciones', asset:'totalplay', cat:['internet','tv'], monto:519, periodo:'Mayo 2025', fecha:'15 jun 2025' },\r\n 'Izzi': { label:'N\u00famero de cuenta', subtitle:'Izzi Telecom', asset:'izzi', cat:['internet','tv'], monto:499, periodo:'Mayo 2025', fecha:'18 jun 2025' },\r\n 'Megacable': { label:'N\u00famero de cuenta', subtitle:'Megacable Holdings', asset:'megacable', cat:['internet','tv'], monto:479, periodo:'Mayo 2025', fecha:'15 jun 2025' },\r\n 'Sky': { label:'N\u00famero de cuenta', subtitle:'Sky M\u00e9xico', asset:'sky', cat:['tv'], monto:399, periodo:'Mayo 2025', fecha:'20 jun 2025' },\r\n 'Dish': { label:'N\u00famero de cuenta', subtitle:'Dish M\u00e9xico', asset:'dish', cat:['tv'], monto:349, periodo:'Mayo 2025', fecha:'22 jun 2025' },\r\n 'Totalplay TV': { label:'N\u00famero de cuenta', subtitle:'Totalplay Televisi\u00f3n', asset:'totalplay', cat:['tv'], monto:449, periodo:'Mayo 2025', fecha:'15 jun 2025' },\r\n 'TAG': { label:'N\u00famero de TAG', subtitle:'TAG \u00b7 Telepeaje', asset:'tag', cat:['movilidad'], monto:200, periodo:'Mayo 2025', fecha:'30 jun 2025' },\r\n 'TeleV\u00eda': { label:'N\u00famero de TAG', subtitle:'TeleV\u00eda \u00b7 Telepeaje', asset:'televia', cat:['movilidad'], monto:200, periodo:'Mayo 2025', fecha:'30 jun 2025' }\r\n};\r\n\r\n\/* \u2500\u2500 Categor\u00edas \u2500\u2500 *\/\r\nvar CATS = {\r\n 'energia': { tag:'ENERG\u00cdA Y AGUA', title:'Energ\u00eda y agua', sub:'Electricidad, gas y agua potable.' },\r\n 'internet': { tag:'INTERNET', title:'Internet y telefon\u00eda', sub:'Proveedores de internet y telecomunicaciones.' },\r\n 'tv': { tag:'TV Y ENTRETENIMIENTO',title:'TV y entretenimiento', sub:'Televisi\u00f3n por cable y sat\u00e9lite.' },\r\n 'movilidad':{ tag:'MOVILIDAD', title:'Movilidad', sub:'Recarga tu TAG o TeleV\u00eda.' }\r\n};\r\n\r\n\/* Sin SVGs de fallback: los logos salen solo desde tokens de imagen *\/\r\nvar SVG = {};\r\nvar 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>';\r\n\r\nvar state = { svc:'', asset:'', ref:'', monto:0, periodo:'', fechaLimite:'', backFromRef:'screen-hub', backFromRecibo:'screen-referencia' };\r\n\r\n\/* \u2500\u2500 Navegaci\u00f3n \u2500\u2500 *\/\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\ndocument.querySelectorAll('[data-target]').forEach(function(b){\r\n b.addEventListener('click', function(){ show(b.getAttribute('data-target')); });\r\n});\r\n\r\n\/* \u2500\u2500 Renderizar lista de categor\u00eda \u2500\u2500 *\/\r\nfunction renderCat(catKey){\r\n var cat = CATS[catKey]; if(!cat) return;\r\n document.getElementById('cat-tag').textContent = cat.tag;\r\n document.getElementById('cat-title').textContent = cat.title;\r\n document.getElementById('cat-sub').textContent = cat.sub;\r\n var list = document.getElementById('cat-prov-list');\r\n list.innerHTML = '';\r\n Object.keys(PROVIDERS).forEach(function(name){\r\n var p = PROVIDERS[name];\r\n if(p.cat.indexOf(catKey) === -1) return;\r\n var card = document.createElement('div');\r\n card.className = 'bg-op-card';\r\n card.innerHTML =\r\n '<div class=\"bg-op-logo\" data-asset=\"'+p.asset+'\"><\/div>'+\r\n '<div style=\"flex:1;min-width:0;\"><div class=\"bg-op-name\">'+name+'<\/div><div class=\"bg-op-sub\">'+p.subtitle+'<\/div><\/div>'+\r\n '<div class=\"bg-op-arrow\">'+ARROW+'<\/div>';\r\n card.addEventListener('click', function(){ goToRef(name, 'screen-categoria'); });\r\n list.appendChild(card);\r\n });\r\n show('screen-categoria');\r\n}\r\n\r\n\/* \u2500\u2500 Categor\u00edas \u2500\u2500 *\/\r\ndocument.querySelectorAll('.cat-item[data-cat]').forEach(function(item){\r\n item.addEventListener('click', function(){ renderCat(item.getAttribute('data-cat')); });\r\n});\r\n\r\n\/* \u2500\u2500 Pagos pendientes \u2192 recibo directo \u2500\u2500 *\/\r\nvar pendingMap = { 'cfe':'CFE', 'telmex':'Telmex' };\r\ndocument.querySelectorAll('.bg-sel-card[data-pending]').forEach(function(card){\r\n card.addEventListener('click', function(){\r\n var svc = pendingMap[card.getAttribute('data-pending')]; if(!svc) return;\r\n var p = PROVIDERS[svc]; if(!p) return;\r\n state.svc = svc; state.ref = '8493 1204 8841';\r\n state.monto = p.monto; state.periodo = p.periodo; state.fechaLimite = p.fecha;\r\n \/* back desde recibo vuelve al hub, no a referencia *\/\r\n state.backFromRecibo = 'screen-hub';\r\n document.getElementById('rec-svc-name').textContent = svc;\r\n document.getElementById('rec-ref').textContent = state.ref;\r\n document.getElementById('rec-periodo').textContent = p.periodo;\r\n document.getElementById('rec-fecha').textContent = p.fecha;\r\n document.getElementById('rec-monto').textContent = fmt(p.monto);\r\n show('screen-recibo');\r\n });\r\n});\r\n\r\n\/* \u2500\u2500 Frecuentes \u2192 referencia \u2500\u2500 *\/\r\ndocument.querySelectorAll('.freq-item[data-svc]').forEach(function(item){\r\n item.addEventListener('click', function(){\r\n goToRef(item.getAttribute('data-svc'), 'screen-hub');\r\n });\r\n});\r\n\r\n\/* \u2500\u2500 Proveedores del hub \u2192 referencia \u2500\u2500 *\/\r\ndocument.querySelectorAll('#screen-hub .bg-op-card[data-svc]').forEach(function(card){\r\n card.addEventListener('click', function(){\r\n goToRef(card.getAttribute('data-svc'), 'screen-hub');\r\n });\r\n});\r\n\r\n\/* \u2500\u2500 Explorar por tipo (filas lista) \u2192 renderCat \u2500\u2500 *\/\r\ndocument.querySelectorAll('.cat-list-row[data-cat]').forEach(function(row){\r\n row.addEventListener('click', function(){ renderCat(row.getAttribute('data-cat')); });\r\n});\r\n\r\n\/* \u2500\u2500 Bot\u00f3n M\u00e1s \u2192 pantalla con todos los proveedores \u2500\u2500 *\/\r\nvar freqMas = document.getElementById('freq-mas');\r\nif(freqMas) freqMas.addEventListener('click', function(){\r\n \/* Muestra todos los proveedores sin filtrar por categor\u00eda *\/\r\n document.getElementById('cat-tag').textContent = 'TODOS LOS SERVICIOS';\r\n document.getElementById('cat-title').textContent = 'Todos los servicios';\r\n document.getElementById('cat-sub').textContent = 'Selecciona el proveedor para continuar.';\r\n var list = document.getElementById('cat-prov-list');\r\n list.innerHTML = '';\r\n Object.keys(PROVIDERS).forEach(function(name){\r\n var p = PROVIDERS[name];\r\n var card = document.createElement('div');\r\n card.className = 'bg-op-card';\r\n card.innerHTML =\r\n '<div class=\"bg-op-logo\" data-asset=\"'+p.asset+'\"><\/div>'+\r\n '<div style=\"flex:1;min-width:0;\"><div class=\"bg-op-name\">'+name+'<\/div><div class=\"bg-op-sub\">'+p.subtitle+'<\/div><\/div>'+\r\n '<div class=\"bg-op-arrow\">'+ARROW+'<\/div>';\r\n card.addEventListener('click', function(){ goToRef(name, 'screen-categoria'); });\r\n list.appendChild(card);\r\n });\r\n show('screen-categoria');\r\n});\r\n\r\n\/* \u2500\u2500 Ir a captura de referencia \u2500\u2500 *\/\r\nfunction goToRef(svcKey, backScreen){\r\n var p = PROVIDERS[svcKey]; if(!p) return;\r\n state.svc = svcKey; state.asset = p.asset;\r\n state.monto = p.monto; state.periodo = p.periodo; state.fechaLimite = p.fecha;\r\n state.backFromRef = backScreen || 'screen-hub';\r\n state.backFromRecibo = 'screen-referencia'; \/* desde flujo normal, back vuelve a referencia *\/\r\n var icon = document.getElementById('ref-badge-icon');\r\n icon.setAttribute('data-asset', p.asset);\r\n icon.innerHTML = '';\r\n document.getElementById('ref-badge-name').textContent = svcKey;\r\n document.getElementById('ref-badge-sub').textContent = p.subtitle;\r\n document.getElementById('ref-label').textContent = p.label.toUpperCase();\r\n document.getElementById('input-referencia').value = '';\r\n show('screen-referencia');\r\n}\r\ndocument.getElementById('btn-back-recibo').addEventListener('click', function(){\r\n show(state.backFromRecibo);\r\n});\r\n\r\ndocument.getElementById('btn-back-ref').addEventListener('click', function(){\r\n show(state.backFromRef);\r\n});\r\n\r\n\/* \u2500\u2500 Consultar \u2500\u2500 *\/\r\ndocument.getElementById('btn-consultar').addEventListener('click', function(){\r\n var ref = document.getElementById('input-referencia').value.trim();\r\n if(!ref || ref.replace(\/\\s\/g,'').length < 4){ shake('input-referencia'); return; }\r\n state.ref = ref;\r\n var btn = this; btn.textContent = 'Consultando\u2026'; btn.disabled = true;\r\n setTimeout(function(){\r\n btn.innerHTML = '<svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"white\" stroke-width=\"2\"\/><path d=\"M16 16l4 4\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg> Consultar servicio';\r\n btn.disabled = false;\r\n document.getElementById('rec-svc-name').textContent = state.svc;\r\n document.getElementById('rec-ref').textContent = state.ref;\r\n document.getElementById('rec-periodo').textContent = state.periodo;\r\n document.getElementById('rec-fecha').textContent = state.fechaLimite;\r\n document.getElementById('rec-monto').textContent = fmt(state.monto);\r\n show('screen-recibo');\r\n }, 900);\r\n});\r\n\r\n\/* \u2500\u2500 Pagar \u2192 confirmaci\u00f3n \u2500\u2500 *\/\r\ndocument.getElementById('btn-pagar-servicio').addEventListener('click', function(){\r\n document.getElementById('conf-svc').textContent = state.svc;\r\n document.getElementById('conf-ref').textContent = state.ref;\r\n document.getElementById('conf-periodo').textContent = state.periodo;\r\n document.getElementById('conf-monto').textContent = fmt(state.monto);\r\n show('screen-confirmar');\r\n});\r\n\r\n\/* \u2500\u2500 Confirmar \u2192 \u00e9xito \u2500\u2500 *\/\r\ndocument.getElementById('btn-confirmar-pago').addEventListener('click', function(){\r\n var btn = this; btn.textContent = 'Procesando\u2026'; btn.disabled = true;\r\n setTimeout(function(){\r\n btn.innerHTML = '<svg width=\"17\" height=\"17\" 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> Confirmar pago';\r\n btn.disabled = false;\r\n document.getElementById('exito-folio').textContent = 'GC-SERV-2025-' + Math.floor(10000+Math.random()*89999);\r\n document.getElementById('exito-svc').textContent = state.svc;\r\n document.getElementById('exito-ref').textContent = state.ref;\r\n document.getElementById('exito-fecha').textContent = new Date().toLocaleDateString('es-MX',{day:'2-digit',month:'long',year:'numeric'});\r\n document.getElementById('exito-monto').textContent = fmt(state.monto);\r\n show('screen-exito');\r\n }, 800);\r\n});\r\n\r\n\/* \u2500\u2500 Volver al inicio \u2500\u2500 *\/\r\ndocument.getElementById('btn-volver-inicio').addEventListener('click', function(){\r\n document.getElementById('input-referencia').value = '';\r\n show('screen-hub');\r\n});\r\n\r\nfunction fmt(n){ return '$'+n.toLocaleString('es-MX',{minimumFractionDigits:2,maximumFractionDigits:2}); }\r\nfunction shake(id){\r\n var el=document.getElementById(id); 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\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Pago de Servicios \u2013 Gallo Card GALLO CARD \u00b7 SERVICIOS Pago de servicios Paga recibos y servicios desde Gallo Card. Pagos pendientes CFE Electricidad Vence 28 mayo \u00b7 Mayo 2025 $428.00 Por pagar Telmex \/ Infinitum Vence 10 jun \u00b7 Mayo 2025 $649.00 Por pagar Servicios populares CFE Telmex Totalplay Gas M\u00e1s Explorar por tipo […]<\/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-2613","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/pages\/2613","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=2613"}],"version-history":[{"count":31,"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/pages\/2613\/revisions"}],"predecessor-version":[{"id":2752,"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/pages\/2613\/revisions\/2752"}],"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=2613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}