{"id":2530,"date":"2026-05-26T23:49:58","date_gmt":"2026-05-26T23:49:58","guid":{"rendered":"https:\/\/maanyuba.com\/?page_id=2530"},"modified":"2026-06-08T23:31:44","modified_gmt":"2026-06-08T23:31:44","slug":"bono-gallo","status":"publish","type":"page","link":"https:\/\/maanyuba.com\/en\/gallo-card\/bono-gallo\/","title":{"rendered":"Bono gallo"},"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\nBono Gallo \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#bg-demo .bg-confirm-text {\r\n text-align: center !important;\r\n margin-left: auto !important;\r\n margin-right: auto !important;\r\n margin-top: 24px !important;\r\n}\r\n\/* \u2500\u2500 FIX confirm icon: no se apachurra \u2500\u2500 *\/\r\n#bg-demo .bg-confirm-icon {\r\n width: 72px !important;\r\n height: 72px !important;\r\n min-width: 72px !important;\r\n min-height: 72px !important;\r\n flex: 0 0 72px !important;\r\n aspect-ratio: 1 \/ 1 !important;\r\n border-radius: 999px !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n background: var(--bg-blue) !important;\r\n box-shadow:\r\n 0 0 0 12px rgba(26,80,232,.10),\r\n 0 0 0 24px rgba(26,80,232,.05) !important;\r\n}\r\n#bg-demo .bg-confirm-icon svg {\r\n width: 38px !important;\r\n height: 38px !important;\r\n flex: 0 0 auto !important;\r\n display: block !important;\r\n}\r\n#bg-demo .bg-confirm-wrap > * {\r\n flex-shrink: 0 !important;\r\n}\r\n\r\n\/* =====================================================\r\n FIX \u00daNICO:\r\n Header oscuro + contenedor claro redondeado\r\n sin romper Oferta ni Beneficios\r\n ===================================================== *\/\r\n\r\n\/* \u2500\u2500 INTERNAL SCREENS: header oscuro + container claro redondeado \u2500\u2500 *\/\r\n#bg-demo .bg-screen:not(#screen-oferta):not(#screen-beneficios) {\r\n height: 100svh !important;\r\n min-height: 100svh !important;\r\n background: var(--bg-black) !important;\r\n overflow: hidden !important;\r\n}\r\n\r\n\/* \u2500\u2500 OFERTA: background full screen \u2500\u2500 *\/\r\n#bg-demo #screen-oferta {\r\n height: 100svh !important;\r\n min-height: 100svh !important;\r\n position: relative !important;\r\n overflow: hidden !important;\r\n background: #0d0f12 !important;\r\n}\r\n\r\n\/* Si no est\u00e1 activa, se oculta aunque otro fix le haya puesto display:flex *\/\r\n#bg-demo #screen-oferta:not(.bg-active) {\r\n display: none !important;\r\n}\r\n\r\n\/* Solo cuando est\u00e1 activa se muestra como pantalla *\/\r\n#bg-demo #screen-oferta.bg-active {\r\n display: flex !important;\r\n flex-direction: column !important;\r\n}\r\n\r\n\/* Imagen cubriendo TODA la pantalla *\/\r\n#bg-demo #screen-oferta::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n background-image: url(\"https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/05\/bono-gallo-bg_OK.png\");\r\n background-size: cover;\r\n background-position: center top;\r\n background-repeat: no-repeat;\r\n}\r\n\r\n\/* Overlay para que el texto siga legible *\/\r\n#bg-demo #screen-oferta::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: 1;\r\n background: linear-gradient(\r\n to bottom,\r\n rgba(13, 15, 18, 0.05) 0%,\r\n rgba(13, 15, 18, 0.18) 42%,\r\n rgba(13, 15, 18, 0.78) 72%,\r\n #0d0f12 100%\r\n );\r\n pointer-events: none;\r\n}\r\n\r\n\/* La zona de imagen ya no ocupa media pantalla *\/\r\n#bg-demo #screen-oferta .bg-oferta-image-zone {\r\n position: absolute !important;\r\n inset: 0 !important;\r\n height: auto !important;\r\n min-height: 0 !important;\r\n background: transparent !important;\r\n overflow: visible !important;\r\n z-index: 2 !important;\r\n pointer-events: none !important;\r\n}\r\n\r\n\/* Oculta upload\/imagen anterior *\/\r\n#bg-demo #screen-oferta .bg-upload-placeholder,\r\n#bg-demo #screen-oferta #oferta-img,\r\n#bg-demo #screen-oferta .bg-change-img-btn,\r\n#bg-demo #screen-oferta .bg-img-overlay {\r\n display: none !important;\r\n}\r\n\r\n\/* Mantiene el badge arriba *\/\r\n#bg-demo #screen-oferta .bg-oferta-badge {\r\n position: absolute !important;\r\n top: 16px !important;\r\n left: 16px !important;\r\n z-index: 4 !important;\r\n}\r\n\r\n\/* Contenido arriba del fondo y pegado abajo *\/\r\n#bg-demo #screen-oferta .bg-oferta-body {\r\n position: relative !important;\r\n z-index: 3 !important;\r\n flex: 1 1 auto !important;\r\n min-height: 100svh !important;\r\n margin-top: 0 !important;\r\n padding: 0 22px calc(22px + env(safe-area-inset-bottom)) !important;\r\n display: flex !important;\r\n flex-direction: column !important;\r\n justify-content: flex-end !important;\r\n}\r\n\r\n\/* Si el price row est\u00e1 vac\u00edo, que no meta aire *\/\r\n#bg-demo #screen-oferta .bg-oferta-price-row:empty {\r\n display: none !important;\r\n margin: 0 !important;\r\n}\r\n\r\n\/* Header oscuro fijo visual *\/\r\n#bg-demo .bg-screen:not(#screen-oferta):not(#screen-beneficios) .bg-page-header {\r\n flex: 0 0 70px !important;\r\n height: 70px !important;\r\n background: var(--bg-black) !important;\r\n position: relative !important;\r\n top: auto !important;\r\n z-index: 10 !important;\r\n}\r\n\r\n\/* Container claro con esquinas superiores redondeadas *\/\r\n#bg-demo .bg-screen:not(#screen-oferta):not(#screen-beneficios) .bg-page-content,\r\n#bg-demo .bg-screen:not(#screen-oferta):not(#screen-beneficios) .bg-flow-page-content {\r\n flex: 1 1 auto !important;\r\n min-height: 0 !important;\r\n background: var(--bg-bg) !important;\r\n border-radius: 26px 26px 0 0 !important;\r\n overflow-y: auto !important;\r\n overflow-x: hidden !important;\r\n padding: 22px 16px 110px !important;\r\n}\r\n\r\n\/* Pantallas que tienen CTA fijo abajo necesitan m\u00e1s aire *\/\r\n#bg-demo .bg-screen:not(#screen-oferta):not(#screen-beneficios) .bg-flow-page-content {\r\n padding-bottom: 132px !important;\r\n}\r\n\r\n\/* Evita que el contenido tape visualmente el radio *\/\r\n#bg-demo .bg-screen:not(#screen-oferta):not(#screen-beneficios) .bg-page-content > *,\r\n#bg-demo .bg-screen:not(#screen-oferta):not(#screen-beneficios) .bg-flow-page-content > * {\r\n position: relative;\r\n z-index: 1;\r\n}\r\n\r\n\/* =====================================================\r\n RESTAURAR BENEFICIOS:\r\n Esta pantalla NO debe usar container redondeado\r\n ===================================================== *\/\r\n\r\n#bg-demo #screen-beneficios {\r\n height: 100svh !important;\r\n min-height: 100svh !important;\r\n background: var(--bg-bg) !important;\r\n overflow: hidden !important;\r\n}\r\n\r\n\/* Header normal en Beneficios *\/\r\n#bg-demo #screen-beneficios .bg-page-header {\r\n flex: 0 0 70px !important;\r\n height: 70px !important;\r\n background: var(--bg-black) !important;\r\n position: relative !important;\r\n top: auto !important;\r\n z-index: 10 !important;\r\n}\r\n\r\n\/* Wrapper scrolleable original de Beneficios *\/\r\n#bg-demo #screen-beneficios > div[style*=\"overflow-y:auto\"] {\r\n flex: 1 1 auto !important;\r\n min-height: 0 !important;\r\n overflow-y: auto !important;\r\n overflow-x: hidden !important;\r\n background: var(--bg-bg) !important;\r\n padding-bottom: 90px !important;\r\n border-radius: 0 !important;\r\n}\r\n\r\n\/* Hero azul sin redondeos heredados *\/\r\n#bg-demo #screen-beneficios .bg-ben-hero {\r\n border-radius: 0 !important;\r\n margin: 0 !important;\r\n}\r\n\r\n\/* Contenido de Beneficios limpio *\/\r\n#bg-demo #screen-beneficios .bg-ben-content {\r\n background: var(--bg-bg) !important;\r\n padding: 20px 16px 0 !important;\r\n}\r\n\r\n\/* \u2500\u2500 WRAPPER: todo aislado dentro de #bg-demo \u2500\u2500 *\/\r\n#bg-demo {\r\n --bg-bg:#f2f4f8; --bg-white:#ffffff; --bg-black:#0d0f12;\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-shadow-md:0 4px 24px rgba(0,0,0,.10);\r\n display:block !important;\r\n position:relative;\r\n width:100% !important;\r\n min-height:100vh;\r\n background:#0d0f12 !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 min-height:100vh;\r\n max-width:430px;\r\n margin:0 auto !important;\r\n background:var(--bg-bg);\r\n padding:0 !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 OFERTA SPLASH \u2500\u2500 *\/\r\n#bg-demo #screen-oferta { background:#0d0f12 !important; overflow:hidden; color:#fff; }\r\n#bg-demo .bg-oferta-image-zone { position:relative; height:56vh; min-height:290px; overflow:hidden; background:#111318; }\r\n#bg-demo .bg-oferta-image-zone img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }\r\n#bg-demo .bg-img-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(13,15,18,0) 35%,rgba(13,15,18,.65) 70%,#0d0f12 100%); z-index:1; }\r\n#bg-demo .bg-upload-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:linear-gradient(160deg,#0c1a3a 0%,#0d0f12 100%); cursor:pointer; position:relative; }\r\n#bg-demo .bg-upload-placeholder input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }\r\n#bg-demo .bg-upload-icon-wrap { width:64px; height:64px; background:rgba(255,255,255,.04); border:1.5px dashed rgba(255,255,255,.18); border-radius:16px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.3); }\r\n#bg-demo .bg-upload-hint { font-size:12px; color:rgba(255,255,255,.28); letter-spacing:.3px; }\r\n#bg-demo .bg-change-img-btn { position:absolute; top:16px; right:16px; z-index:5; background:rgba(0,0,0,.52); border:1px solid rgba(255,255,255,.14) !important; border-radius:20px; color:rgba(255,255,255,.8) !important; font-size:11px; font-weight:600; padding:6px 13px !important; cursor:pointer; backdrop-filter:blur(6px); display:none; font-family:inherit !important; }\r\n#bg-demo .bg-oferta-badge { position:absolute; top:16px; left:16px; z-index:5; background:var(--bg-blue); color:#fff; font-size:9px; font-weight:700; letter-spacing:1.8px; padding:5px 12px; border-radius:99px; }\r\n#bg-demo .bg-oferta-body { position:relative; z-index:2; padding:0 22px 28px; margin-top:-6px; flex:1; display:flex; flex-direction:column; }\r\n#bg-demo .bg-oferta-kicker { font-size:10px; font-weight:700; letter-spacing:2px; color:rgba(255,255,255,.38); margin-bottom:8px; text-transform:uppercase; }\r\n#bg-demo .bg-oferta-title { font-family:'Bebas Neue',sans-serif !important; font-size:56px; line-height:.95; color:#fff !important; letter-spacing:1px; margin-bottom:14px; }\r\n#bg-demo .bg-oferta-title span { color:var(--bg-blue) !important; }\r\n#bg-demo .bg-oferta-pills { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:20px; }\r\n#bg-demo .bg-pill { display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1) !important; border-radius:99px; padding:5px 11px !important; font-size:11px; font-weight:500; color:rgba(255,255,255,.72) !important; text-decoration:none !important; }\r\n#bg-demo .bg-pill svg { color:#4d8aff; flex-shrink:0; }\r\n#bg-demo .bg-oferta-price-row { display:flex; align-items:baseline; gap:8px; margin-bottom:20px; }\r\n#bg-demo .bg-oferta-price { font-family:'Bebas Neue',sans-serif !important; font-size:40px; color:#fff !important; letter-spacing:1px; }\r\n#bg-demo .bg-oferta-price-sub { font-size:12px; color:rgba(255,255,255,.38); font-weight:500; }\r\n\r\n\/* \u2500\u2500 BUTTONS \u2500\u2500 *\/\r\n#bg-demo .bg-oferta-cta,\r\n#bg-demo .bg-oferta-outline-btn,\r\n#bg-demo .bg-oferta-skip,\r\n#bg-demo .bg-btn-primary,\r\n#bg-demo .bg-btn-secondary,\r\n#bg-demo .bg-btn-back,\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-oferta-cta { width:100%; background:var(--bg-blue) !important; color:#fff !important; border:none !important; border-radius:14px !important; padding:17px !important; font-size:16px !important; font-weight:700 !important; font-family:inherit !important; letter-spacing:-.2px; display:flex !important; align-items:center; justify-content:center; gap:8px; margin-bottom:10px; transition:background .15s,transform .1s; }\r\n#bg-demo .bg-oferta-cta:active { background:var(--bg-blue-dark) !important; transform:scale(.98); }\r\n#bg-demo .bg-oferta-outline-btn { width:100%; background:rgba(255,255,255,.07) !important; color:rgba(255,255,255,.8) !important; border:1.5px solid rgba(255,255,255,.15) !important; border-radius:14px !important; padding:14px !important; font-size:14px !important; font-weight:600 !important; font-family:inherit !important; display:flex !important; align-items:center; justify-content:center; gap:7px; margin-bottom:10px; transition:background .15s; }\r\n#bg-demo .bg-oferta-outline-btn:active { background:rgba(255,255,255,.12) !important; }\r\n#bg-demo .bg-oferta-skip { width:100%; background:transparent !important; color:rgba(255,255,255,.3) !important; border:none !important; padding:10px !important; font-size:13px !important; font-weight:500 !important; font-family:inherit !important; transition:color .15s; }\r\n\r\n\/* \u2500\u2500 PAGE HEADER \u2500\u2500 *\/\r\n#bg-demo .bg-page-header { display:flex !important; align-items:center; justify-content:center; padding:0 20px; height:52px; background:var(--bg-black) !important; position:sticky; top:0; z-index:10; }\r\n#bg-demo .bg-btn-back { position:absolute !important; left:16px; top:50%; transform:translateY(-50%); background:none !important; border:none !important; color:#fff !important; padding:6px !important; display:flex !important; align-items:center; border-radius:8px; }\r\n#bg-demo .bg-page-title { display:none !important; font-size:17px !important; font-weight:600 !important; color:#fff !important; letter-spacing:-.2px; text-align:center; }\r\n#bg-demo .bg-page-content { padding:20px 16px 100px; flex:1; overflow-y:auto; }\r\n\r\n\/* \u2500\u2500 BENEFICIOS \u2500\u2500 *\/\r\n#bg-demo #screen-beneficios { background:#fff !important; }\r\n#bg-demo .bg-ben-hero { background:linear-gradient(160deg,#0d1a3a 0%,#0d2060 50%,#1a50e8 100%); padding:32px 22px 36px; position:relative; overflow:hidden; }\r\n#bg-demo .bg-ben-hero::after { content:''; position:absolute; right:-40px; bottom:-40px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.04); }\r\n#bg-demo .bg-ben-hero-tag { display:inline-block; background:rgba(255,255,255,.12); color:rgba(255,255,255,.85) !important; font-size:9px; font-weight:700; letter-spacing:1.8px; padding:4px 12px; border-radius:99px; margin-bottom:12px; }\r\n#bg-demo .bg-ben-hero-title { font-family:'Bebas Neue',sans-serif !important; font-size:48px; line-height:.95; color:#fff !important; letter-spacing:1px; margin-bottom:6px; }\r\n#bg-demo .bg-ben-hero-sub { font-size:13px; color:rgba(255,255,255,.6) !important; line-height:1.5; }\r\n#bg-demo .bg-ben-content { background:var(--bg-blue-light); }\r\n#bg-demo .bg-ben-section-title { font-size:11px; font-weight:700; letter-spacing:1.2px; color:var(--bg-text-3); margin-bottom:12px; text-transform:uppercase; }\r\n#bg-demo .bg-ben-list { display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }\r\n#bg-demo .bg-ben-item { background:var(--bg-white); border-radius:var(--bg-radius); box-shadow:var(--bg-shadow); padding:14px 16px; display:flex; align-items:center; gap:14px; }\r\n#bg-demo .bg-ben-item-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:22px; }\r\n#bg-demo .bg-ben-item-icon.bg-green { background:#edfbf4; }\r\n#bg-demo .bg-ben-item-icon.bg-blue { background:var(--bg-blue-light); }\r\n#bg-demo .bg-ben-item-icon.bg-orange { background:#fff4ed; }\r\n#bg-demo .bg-ben-item-icon.bg-purple { background:#f3f0ff; }\r\n#bg-demo .bg-ben-item-body { flex:1; }\r\n#bg-demo .bg-ben-item-name { font-size:14px; font-weight:700; color:var(--bg-text); margin-bottom:2px; }\r\n#bg-demo .bg-ben-item-desc { font-size:12px; color:var(--bg-text-2); line-height:1.4; }\r\n#bg-demo .bg-ben-item-badge { background:var(--bg-blue-light); color:var(--bg-blue) !important; font-size:10px; font-weight:700; letter-spacing:.5px; padding:3px 9px; border-radius:99px; white-space:nowrap; flex-shrink:0; }\r\n#bg-demo .bg-ben-msi-card { background:linear-gradient(120deg,#0d0f12,#1a50e8); border-radius:var(--bg-radius); padding:18px 20px; margin-bottom:22px; display:flex; align-items:center; gap:16px; }\r\n#bg-demo .bg-ben-msi-text { flex:1; }\r\n#bg-demo .bg-ben-msi-label { font-size:10px; font-weight:700; letter-spacing:1.5px; color:rgba(255,255,255,.5) !important; margin-bottom:4px; }\r\n#bg-demo .bg-ben-msi-title { font-size:18px; font-weight:700; color:#fff !important; margin-bottom:2px; }\r\n#bg-demo .bg-ben-msi-sub { font-size:12px; color:rgba(255,255,255,.55) !important; }\r\n#bg-demo .bg-ben-msi-icon { width:48px; height:48px; background:rgba(255,255,255,.1); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }\r\n#bg-demo .bg-ben-footer-note { background:#f8f9fb; border:1px solid var(--bg-border) !important; border-radius:var(--bg-radius-sm); padding:12px 14px; font-size:11px; color:var(--bg-text-3); line-height:1.5; margin-bottom:20px; text-align:center; }\r\n\r\n\/* \u2500\u2500 SELECT \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#bg-demo .bg-select-cards { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }\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); }\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; color:var(--bg-blue) !important; flex-shrink:0; }\r\n#bg-demo .bg-sel-card.bg-selected .bg-sel-icon { background:var(--bg-blue) !important; color:#fff !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-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; }\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 FORMS \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-select { cursor:pointer; background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%238a92a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\"); background-repeat:no-repeat; background-position:right 12px center; padding-right:38px !important; }\r\n#bg-demo .bg-form-row-2 { display:grid !important; grid-template-columns:1fr 1fr; gap:12px; }\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-qty-wrap { display:flex !important; align-items:center; background:#fff !important; border:1.5px solid var(--bg-border) !important; border-radius:var(--bg-radius-sm); overflow:hidden; height:48px; }\r\n#bg-demo .bg-qty-btn { width:48px; height:100%; background:#f8f9fb !important; border:none !important; color:var(--bg-text) !important; font-size:20px !important; display:flex !important; align-items:center; justify-content:center; flex-shrink:0; transition:background .1s; padding:0 !important; }\r\n#bg-demo .bg-qty-btn:active { background:var(--bg-border) !important; }\r\n#bg-demo .bg-qty-val { flex:1; text-align:center; font-size:17px; font-weight:600; color:var(--bg-text) !important; }\r\n\r\n\/* \u2500\u2500 ZONA \u2500\u2500 *\/\r\n#bg-demo .bg-zona-option { background:var(--bg-white) !important; border:1.5px solid var(--bg-border) !important; border-radius:var(--bg-radius); padding:14px 16px; display:flex !important; align-items:center; gap:12px; cursor:pointer; transition:border-color .15s,box-shadow .15s; box-shadow:var(--bg-shadow); margin-bottom:8px; }\r\n#bg-demo .bg-zona-option.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-zona-radio { width:20px; height:20px; border-radius:50%; border:2px solid var(--bg-border) !important; display:flex !important; align-items:center; justify-content:center; flex-shrink:0; transition:border-color .15s; }\r\n#bg-demo .bg-zona-option.bg-selected .bg-zona-radio { border-color:var(--bg-blue) !important; background:var(--bg-blue) !important; }\r\n#bg-demo .bg-zona-radio-dot { width:7px; height:7px; border-radius:50%; background:#fff; display:none; }\r\n#bg-demo .bg-zona-option.bg-selected .bg-zona-radio-dot { display:block; }\r\n#bg-demo .bg-zona-body { flex:1; }\r\n#bg-demo .bg-zona-name { font-size:14px; font-weight:600; color:var(--bg-text) !important; margin-bottom:2px; }\r\n#bg-demo .bg-zona-price { font-size:13px; font-weight:700; color:var(--bg-blue) !important; }\r\n\r\n\/* \u2500\u2500 SUMMARY \u2500\u2500 *\/\r\n#bg-demo .bg-sum-mini { background:var(--bg-white) !important; border-radius:var(--bg-radius); box-shadow:var(--bg-shadow); padding:14px 16px; margin-bottom:20px; display:flex !important; flex-direction:column; gap:9px; }\r\n#bg-demo .bg-sum-row { display:flex !important; justify-content:space-between; font-size:13px; color:var(--bg-text-2); }\r\n#bg-demo .bg-sum-row span:last-child { color:var(--bg-text) !important; font-weight:500; }\r\n#bg-demo .bg-sum-row.bg-total { padding-top:9px; border-top:1px solid var(--bg-border) !important; }\r\n#bg-demo .bg-sum-row.bg-total span:first-child { font-weight:700; color:var(--bg-text) !important; }\r\n#bg-demo .bg-sum-row.bg-total span:last-child { font-weight:700; color:var(--bg-blue) !important; font-size:16px; }\r\n\r\n\/* \u2500\u2500 FOUND \/ DETAIL \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:16px; 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#bg-demo .bg-alert-note { display:flex !important; align-items:flex-start; gap:8px; background:var(--bg-yellow-bg) !important; border:1px solid var(--bg-yellow-border) !important; border-radius:var(--bg-radius-sm); padding:12px 14px; font-size:12px; color:var(--bg-yellow-text) !important; line-height:1.5; margin-bottom:18px; }\r\n\r\n\/* \u2500\u2500 PAGO MODO \/ MSI \u2500\u2500 *\/\r\n#bg-demo .bg-pago-modo-card { background:var(--bg-white) !important; border:1.5px solid var(--bg-border) !important; border-radius:var(--bg-radius); padding:18px 16px; box-shadow:var(--bg-shadow); cursor:pointer; margin-bottom:10px; position:relative; transition:border-color .15s,box-shadow .15s; }\r\n#bg-demo .bg-pago-modo-card:active,#bg-demo .bg-pago-modo-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-pago-recomendado { display:inline-block; background:var(--bg-blue-light); color:var(--bg-blue) !important; font-size:10px; font-weight:700; letter-spacing:.5px; padding:3px 9px; border-radius:99px; margin-bottom:6px; }\r\n#bg-demo .bg-pago-modo-label { font-size:10px; font-weight:700; letter-spacing:1px; color:var(--bg-text-3); margin-bottom:4px; text-transform:uppercase; }\r\n#bg-demo .bg-pago-modo-amount { font-size:26px; font-weight:700; color:var(--bg-text) !important; letter-spacing:-.5px; margin-bottom:4px; }\r\n#bg-demo .bg-pago-modo-desc { font-size:12px; color:var(--bg-text-2); line-height:1.45; }\r\n#bg-demo .bg-pago-modo-arrow { position:absolute; top:50%; right:16px; transform:translateY(-50%); color:var(--bg-text-3); }\r\n#bg-demo .bg-msi-chips { display:flex !important; gap:6px; flex-wrap:wrap; margin-top:10px; }\r\n#bg-demo .bg-msi-chip { background:#f0f7ff !important; border:1px solid #c5dcff !important; border-radius:8px; padding:4px 10px !important; font-size:11px; font-weight:600; color:var(--bg-blue) !important; }\r\n#bg-demo .bg-msi-chip.bg-disabled { background:#f8f9fb !important; border-color:var(--bg-border) !important; color:var(--bg-text-3) !important; }\r\n\r\n\/* \u2500\u2500 ORDER \/ CARD PREVIEW \u2500\u2500 *\/\r\n#bg-demo .bg-order-card { background:var(--bg-white) !important; border-radius:var(--bg-radius); box-shadow:var(--bg-shadow); padding:16px; margin-bottom:14px; }\r\n#bg-demo .bg-order-title { font-size:11px; font-weight:700; letter-spacing:1px; color:var(--bg-text-3); margin-bottom:12px; }\r\n#bg-demo .bg-order-row { display:flex !important; justify-content:space-between; font-size:13px; color:var(--bg-text-2); padding:4px 0; }\r\n#bg-demo .bg-order-row span:last-child { color:var(--bg-text) !important; font-weight:500; }\r\n#bg-demo .bg-order-div { height:1px; background:var(--bg-border); margin:10px 0; }\r\n#bg-demo .bg-order-total { display:flex !important; justify-content:space-between; }\r\n#bg-demo .bg-order-total span:first-child { font-weight:700; color:var(--bg-text) !important; font-size:14px; }\r\n#bg-demo .bg-order-total span:last-child { font-weight:700; color:var(--bg-blue) !important; font-size:17px; }\r\n#bg-demo .bg-secure-badge { display:flex !important; align-items:center; gap:6px; font-size:11px; color:var(--bg-green) !important; font-weight:600; margin-bottom:12px; }\r\n#bg-demo .bg-card-prev { background:linear-gradient(135deg,#1e3a6e,#1240c4 60%,#2d7aff) !important; border-radius:14px; padding:20px; margin-bottom:4px; box-shadow:0 4px 20px rgba(26,80,232,.2); }\r\n#bg-demo .bg-card-prev-top { display:flex !important; justify-content:space-between; align-items:center; margin-bottom:20px; }\r\n#bg-demo .bg-chip { width:32px; height:24px; background:rgba(255,255,255,.75); border-radius:4px; position:relative; overflow:hidden; }\r\n#bg-demo .bg-chip::after { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(0,0,0,.1); }\r\n#bg-demo .bg-card-brand {\r\n min-width:56px;\r\n min-height:24px;\r\n display:flex !important;\r\n align-items:center;\r\n justify-content:flex-end;\r\n color:#fff !important;\r\n}\r\n#bg-demo .bg-card-brand svg { display:block; width:52px; height:24px; }\r\n#bg-demo .bg-card-brand .bg-card-brand-text {\r\n font-size:14px; font-weight:700; color:#fff !important; letter-spacing:1.2px; font-style:italic;\r\n}\r\n#bg-demo .bg-card-num-prev { font-size:16px; letter-spacing:2.5px; color:#fff !important; font-family:'SF Mono','Courier New',monospace !important; margin-bottom:20px; font-weight:500; }\r\n#bg-demo .bg-card-bottom { display:flex !important; justify-content:space-between; }\r\n#bg-demo .bg-card-lbl { font-size:8px; letter-spacing:1.5px; color:rgba(255,255,255,.5) !important; margin-bottom:3px; }\r\n#bg-demo .bg-card-val { font-size:12px; font-weight:600; color:#fff !important; letter-spacing:.5px; font-family:'SF Mono','Courier New',monospace !important; text-transform:uppercase; }\r\n\r\n\/* \u2500\u2500 PRIMARY \/ SECONDARY BUTTONS \u2500\u2500 *\/\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:hover { background:var(--bg-blue) !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-secondary:active { background:var(--bg-bg) !important; }\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; padding:48px 20px 0; }\r\n#bg-demo .bg-confirm-icon { margin-top:40px; background:var(--bg-blue) !important; border-radius:50%; display:flex !important; align-items:center; justify-content:center; margin-bottom:20px; box-shadow:0 0 0 12px rgba(26,80,232,.1),0 0 0 24px rgba(26,80,232,.05); }\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@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\/* \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-flow-cta-bar .bg-btn-primary { margin-bottom:0; }\r\n#bg-demo .bg-flow-cta-bar .bg-btn-secondary { margin-bottom:0; }\r\n#bg-demo .bg-flow-page-content { padding:20px 16px 120px; flex:1; overflow-y:auto; }\r\n\r\n\/* =====================================================\r\n EMBED MODE \u2014 agrega SOLO lo necesario al original\r\n No modifica ning\u00fan estilo existente\r\n ===================================================== *\/\r\n\r\n\/* Altura de la nav nativa de la app. Cambia este valor si var\u00eda. *\/\r\n#bg-demo { --bg-nav-h: 20px; }\r\n\r\n\r\n\/* Acorta todas las pantallas en la misma medida *\/\r\n#bg-demo .bg-screen,\r\n#bg-demo #screen-oferta,\r\n#bg-demo #screen-beneficios {\r\n height: 100svh !important;\r\n min-height: calc(100svh - var(--bg-nav-h)) !important;\r\n padding-top: var(--bg-nav-h) !important;\r\n}\r\n\r\n\/* El cuerpo de oferta respeta la nueva altura *\/\r\n#bg-demo #screen-oferta .bg-oferta-body {\r\n min-height: calc(100svh - var(--bg-nav-h)) !important;\r\n}\r\n\r\n\/* Oculta el header interno \u2014 la app ya tiene el suyo *\/\r\n#bg-demo .bg-page-header {\r\n display: none !important;\r\n}\r\n\r\n\/* Sin header oscuro: quita fondo negro y bordes redondeados hu\u00e9rfanos\r\n solo en las pantallas internas que los usaban para el efecto del header *\/\r\n#bg-demo .bg-screen:not(#screen-oferta):not(#screen-beneficios) {\r\n background: var(--bg-bg) !important;\r\n}\r\n#bg-demo .bg-screen:not(#screen-oferta):not(#screen-beneficios) .bg-page-content,\r\n#bg-demo .bg-screen:not(#screen-oferta):not(#screen-beneficios) .bg-flow-page-content {\r\n border-radius: 0 !important;\r\n}\r\n\r\n\/* \u2500\u2500 Bot\u00f3n back: icono cuadrado peque\u00f1o, mismo estilo que el sistema \u2500\u2500 *\/\r\n#bg-demo .bg-btn-back-em {\r\n width: 52px !important;\r\n height: 52px !important;\r\n flex: 0 0 52px !important;\r\n background: var(--bg-bg) !important;\r\n border: 1.5px solid var(--bg-border) !important;\r\n border-radius: 12px !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n color: var(--bg-text-2) !important;\r\n cursor: pointer;\r\n padding: 0 !important;\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 transition: background .15s !important;\r\n}\r\n#bg-demo .bg-btn-back-em:active {\r\n background: var(--bg-border) !important;\r\n}\r\n\r\n\/* \u2500\u2500 Fila: [\u2190 icono] [CTA primario flex:1]\r\n La barra misma se convierte en flex \u2014 sin div intermedio \u2500\u2500 *\/\r\n#bg-demo .bg-screen.bg-active .bg-flow-cta-bar.bg-has-back {\r\n display: flex !important;\r\n align-items: center !important;\r\n 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;\r\n width: auto !important;\r\n margin-bottom: 0 !important;\r\n}\r\n\r\n\/* Barra solo-back: padding reducido *\/\r\n#bg-demo .bg-screen.bg-active .bg-flow-cta-bar.bg-back-only {\r\n padding-top: 10px !important;\r\n padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;\r\n}\r\n\r\n\r\n\r\n\/* FIX: recuperar efecto de contenedor redondeado *\/\r\n#bg-demo .bg-screen.bg-active:not(#screen-oferta):not(#screen-beneficios) {\r\n background: var(--bg-black) !important;\r\n}\r\n\r\n#bg-demo .bg-screen.bg-active:not(#screen-oferta):not(#screen-beneficios) .bg-page-content,\r\n#bg-demo .bg-screen.bg-active:not(#screen-oferta):not(#screen-beneficios) .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}\r\n\r\n\/* =====================================================\r\n SOPORTE BONO GALLO \u2014 overlay global sin alterar flujo\r\n ===================================================== *\/\r\n#bg-demo .bg-support-fab {\r\n position: fixed !important;\r\n top: calc(var(--bg-nav-h, 0px) + env(safe-area-inset-top, 0px) + 16px) !important;\r\n right: max(14px, calc((100vw - 430px) \/ 2 + 14px)) !important;\r\n z-index: 9999 !important;\r\n display: inline-flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n gap: 8px !important;\r\n min-width: 96px !important;\r\n height: 46px !important;\r\n padding: 0 17px !important;\r\n border-radius: 999px !important;\r\n border: 1px solid rgba(255,255,255,.28) !important;\r\n background: rgba(255,255,255,.96) !important;\r\n color: var(--bg-blue) !important;\r\n box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;\r\n font-family: inherit !important;\r\n font-size: 13px !important;\r\n font-weight: 800 !important;\r\n letter-spacing: -.1px !important;\r\n cursor: pointer !important;\r\n pointer-events: auto !important;\r\n touch-action: manipulation !important;\r\n user-select: none !important;\r\n -webkit-user-select: none !important;\r\n -webkit-appearance: none !important;\r\n appearance: none !important;\r\n backdrop-filter: blur(12px) !important;\r\n}\r\n#bg-demo .bg-support-fab::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: -12px;\r\n border-radius: 999px;\r\n}\r\n#bg-demo .bg-support-fab svg {\r\n width: 17px !important;\r\n height: 17px !important;\r\n flex: 0 0 17px !important;\r\n pointer-events: none !important;\r\n}\r\n#bg-demo .bg-support-fab:active {\r\n transform: scale(.98) !important;\r\n}\r\n\r\n#bg-demo .bg-support-overlay {\r\n position: fixed !important;\r\n inset: 0 !important;\r\n z-index: 58 !important;\r\n background: rgba(13,15,18,.52) !important;\r\n opacity: 0 !important;\r\n pointer-events: none !important;\r\n transition: opacity .18s ease !important;\r\n}\r\n#bg-demo .bg-support-overlay.bg-open {\r\n opacity: 1 !important;\r\n pointer-events: auto !important;\r\n}\r\n\r\n#bg-demo .bg-support-sheet {\r\n position: fixed !important;\r\n left: 50% !important;\r\n bottom: 0 !important;\r\n transform: translate(-50%, calc(100% + 18px)) !important;\r\n z-index: 60 !important;\r\n width: 100% !important;\r\n max-width: 430px !important;\r\n background: #fff !important;\r\n border-radius: 24px 24px 0 0 !important;\r\n border: 1px solid rgba(228,231,239,.9) !important;\r\n box-shadow: 0 -18px 46px rgba(0,0,0,.18) !important;\r\n padding: 18px 16px calc(16px + env(safe-area-inset-bottom)) !important;\r\n transition: transform .22s ease !important;\r\n}\r\n#bg-demo .bg-support-sheet.bg-open {\r\n transform: translate(-50%, 0) !important;\r\n}\r\n#bg-demo .bg-support-handle {\r\n width: 42px !important;\r\n height: 4px !important;\r\n border-radius: 999px !important;\r\n background: var(--bg-border) !important;\r\n margin: 0 auto 16px !important;\r\n}\r\n#bg-demo .bg-support-head {\r\n display: flex !important;\r\n align-items: flex-start !important;\r\n justify-content: space-between !important;\r\n gap: 12px !important;\r\n margin-bottom: 14px !important;\r\n}\r\n#bg-demo .bg-support-kicker {\r\n font-size: 10px !important;\r\n font-weight: 800 !important;\r\n color: var(--bg-blue) !important;\r\n letter-spacing: 1.2px !important;\r\n text-transform: uppercase !important;\r\n margin-bottom: 4px !important;\r\n}\r\n#bg-demo .bg-support-title {\r\n font-size: 20px !important;\r\n line-height: 1.15 !important;\r\n font-weight: 800 !important;\r\n letter-spacing: -.35px !important;\r\n color: var(--bg-text) !important;\r\n margin: 0 !important;\r\n}\r\n#bg-demo .bg-support-copy {\r\n font-size: 13px !important;\r\n line-height: 1.45 !important;\r\n color: var(--bg-text-2) !important;\r\n margin: 8px 0 0 !important;\r\n}\r\n#bg-demo .bg-support-close {\r\n width: 36px !important;\r\n height: 36px !important;\r\n flex: 0 0 36px !important;\r\n border-radius: 999px !important;\r\n border: 1px solid var(--bg-border) !important;\r\n background: #fff !important;\r\n color: var(--bg-text-2) !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n cursor: pointer !important;\r\n padding: 0 !important;\r\n -webkit-appearance: none !important;\r\n appearance: none !important;\r\n}\r\n#bg-demo .bg-support-actions {\r\n display: grid !important;\r\n grid-template-columns: 1fr !important;\r\n gap: 9px !important;\r\n}\r\n#bg-demo .bg-support-action {\r\n width: 100% !important;\r\n min-height: 52px !important;\r\n border-radius: 14px !important;\r\n font-family: inherit !important;\r\n font-size: 14px !important;\r\n font-weight: 700 !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n gap: 9px !important;\r\n cursor: pointer !important;\r\n border: 1.5px solid var(--bg-border) !important;\r\n -webkit-appearance: none !important;\r\n appearance: none !important;\r\n}\r\n#bg-demo .bg-support-wa {\r\n background: #17b362 !important;\r\n border-color: #17b362 !important;\r\n color: #fff !important;\r\n}\r\n#bg-demo .bg-support-call {\r\n background: var(--bg-blue) !important;\r\n border-color: var(--bg-blue) !important;\r\n color: #fff !important;\r\n}\r\n#bg-demo .bg-support-ghost {\r\n background: #fff !important;\r\n color: var(--bg-text-2) !important;\r\n}\r\n#bg-demo .bg-support-action svg {\r\n width: 18px !important;\r\n height: 18px !important;\r\n flex: 0 0 18px !important;\r\n}\r\n#bg-demo .bg-support-status {\r\n display: none;\r\n margin-top: 10px !important;\r\n border-radius: 12px !important;\r\n padding: 10px 12px !important;\r\n background: var(--bg-green-bg) !important;\r\n border: 1px solid rgba(23,179,98,.18) !important;\r\n color: #126b3f !important;\r\n font-size: 12px !important;\r\n line-height: 1.45 !important;\r\n}\r\n#bg-demo .bg-support-status.bg-show {\r\n display: block !important;\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"bg-demo\">\r\n\r\n<!-- ======= SCREEN 0: OFERTA SPLASH ======= -->\r\n<div id=\"screen-oferta\" class=\"bg-screen bg-active\">\r\n <div class=\"bg-oferta-image-zone\">\r\n <div class=\"bg-upload-placeholder\" id=\"upload-zone\">\r\n <input type=\"file\" accept=\"image\/*\" id=\"img-file-input\"\/>\r\n <\/div>\r\n <img decoding=\"async\" id=\"oferta-img\" src=\"\" alt=\"\" style=\"display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover\"\/>\r\n <div class=\"bg-img-overlay\"><\/div>\r\n <button class=\"bg-change-img-btn\" id=\"change-img-btn\">\u270e Cambiar foto<\/button>\r\n <input type=\"file\" accept=\"image\/*\" id=\"img-file-input-2\" style=\"display:none\"\/>\r\n <\/div>\r\n <div class=\"bg-oferta-body\">\r\n <div class=\"bg-oferta-kicker\">Gallo Card \u00b7 Exclusivo para socios<\/div>\r\n <div class=\"bg-oferta-title\">BONO <span>GALLO<\/span><\/div>\r\n <div class=\"bg-oferta-pills\">\r\n <div class=\"bg-pill\"><svg width=\"12\" height=\"12\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg>Acceso preferencial<\/div>\r\n <div class=\"bg-pill\"><svg width=\"12\" height=\"12\" viewbox=\"0 0 24 24\" fill=\"none\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M16 2v4M8 2v4M3 10h18\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><\/svg>Todos los partidos<\/div>\r\n <div class=\"bg-pill\"><svg width=\"12\" height=\"12\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><\/svg>Descuentos exclusivos<\/div>\r\n <\/div>\r\n <div class=\"bg-oferta-price-row\"><\/div>\r\n <button class=\"bg-oferta-cta\" id=\"btn-oferta-cta\"><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>Comprar o renovar<\/button>\r\n <button class=\"bg-oferta-outline-btn\" id=\"btn-ver-beneficios\"><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>Conoce los beneficios<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ======= SCREEN BENEFICIOS ======= -->\r\n<div id=\"screen-beneficios\" class=\"bg-screen\">\r\n <!-- header oculto en embed; back movido al bottom bar -->\r\n <div class=\"bg-page-header\">\r\n <span class=\"bg-page-title\">Beneficios Bono Gallo<\/span>\r\n <\/div>\r\n <div style=\"overflow-y:auto;flex:1;padding-bottom:90px\">\r\n <div class=\"bg-ben-hero\">\r\n <div class=\"bg-ben-hero-tag\">CON BONO GALLO TAMBI\u00c9N TIENES<\/div>\r\n <div class=\"bg-ben-hero-title\">LOS<br>BENEFICIOS<\/div>\r\n <div class=\"bg-ben-hero-sub\">Acceso a descuentos y experiencias exclusivas para socios de la temporada 2025.<\/div>\r\n <\/div>\r\n <div class=\"bg-ben-content\">\r\n <div class=\"bg-ben-msi-card\">\r\n <div class=\"bg-ben-msi-text\">\r\n <div class=\"bg-ben-msi-label\">GALLO CARD<\/div>\r\n <div class=\"bg-ben-msi-title\">3 y 6 MSI<\/div>\r\n <div class=\"bg-ben-msi-sub\">P\u00e1galo a meses sin intereses con tarjetas participantes<\/div>\r\n <\/div>\r\n <div class=\"bg-ben-msi-icon\">\ud83d\udcb3<\/div>\r\n <\/div>\r\n <div class=\"bg-ben-section-title\">Restaurantes y entretenimiento<\/div>\r\n <div class=\"bg-ben-list\">\r\n <div class=\"bg-ben-item\"><div class=\"bg-ben-item-icon bg-orange\">\ud83c\udf69<\/div><div class=\"bg-ben-item-body\"><div class=\"bg-ben-item-name\">Tim Hortons<\/div><div class=\"bg-ben-item-desc\">Descuento en todas las sucursales participantes<\/div><\/div><div class=\"bg-ben-item-badge\">15% OFF<\/div><\/div>\r\n <div class=\"bg-ben-item\"><div class=\"bg-ben-item-icon bg-blue\">\ud83c\udfac<\/div><div class=\"bg-ben-item-body\"><div class=\"bg-ben-item-name\">Cin\u00e9polis<\/div><div class=\"bg-ben-item-desc\">Lunes a jueves en sala tradicional (no aplica en fechas especiales)<\/div><\/div><div class=\"bg-ben-item-badge\">2\u00d71<\/div><\/div>\r\n <div class=\"bg-ben-item\"><div class=\"bg-ben-item-icon bg-purple\">\ud83c\udf7d\ufe0f<\/div><div class=\"bg-ben-item-body\"><div class=\"bg-ben-item-name\">Toulouse<\/div><div class=\"bg-ben-item-desc\">Descuento en consumo total del restaurante<\/div><\/div><div class=\"bg-ben-item-badge\">15% OFF<\/div><\/div>\r\n <div class=\"bg-ben-item\"><div class=\"bg-ben-item-icon bg-orange\">\ud83c\udf2e<\/div><div class=\"bg-ben-item-body\"><div class=\"bg-ben-item-name\">Hakapok\u00e9<\/div><div class=\"bg-ben-item-desc\">15% sin tarjeta \u00b7 20% con tarjeta Gallo Card en poke bowls<\/div><\/div><div class=\"bg-ben-item-badge\">Hasta 20%<\/div><\/div>\r\n <\/div>\r\n <div class=\"bg-ben-section-title\">En el estadio<\/div>\r\n <div class=\"bg-ben-list\">\r\n <div class=\"bg-ben-item\"><div class=\"bg-ben-item-icon bg-green\">\ud83c\udf7a<\/div><div class=\"bg-ben-item-body\"><div class=\"bg-ben-item-name\">Bruno Spumante<\/div><div class=\"bg-ben-item-desc\">10% de descuento (local o visita) en d\u00edas de partido<\/div><\/div><div class=\"bg-ben-item-badge\">10% OFF<\/div><\/div>\r\n <div class=\"bg-ben-item\"><div class=\"bg-ben-item-icon bg-green\">\ud83c\udf89<\/div><div class=\"bg-ben-item-body\"><div class=\"bg-ben-item-name\">2 cervezas gratis<\/div><div class=\"bg-ben-item-desc\">Cervezas de 210 ml con Bruno Spumante cuando juegas en casa<\/div><\/div><div class=\"bg-ben-item-badge\">GRATIS<\/div><\/div>\r\n <div class=\"bg-ben-item\"><div class=\"bg-ben-item-icon bg-blue\">\u26bd<\/div><div class=\"bg-ben-item-body\"><div class=\"bg-ben-item-name\">Quer\u00e9taro Femenil<\/div><div class=\"bg-ben-item-desc\">Acceso a todos los partidos de la liga femenina<\/div><\/div><div class=\"bg-ben-item-badge\">INCLUIDO<\/div><\/div>\r\n <\/div>\r\n <div class=\"bg-ben-footer-note\">*Beneficios sujetos a disponibilidad y verificaci\u00f3n. Vigencia: al 31 de diciembre de 2025.<\/div>\r\n <button class=\"bg-btn-primary\" id=\"btn-ben-comprar\"><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>Comprar o renovar<\/button>\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-oferta\"><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 SELECT ======= -->\r\n<div id=\"screen-select\" class=\"bg-screen\">\r\n <!-- header oculto en embed; back movido al bottom bar -->\r\n <div class=\"bg-page-header\">\r\n <span class=\"bg-page-title\">Bono Gallo<\/span>\r\n <\/div>\r\n <div class=\"bg-page-content\">\r\n <div class=\"bg-flow-tag\">TEMPORADA 2025<\/div>\r\n <h1 class=\"bg-flow-title\">\u00bfQu\u00e9 deseas hacer?<\/h1>\r\n <p class=\"bg-flow-sub\">Elige una opci\u00f3n para continuar con tu Bono Gallo.<\/p>\r\n <div class=\"bg-select-cards\">\r\n <div class=\"bg-sel-card\" id=\"card-renovar\">\r\n <div class=\"bg-sel-icon\"><svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M4 12a8 8 0 018-8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><path d=\"M20 12a8 8 0 01-8 8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><path d=\"M4 8l-1 4 4-1\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><path d=\"M20 16l1-4-4 1\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\r\n <div class=\"bg-sel-body\"><div class=\"bg-sel-title\">Renovar mi Bono Gallo<\/div><div class=\"bg-sel-desc\">Ya tengo un Bono Gallo y quiero renovarlo para esta temporada.<\/div><\/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 <div class=\"bg-sel-card\" id=\"card-nuevo\">\r\n <div class=\"bg-sel-icon\"><svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M12 8v8M8 12h8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg><\/div>\r\n <div class=\"bg-sel-body\"><div class=\"bg-sel-title\">Adquirir uno nuevo<\/div><div class=\"bg-sel-desc\">Quiero comprar uno o m\u00e1s bonos por primera vez.<\/div><\/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 <\/div>\r\n <div class=\"bg-info-note\"><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> El Bono Gallo es v\u00e1lido \u00fanicamente para eventos de la temporada vigente.<\/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-oferta\"><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 AUTH RENOVACI\u00d3N ======= -->\r\n<div id=\"screen-auth\" class=\"bg-screen\">\r\n <div class=\"bg-page-header\">\r\n <span class=\"bg-page-title\">Renovar Bono<\/span>\r\n <\/div>\r\n <div class=\"bg-flow-page-content\">\r\n <h2 class=\"bg-sec-h\">Busca tu bono<\/h2>\r\n <p class=\"bg-sec-sub\">Ingresa los datos de tu Bono Gallo actual para continuar.<\/p>\r\n <div class=\"bg-form-card\">\r\n <div class=\"bg-form-group\"><label class=\"bg-form-label\">N\u00famero de Bono Gallo<\/label><input class=\"bg-form-input\" type=\"text\" id=\"input-bono-num\" placeholder=\"Ej. BG-2024-00381\"\/><\/div>\r\n <div class=\"bg-form-group\"><label class=\"bg-form-label\">Apellido del titular<\/label><input class=\"bg-form-input\" type=\"text\" id=\"input-apellido\" placeholder=\"Ej. Almanza\"\/><\/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-select\"><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-buscar-bono\">Buscar bono<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ======= SCREEN RESUMEN RENOVACI\u00d3N ======= -->\r\n<div id=\"screen-resumen-renov\" class=\"bg-screen\">\r\n <div class=\"bg-page-header\">\r\n <span class=\"bg-page-title\">Resumen de renovaci\u00f3n<\/span>\r\n <\/div>\r\n <div class=\"bg-flow-page-content\">\r\n <div class=\"bg-found-card\"><div class=\"bg-found-lbl\">BONO ENCONTRADO<\/div><div class=\"bg-found-name\" id=\"bg-found-holder-name\">Titular Gallo Card<\/div><div class=\"bg-found-num\">BG-2024-00381<\/div><\/div>\r\n <div class=\"bg-detail-card\">\r\n <div class=\"bg-det-row\"><span class=\"bg-det-key\">Zona actual<\/span><span class=\"bg-det-val\">Platea Norte<\/span><\/div>\r\n <div class=\"bg-det-div\"><\/div>\r\n <div class=\"bg-det-row\"><span class=\"bg-det-key\">Temporada<\/span><span class=\"bg-det-val\">2025<\/span><\/div>\r\n <div class=\"bg-det-div\"><\/div>\r\n <div class=\"bg-det-row\"><span class=\"bg-det-key\">Costo de renovaci\u00f3n<\/span><span class=\"bg-det-val bg-hi\">$6,490.00<\/span><\/div>\r\n <\/div>\r\n <div class=\"bg-alert-note\"><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> Si deseas cambiar de zona, podr\u00e1s solicitarlo directamente en taquilla.<\/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-auth\"><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-renov\">Continuar a pago<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ======= SCREEN FORMULARIO NUEVO ======= -->\r\n<div id=\"screen-form-nuevo\" class=\"bg-screen\">\r\n <div class=\"bg-page-header\">\r\n <span class=\"bg-page-title\">Comprar Bono<\/span>\r\n <\/div>\r\n <div class=\"bg-flow-page-content\">\r\n <h2 class=\"bg-sec-h\">Datos del titular<\/h2>\r\n <p class=\"bg-sec-sub\">Hemos pre-llenado tus datos de Gallo Card.<\/p>\r\n <div class=\"bg-form-card\">\r\n <div class=\"bg-form-row-2\">\r\n <div class=\"bg-form-group\"><label class=\"bg-form-label\">Nombre(s)<\/label><input class=\"bg-form-input\" type=\"text\" id=\"inp-nombre\" value=\"\" placeholder=\"Nombre\"\/><\/div>\r\n <div class=\"bg-form-group\"><label class=\"bg-form-label\">Primer apellido<\/label><input class=\"bg-form-input\" type=\"text\" id=\"inp-apellido-nuevo\" value=\"\" placeholder=\"Apellido\"\/><\/div>\r\n <\/div>\r\n <div class=\"bg-form-group\"><label class=\"bg-form-label\">Segundo apellido<\/label><input class=\"bg-form-input\" type=\"text\" id=\"inp-apellido2\" value=\"\" placeholder=\"Segundo apellido (opcional)\"\/><\/div>\r\n <div class=\"bg-form-group\"><label class=\"bg-form-label\">Correo electr\u00f3nico<\/label><input class=\"bg-form-input\" type=\"email\" id=\"inp-correo\" value=\"\" placeholder=\"correo@ejemplo.com\"\/><\/div>\r\n <div class=\"bg-form-group\"><label class=\"bg-form-label\">Tel\u00e9fono<\/label><div class=\"bg-prefix-wrap\"><span class=\"bg-prefix\">\ud83c\uddf2\ud83c\uddfd +52<\/span><input class=\"bg-form-input bg-pre\" type=\"tel\" id=\"inp-tel\" value=\"\" placeholder=\"55 0000 0000\"\/><\/div><\/div>\r\n <\/div>\r\n <h2 class=\"bg-sec-h\" style=\"margin-top:4px\">Selecci\u00f3n de zona<\/h2>\r\n <p class=\"bg-sec-sub\">Fase 1 \u00b7 Precio especial<\/p>\r\n <div id=\"zona-list\">\r\n <div class=\"bg-zona-option\" data-zona=\"Platea Norte\" data-precio=\"6490\"><div class=\"bg-zona-radio\"><div class=\"bg-zona-radio-dot\"><\/div><\/div><div class=\"bg-zona-body\"><div class=\"bg-zona-name\">Platea Norte<\/div><div class=\"bg-zona-price\">$6,490.00<\/div><\/div><\/div>\r\n <div class=\"bg-zona-option\" data-zona=\"Platea Sur\" data-precio=\"6490\"><div class=\"bg-zona-radio\"><div class=\"bg-zona-radio-dot\"><\/div><\/div><div class=\"bg-zona-body\"><div class=\"bg-zona-name\">Platea Sur<\/div><div class=\"bg-zona-price\">$6,490.00<\/div><\/div><\/div>\r\n <div class=\"bg-zona-option\" data-zona=\"Zona Azul Central\" data-precio=\"5649\"><div class=\"bg-zona-radio\"><div class=\"bg-zona-radio-dot\"><\/div><\/div><div class=\"bg-zona-body\"><div class=\"bg-zona-name\">Zona Azul Central<\/div><div class=\"bg-zona-price\">$5,649.00<\/div><\/div><\/div>\r\n <div class=\"bg-zona-option\" data-zona=\"Central Poniente Alto\" data-precio=\"3549\"><div class=\"bg-zona-radio\"><div class=\"bg-zona-radio-dot\"><\/div><\/div><div class=\"bg-zona-body\"><div class=\"bg-zona-name\">Central Poniente Alto<\/div><div class=\"bg-zona-price\">$3,549.00<\/div><\/div><\/div>\r\n <div class=\"bg-zona-option\" data-zona=\"Central Oriente Bajo\" data-precio=\"3056\"><div class=\"bg-zona-radio\"><div class=\"bg-zona-radio-dot\"><\/div><\/div><div class=\"bg-zona-body\"><div class=\"bg-zona-name\">Central Oriente Bajo<\/div><div class=\"bg-zona-price\">$3,056.00<\/div><\/div><\/div>\r\n <div class=\"bg-zona-option\" data-zona=\"Cabecera Sur Baja\" data-precio=\"2896\"><div class=\"bg-zona-radio\"><div class=\"bg-zona-radio-dot\"><\/div><\/div><div class=\"bg-zona-body\"><div class=\"bg-zona-name\">Cabecera Sur Baja<\/div><div class=\"bg-zona-price\">$2,896.00<\/div><\/div><\/div>\r\n <div class=\"bg-zona-option\" data-zona=\"Central Oriente Alto\" data-precio=\"2528\"><div class=\"bg-zona-radio\"><div class=\"bg-zona-radio-dot\"><\/div><\/div><div class=\"bg-zona-body\"><div class=\"bg-zona-name\">Central Oriente Alto<\/div><div class=\"bg-zona-price\">$2,528.00<\/div><\/div><\/div>\r\n <div class=\"bg-zona-option\" data-zona=\"Corner Oriente Norte Alto\" data-precio=\"2140\"><div class=\"bg-zona-radio\"><div class=\"bg-zona-radio-dot\"><\/div><\/div><div class=\"bg-zona-body\"><div class=\"bg-zona-name\">Corner Oriente Norte Alto<\/div><div class=\"bg-zona-price\">$2,140.00<\/div><\/div><\/div>\r\n <\/div>\r\n <div class=\"bg-form-card\" style=\"margin-top:14px\">\r\n <div class=\"bg-form-group\"><label class=\"bg-form-label\">Cantidad de bonos<\/label><div class=\"bg-qty-wrap\"><button class=\"bg-qty-btn\" id=\"qty-minus\">\u2212<\/button><span class=\"bg-qty-val\" id=\"qty-display\">1<\/span><button class=\"bg-qty-btn\" id=\"qty-plus\">+<\/button><\/div><\/div>\r\n <\/div>\r\n <div class=\"bg-sum-mini\">\r\n <div class=\"bg-sum-row\"><span>Zona<\/span><span id=\"sum-zona\">\u2013<\/span><\/div>\r\n <div class=\"bg-sum-row\"><span>Cantidad<\/span><span id=\"sum-qty\">1<\/span><\/div>\r\n <div class=\"bg-sum-row bg-total\"><span>Total estimado<\/span><span id=\"sum-total\">\u2013<\/span><\/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-select\"><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-nuevo\">Continuar a pago<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ======= SCREEN PAGO (CAPTURA TARJETA) ======= -->\r\n<div id=\"screen-pago\" class=\"bg-screen\">\r\n <div class=\"bg-page-header\">\r\n <span class=\"bg-page-title\">M\u00e9todo de pago<\/span>\r\n <\/div>\r\n <div class=\"bg-flow-page-content\">\r\n <div class=\"bg-order-card\">\r\n <div class=\"bg-order-title\">RESUMEN<\/div>\r\n <div class=\"bg-order-row\"><span>Bono Gallo 2025<\/span><span id=\"pago-tipo\">\u2013<\/span><\/div>\r\n <div class=\"bg-order-row\"><span>Zona<\/span><span id=\"pago-zona\">\u2013<\/span><\/div>\r\n <div class=\"bg-order-row\"><span>Cantidad<\/span><span id=\"pago-qty\">1<\/span><\/div>\r\n <div class=\"bg-order-div\"><\/div>\r\n <div class=\"bg-order-total\"><span>Total<\/span><span id=\"pago-total\">\u2013<\/span><\/div>\r\n <\/div>\r\n <div class=\"bg-form-card\">\r\n <div class=\"bg-secure-badge\"><svg width=\"13\" height=\"13\" 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\"\/><\/svg>Pago seguro con cifrado SSL<\/div>\r\n <div class=\"bg-card-prev\">\r\n <div class=\"bg-card-prev-top\"><div class=\"bg-chip\"><\/div><div class=\"bg-card-brand\" id=\"card-brand\"><svg viewbox=\"0 0 80 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-label=\"Mastercard\">\r\n <circle cx=\"34\" cy=\"16\" r=\"11\" fill=\"white\" fill-opacity=\"0.95\"\/>\r\n <circle cx=\"46\" cy=\"16\" r=\"11\" fill=\"white\" fill-opacity=\"0.68\"\/>\r\n <path d=\"M40 7.8a11 11 0 0 0 0 16.4a11 11 0 0 0 0-16.4Z\" fill=\"white\"\/>\r\n<\/svg><\/div><\/div>\r\n <div class=\"bg-card-num-prev\" id=\"prev-num\">4152 3131 1234 5678<\/div>\r\n <div class=\"bg-card-bottom\">\r\n <div><div class=\"bg-card-lbl\">TITULAR<\/div><div class=\"bg-card-val\" id=\"prev-name\">Gallardo L.<\/div><\/div>\r\n <div><div class=\"bg-card-lbl\">VENCE<\/div><div class=\"bg-card-val\" id=\"prev-exp\">12\/27<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-form-group\"><label class=\"bg-form-label\">Nombre en tarjeta<\/label><input class=\"bg-form-input\" type=\"text\" id=\"card-name\" value=\"Gallardo L.\" placeholder=\"Como aparece en la tarjeta\" autocomplete=\"cc-name\"\/><\/div>\r\n <div class=\"bg-form-group\"><label class=\"bg-form-label\">N\u00famero de tarjeta<\/label><input class=\"bg-form-input\" type=\"text\" id=\"card-num\" value=\"4152 3131 1234 5678\" placeholder=\"0000 0000 0000 0000\" maxlength=\"19\" autocomplete=\"cc-number\"\/><\/div>\r\n <div class=\"bg-form-row-2\">\r\n <div class=\"bg-form-group\"><label class=\"bg-form-label\">Vencimiento<\/label><input class=\"bg-form-input\" type=\"text\" id=\"card-exp\" value=\"12\/27\" placeholder=\"MM\/AA\" maxlength=\"5\" autocomplete=\"cc-exp\"\/><\/div>\r\n <div class=\"bg-form-group\"><label class=\"bg-form-label\">CVV<\/label><input class=\"bg-form-input\" type=\"password\" id=\"card-cvv\" placeholder=\"\u2022\u2022\u2022\" maxlength=\"4\" autocomplete=\"cc-csc\"\/><\/div>\r\n <\/div>\r\n <div id=\"card-type-badge\" style=\"display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg-blue-light);border-radius:var(--bg-radius-sm);font-size:12px;color:var(--bg-blue);font-weight:600;\">\r\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\"><rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M2 10h20\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><\/svg>\r\n <span id=\"card-type-txt\">Opciones de meses sin intereses disponibles<\/span>\r\n <\/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\" id=\"btn-back-pago\"><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-validar-tarjeta\">Continuar<svg width=\"16\" height=\"16\" 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><\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ======= SCREEN MSI ======= -->\r\n<div id=\"screen-como-pagar\" class=\"bg-screen\">\r\n <div class=\"bg-page-header\">\r\n <span class=\"bg-page-title\">Meses sin intereses<\/span>\r\n <\/div>\r\n <div class=\"bg-flow-page-content\">\r\n <div style=\"background:var(--bg-white);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 <div style=\"width:40px;height:40px;background:linear-gradient(135deg,#1240c4,#2d7aff);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;\"><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><\/div>\r\n <div style=\"flex:1\"><div style=\"font-size:13px;font-weight:600;color:var(--bg-text)\">Mastercard Cr\u00e9dito \u00b7\u00b7\u00b7\u00b7 5678<\/div><div style=\"font-size:11px;color:var(--bg-text-3)\"><span id=\"bg-saved-card-name\">Gallardo L.<\/span> \u00b7 Vence 12\/27<\/div><\/div>\r\n <button id=\"btn-cambiar-tarjeta\" style=\"background:none !important;border:none !important;font-size:12px;color:var(--bg-blue);font-weight:600;cursor:pointer;font-family:inherit;padding:4px 8px;\">Cambiar<\/button>\r\n <\/div>\r\n <h2 class=\"bg-sec-h\" style=\"margin-bottom:4px\">\u00bfC\u00f3mo quieres pagar?<\/h2>\r\n <p style=\"font-size:13px;color:var(--bg-text-2);margin-bottom:18px;line-height:1.5\">Total: <strong id=\"cp-total-lbl\">\u2013<\/strong><\/p>\r\n <div class=\"bg-pago-modo-card\" id=\"modo-total\" data-modo=\"total\"><div class=\"bg-pago-recomendado\">Sin intereses<\/div><div class=\"bg-pago-modo-label\">Pago de contado<\/div><div class=\"bg-pago-modo-amount\" id=\"modo-total-amt\">\u2013<\/div><div class=\"bg-pago-modo-desc\">Pagas el total hoy. Sin cargos adicionales.<\/div><div class=\"bg-pago-modo-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><\/div>\r\n <div class=\"bg-pago-modo-card\" id=\"modo-3msi\" data-modo=\"3msi\"><div class=\"bg-pago-modo-label\">3 meses sin intereses<\/div><div class=\"bg-pago-modo-amount\" id=\"modo-3msi-amt\">\u2013<\/div><div class=\"bg-pago-modo-desc\">3 pagos iguales sin cargo adicional.<\/div><div class=\"bg-msi-chips\"><div class=\"bg-msi-chip\">VISA<\/div><div class=\"bg-msi-chip\">Mastercard<\/div><div class=\"bg-msi-chip\">AMEX<\/div><\/div><div class=\"bg-pago-modo-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><\/div>\r\n <div class=\"bg-pago-modo-card\" id=\"modo-6msi\" data-modo=\"6msi\"><div class=\"bg-pago-modo-label\">6 meses sin intereses<\/div><div class=\"bg-pago-modo-amount\" id=\"modo-6msi-amt\">\u2013<\/div><div class=\"bg-pago-modo-desc\">6 pagos iguales sin cargo adicional.<\/div><div class=\"bg-msi-chips\"><div class=\"bg-msi-chip\">VISA<\/div><div class=\"bg-msi-chip\">Mastercard<\/div><div class=\"bg-msi-chip\">AMEX<\/div><\/div><div class=\"bg-pago-modo-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><\/div>\r\n <div class=\"bg-pago-modo-card\" id=\"modo-9m\" data-modo=\"9m\"><div class=\"bg-pago-modo-label\">9 meses con financiamiento<\/div><div class=\"bg-pago-modo-amount\" id=\"modo-9m-amt\">\u2013<\/div><div class=\"bg-pago-modo-desc\">El saldo restante genera intereses ordinarios.<\/div><div class=\"bg-msi-chips\"><div class=\"bg-msi-chip bg-disabled\">Con financiamiento<\/div><\/div><div class=\"bg-pago-modo-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><\/div>\r\n <div class=\"bg-pago-modo-card\" id=\"modo-12m\" data-modo=\"12m\"><div class=\"bg-pago-modo-label\">12 meses con financiamiento<\/div><div class=\"bg-pago-modo-amount\" id=\"modo-12m-amt\">\u2013<\/div><div class=\"bg-pago-modo-desc\">El saldo restante genera intereses ordinarios.<\/div><div class=\"bg-msi-chips\"><div class=\"bg-msi-chip bg-disabled\">Con financiamiento<\/div><\/div><div class=\"bg-pago-modo-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><\/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-como-pagar\"><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-pago\">Confirmar pago<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ======= SCREEN CONFIRMACI\u00d3N ======= -->\r\n<div id=\"screen-confirm\" class=\"bg-screen\">\r\n <div class=\"bg-page-header\"><span class=\"bg-page-title\" style=\"width:100%;text-align:center;\">Confirmaci\u00f3n<\/span><\/div>\r\n <div class=\"bg-flow-page-content bg-confirm-wrap\" style=\"padding-top:32px\">\r\n <div class=\"bg-confirm-icon\"><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><\/div>\r\n <h1 class=\"bg-confirm-title\">\u00a1Felicidades, ya eres parte de la nueva era Gallo!\r\n <p class=\"bg-confirm-text\">Recibir\u00e1s un correo con tu confirmaci\u00f3n. Pres\u00e9ntala en taquilla para recoger tu bono f\u00edsico.<\/p>\r\n <div class=\"bg-folio-card\"><div class=\"bg-folio-lbl\">FOLIO DE OPERACI\u00d3N<\/div><div class=\"bg-folio-num\" id=\"folio-num\">BG-2025-748312<\/div><\/div>\r\n <div class=\"bg-conf-summary\">\r\n <div class=\"bg-conf-row\"><span>Concepto<\/span><span>Bono Gallo 2025<\/span><\/div>\r\n <div class=\"bg-conf-row\"><span>Tipo<\/span><span id=\"conf-tipo\">\u2013<\/span><\/div>\r\n <div class=\"bg-conf-row\"><span>Zona<\/span><span id=\"conf-zona\">\u2013<\/span><\/div>\r\n <div class=\"bg-conf-row\"><span>Cantidad<\/span><span id=\"conf-qty\">1<\/span><\/div>\r\n <div class=\"bg-conf-row\"><span>Plan de pago<\/span><span id=\"conf-plan\">\u2013<\/span><\/div>\r\n <div class=\"bg-conf-div\"><\/div>\r\n <div class=\"bg-conf-total\"><span>Total pagado<\/span><span id=\"conf-total\">\u2013<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-flow-cta-bar\"><button class=\"bg-btn-primary\" id=\"btn-inicio\">Volver al inicio<\/button><\/div>\r\n<\/div>\r\n\r\n\r\n<!-- ======= SOPORTE BONO GALLO GLOBAL ======= -->\r\n<button class=\"bg-support-fab\" type=\"button\" id=\"bg-support-fab\" aria-label=\"Abrir soporte Bono Gallo\">\r\n <svg viewbox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M21 15a4 4 0 01-4 4H8l-5 3V7a4 4 0 014-4h10a4 4 0 014 4v8z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\"\/><path d=\"M8 9h8M8 13h5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n Ayuda\r\n<\/button>\r\n\r\n<div class=\"bg-support-overlay\" id=\"bg-support-overlay\" aria-hidden=\"true\"><\/div>\r\n\r\n<div class=\"bg-support-sheet\" id=\"bg-support-sheet\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"bg-support-title\" aria-hidden=\"true\">\r\n <div class=\"bg-support-handle\"><\/div>\r\n <div class=\"bg-support-head\">\r\n <div>\r\n <div class=\"bg-support-kicker\">Soporte Bono Gallo<\/div>\r\n <h2 class=\"bg-support-title\" id=\"bg-support-title\">\u00bfNecesitas ayuda?<\/h2>\r\n <p class=\"bg-support-copy\">Podemos ayudarte por WhatsApp o solicitar que te llamen al n\u00famero con el que est\u00e1s registrado en Gallo Card.<\/p>\r\n <\/div>\r\n <button class=\"bg-support-close\" type=\"button\" id=\"bg-support-close\" aria-label=\"Cerrar soporte\">\r\n <svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"bg-support-actions\">\r\n <button class=\"bg-support-action bg-support-wa\" type=\"button\" id=\"bg-support-whatsapp\">\r\n <svg viewbox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M20.5 11.8a8.5 8.5 0 01-12.54 7.48L3 20.5l1.3-4.82A8.5 8.5 0 1120.5 11.8z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><path d=\"M9.1 8.4c.2-.45.4-.47.68-.47h.5c.18 0 .42.03.64.48.25.5.82 1.98.9 2.12.07.15.12.33.02.53-.1.2-.16.32-.32.5-.16.18-.34.4-.48.53-.16.16-.32.34-.14.66.18.32.8 1.32 1.72 2.14 1.18 1.05 2.18 1.38 2.5 1.54.32.16.5.14.68-.08.2-.22.78-.9.98-1.2.2-.3.42-.25.7-.15.28.1 1.82.86 2.14 1.02.32.16.52.24.6.38.08.14.08.82-.2 1.6\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n Pedir ayuda por WhatsApp\r\n <\/button>\r\n\r\n <button class=\"bg-support-action bg-support-call\" type=\"button\" id=\"bg-support-callback\">\r\n <svg viewbox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M22 16.92v2.1a2 2 0 01-2.18 2 19.8 19.8 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.8 19.8 0 012.12 3.18 2 2 0 014.11 1h2.1a2 2 0 012 1.72c.12.9.33 1.78.64 2.62a2 2 0 01-.45 2.11L7.5 8.35a16 16 0 006.15 6.15l.9-.9a2 2 0 012.11-.45c.84.31 1.72.52 2.62.64A2 2 0 0122 16.92z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg>\r\n Quiero que me llamen\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"bg-support-status\" id=\"bg-support-status\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n;(function(){\r\n'use strict';\r\n\r\n\/* SOPORTE BONO GALLO\r\n Cuando te pasen los servicios reales, solo cambia estos valores:\r\n - whatsappPhone: n\u00famero con lada pa\u00eds, sin + ni espacios. Ej. 5214420000000\r\n - callbackEndpoint: endpoint del bot para solicitar llamada\r\n*\/\r\nvar BG_SUPPORT_CONFIG = {\r\n \/* N\u00famero de soporte para WhatsApp.\r\n OJO: el tel\u00e9fono de la URL es del usuario, no lo uso como destinatario de WhatsApp. *\/\r\n whatsappPhone: '525599904908',\r\n whatsappMessage: 'Hola, necesito informaci\u00f3n sobre Bono Gallo. \u00bfMe pueden apoyar?',\r\n callbackEndpoint: 'https:\/\/b938d655f35ceca6aa256b3f9e7251.0b.environment.api.powerplatform.com:443\/powerautomate\/automations\/direct\/workflows\/17e70439b188427db8eee145b40ba05c\/triggers\/manual\/paths\/invoke?api-version=1&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=UpLKN_OXt6Uco7bNNgTy8ldJ07bE-PlezSF2c4iJHXA',\r\n callbackDemoMode: false\r\n};\r\n\r\nfunction getActiveScreenId(){\r\n var active = document.querySelector('.bg-screen.bg-active');\r\n return active ? active.id : '';\r\n}\r\nfunction getQueryValue(keys){\r\n var raw = '';\r\n try {\r\n raw = (window.location.search || '').replace(\/&\/g, '&');\r\n if(!raw && window.location.href.indexOf('?') > -1){\r\n raw = '?' + window.location.href.split('?').slice(1).join('?').split('#')[0];\r\n raw = raw.replace(\/&\/g, '&');\r\n }\r\n } catch(e) {\r\n raw = window.location.search || '';\r\n }\r\n\r\n var params = new URLSearchParams(raw.charAt(0) === '?' ? raw.slice(1) : raw);\r\n var wanted = keys.map(function(k){ return String(k).toLowerCase(); });\r\n\r\n var found = '';\r\n params.forEach(function(value, key){\r\n var cleanKey = String(key).replace(\/^amp;\/i, '').toLowerCase();\r\n if(!found && wanted.indexOf(cleanKey) > -1) found = value;\r\n });\r\n\r\n return (found || '').replace(\/\\+\/g, ' ').trim();\r\n}\r\n\r\nfunction getUrlSupportParams(){\r\n return {\r\n telefono: getQueryValue(['telefono','tel','phone']).replace(\/\\D\/g,''),\r\n nombre: getQueryValue(['nombre','name','fullName','fullname','usuario']),\r\n apellido: getQueryValue(['apellido','primerApellido','apellidopaterno','lastName','lastname']),\r\n apellido2: getQueryValue(['apellido2','segundoApellido','apellidomaterno','secondLastName','secondlastname']),\r\n correo: getQueryValue(['correo','email','mail'])\r\n };\r\n}\r\n\r\nfunction splitFullName(fullName){\r\n var parts = String(fullName || '').trim().split(\/\\s+\/).filter(Boolean);\r\n if(parts.length === 0) return { nombre:'', apellido:'', apellido2:'' };\r\n if(parts.length === 1) return { nombre:parts[0], apellido:'', apellido2:'' };\r\n if(parts.length === 2) return { nombre:parts[0], apellido:parts[1], apellido2:'' };\r\n return {\r\n nombre: parts.slice(0, -2).join(' '),\r\n apellido: parts[parts.length - 2],\r\n apellido2: parts[parts.length - 1]\r\n };\r\n}\r\n\r\nfunction hasUrlUserData(data){\r\n return !!(data.telefono || data.nombre || data.apellido || data.apellido2 || data.correo);\r\n}\r\n\r\nfunction applyUrlUserData(){\r\n var data = getUrlSupportParams();\r\n var hasParams = hasUrlUserData(data);\r\n\r\n \/* Fallback demo: solo se usa cuando la URL NO trae ning\u00fan dato de usuario. *\/\r\n if(!hasParams){\r\n data = {\r\n nombre: 'Gallardo',\r\n apellido: 'L.',\r\n apellido2: '',\r\n correo: 'gallardo@gallocard.mx',\r\n telefono: '5500000000'\r\n };\r\n }\r\n\r\n var split = splitFullName(data.nombre);\r\n var finalName = split.nombre || data.nombre || '';\r\n var finalLast = data.apellido || split.apellido || '';\r\n var finalLast2 = data.apellido2 || split.apellido2 || '';\r\n var fullName = (finalName + ' ' + finalLast + ' ' + finalLast2).replace(\/\\s+\/g, ' ').trim();\r\n var cardholderName = fullName || '';\r\n\r\n var nameInput = document.getElementById('inp-nombre');\r\n var lastInput = document.getElementById('inp-apellido-nuevo');\r\n var last2Input = document.getElementById('inp-apellido2');\r\n var mailInput = document.getElementById('inp-correo');\r\n var phoneInput = document.getElementById('inp-tel');\r\n var cardName = document.getElementById('card-name');\r\n var prevName = document.getElementById('prev-name');\r\n var foundName = document.getElementById('bg-found-holder-name');\r\n var savedCardName = document.getElementById('bg-saved-card-name');\r\n\r\n \/* Siempre limpiamos primero.\r\n - Sin par\u00e1metros: rellenamos todo con Gallardo.\r\n - Con par\u00e1metros: solo rellenamos lo que venga en la URL; lo dem\u00e1s queda vac\u00edo. *\/\r\n if(nameInput) nameInput.value = '';\r\n if(lastInput) lastInput.value = '';\r\n if(last2Input) last2Input.value = '';\r\n if(mailInput) mailInput.value = '';\r\n if(phoneInput) phoneInput.value = '';\r\n if(cardName) cardName.value = '';\r\n if(prevName) prevName.textContent = '';\r\n if(foundName) foundName.textContent = '';\r\n if(savedCardName) savedCardName.textContent = '';\r\n\r\n if(finalName && nameInput) nameInput.value = finalName;\r\n if(finalLast && lastInput) lastInput.value = finalLast;\r\n if(finalLast2 && last2Input) last2Input.value = finalLast2;\r\n if(data.correo && mailInput) mailInput.value = data.correo;\r\n if(data.telefono && phoneInput) phoneInput.value = data.telefono;\r\n\r\n if(cardholderName){\r\n if(cardName) cardName.value = cardholderName;\r\n if(prevName) prevName.textContent = cardholderName;\r\n if(foundName) foundName.textContent = cardholderName;\r\n if(savedCardName) savedCardName.textContent = cardholderName;\r\n }\r\n}\r\nfunction getSupportPhone(){\r\n var fromUrl = getUrlSupportParams().telefono;\r\n if(fromUrl) return fromUrl;\r\n var phoneInput = document.getElementById('inp-tel');\r\n var raw = phoneInput && phoneInput.value ? phoneInput.value : '';\r\n return raw.replace(\/\\D\/g,'');\r\n}\r\n\r\nfunction getSupportName(){\r\n var fromUrl = getUrlSupportParams().nombre;\r\n if(fromUrl) return fromUrl;\r\n var nameInput = document.getElementById('inp-nombre');\r\n var lastInput = document.getElementById('inp-apellido-nuevo');\r\n var last2Input = document.getElementById('inp-apellido2');\r\n var name = nameInput && nameInput.value ? nameInput.value.trim() : '';\r\n var last = lastInput && lastInput.value ? lastInput.value.trim() : '';\r\n var last2 = last2Input && last2Input.value ? last2Input.value.trim() : '';\r\n return (name + ' ' + last + ' ' + last2).replace(\/\\s+\/g, ' ').trim();\r\n}\r\n\r\napplyUrlUserData();\r\nfunction openSupportSheet(){\r\n var sheet = document.getElementById('bg-support-sheet');\r\n var overlay = document.getElementById('bg-support-overlay');\r\n var status = document.getElementById('bg-support-status');\r\n if(status){ status.classList.remove('bg-show'); status.textContent = ''; }\r\n if(sheet){ sheet.classList.add('bg-open'); sheet.setAttribute('aria-hidden','false'); }\r\n if(overlay){ overlay.classList.add('bg-open'); overlay.setAttribute('aria-hidden','false'); }\r\n}\r\nfunction closeSupportSheet(){\r\n var sheet = document.getElementById('bg-support-sheet');\r\n var overlay = document.getElementById('bg-support-overlay');\r\n if(sheet){ sheet.classList.remove('bg-open'); sheet.setAttribute('aria-hidden','true'); }\r\n if(overlay){ overlay.classList.remove('bg-open'); overlay.setAttribute('aria-hidden','true'); }\r\n}\r\nfunction setSupportStatus(message, isError){\r\n var status = document.getElementById('bg-support-status');\r\n if(!status) return;\r\n status.textContent = message;\r\n status.classList.add('bg-show');\r\n status.style.background = isError ? '#fff4ed' : 'var(--bg-green-bg)';\r\n status.style.borderColor = isError ? '#ffd8bf' : 'rgba(23,179,98,.18)';\r\n status.style.color = isError ? '#8a3a00' : '#126b3f';\r\n}\r\nfunction openSupportWhatsApp(){\r\n var msg = BG_SUPPORT_CONFIG.whatsappMessage;\r\n var supportPhone = (BG_SUPPORT_CONFIG.whatsappPhone || '').replace(\/\\D\/g,'');\r\n var url = supportPhone\r\n ? 'https:\/\/wa.me\/' + supportPhone + '?text=' + encodeURIComponent(msg)\r\n : 'https:\/\/wa.me\/?text=' + encodeURIComponent(msg);\r\n window.open(url, '_blank', 'noopener,noreferrer');\r\n}\r\nfunction requestSupportCallback(){\r\n var btn = document.getElementById('bg-support-callback');\r\n var phone = getSupportPhone();\r\n\r\n if(!phone){\r\n setSupportStatus('No encontramos el tel\u00e9fono en el enlace. Abre el demo con ?telefono=5530434138 o usa WhatsApp.', true);\r\n return;\r\n }\r\n\r\n var payload = { telefono: phone };\r\n\r\n if(btn){ btn.disabled = true; btn.textContent = 'Solicitando llamada\u2026'; }\r\n\r\n fetch(BG_SUPPORT_CONFIG.callbackEndpoint, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify(payload)\r\n })\r\n .then(function(res){\r\n if(!res.ok) throw new Error('callback_error');\r\n setSupportStatus('Listo. Solicitamos que te llamen al n\u00famero terminado en ' + phone.slice(-4) + '.', false);\r\n })\r\n .catch(function(){\r\n setSupportStatus('No pudimos solicitar la llamada en este momento. Si falla desde el navegador, puede ser tema de CORS del servicio. Intenta por WhatsApp.', true);\r\n })\r\n .finally(function(){\r\n if(btn){ btn.disabled = false; btn.innerHTML = '<svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M22 16.92v2.1a2 2 0 01-2.18 2 19.8 19.8 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.8 19.8 0 012.12 3.18 2 2 0 014.11 1h2.1a2 2 0 012 1.72c.12.9.33 1.78.64 2.62a2 2 0 01-.45 2.11L7.5 8.35a16 16 0 006.15 6.15l.9-.9a2 2 0 012.11-.45c.84.31 1.72.52 2.62.64A2 2 0 0122 16.92z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg>Quiero que me llamen'; }\r\n });\r\n}\r\n\r\nvar supportFab = document.getElementById('bg-support-fab');\r\nvar supportOverlay = document.getElementById('bg-support-overlay');\r\nvar supportClose = document.getElementById('bg-support-close');\r\nvar supportWhatsApp = document.getElementById('bg-support-whatsapp');\r\nvar supportCallback = document.getElementById('bg-support-callback');\r\n\r\nfunction handleSupportFabTap(e){\r\n if(e){\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n openSupportSheet();\r\n}\r\nfunction bindSupportTap(el, handler){\r\n if(!el) return;\r\n el.addEventListener('click', handler, false);\r\n el.addEventListener('pointerup', handler, false);\r\n el.addEventListener('touchend', handler, { passive:false });\r\n}\r\nbindSupportTap(supportFab, handleSupportFabTap);\r\nif(supportOverlay) supportOverlay.addEventListener('click', closeSupportSheet);\r\nif(supportClose) supportClose.addEventListener('click', closeSupportSheet);\r\nif(supportWhatsApp) supportWhatsApp.addEventListener('click', openSupportWhatsApp);\r\nif(supportCallback) supportCallback.addEventListener('click', requestSupportCallback);\r\ndocument.addEventListener('keydown', function(e){ if(e.key === 'Escape') closeSupportSheet(); });\r\n\r\n\r\nvar state={flow:null,zona:'',cantidad:1,total:0,precio:0,modo:null};\r\nvar qty=1;\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\/* Maneja back buttons: los originales con .bg-btn-back y los nuevos .bg-btn-back-em *\/\r\ndocument.querySelectorAll('.bg-btn-back[data-target],.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\/* IMAGE UPLOAD *\/\r\nfunction applyImage(file){\r\n if(!file)return;\r\n var reader=new FileReader();\r\n reader.onload=function(e){\r\n var img=document.getElementById('oferta-img');\r\n document.getElementById('upload-zone').style.display='none';\r\n img.src=e.target.result;img.style.display='block';\r\n document.getElementById('change-img-btn').style.display='block';\r\n };\r\n reader.readAsDataURL(file);\r\n}\r\ndocument.getElementById('img-file-input').addEventListener('change',function(){applyImage(this.files[0])});\r\ndocument.getElementById('change-img-btn').addEventListener('click',function(){document.getElementById('img-file-input-2').click()});\r\ndocument.getElementById('img-file-input-2').addEventListener('change',function(){applyImage(this.files[0])});\r\n\r\n\/* OFERTA *\/\r\ndocument.getElementById('btn-oferta-cta').addEventListener('click',function(){show('screen-select')});\r\ndocument.getElementById('btn-ver-beneficios').addEventListener('click',function(){show('screen-beneficios')});\r\ndocument.getElementById('btn-ben-comprar').addEventListener('click',function(){show('screen-select')});\r\n\r\n\/* SELECT *\/\r\nfunction highlight(id){\r\n document.querySelectorAll('.bg-sel-card').forEach(function(c){c.classList.remove('bg-selected')});\r\n document.getElementById(id).classList.add('bg-selected');\r\n}\r\ndocument.getElementById('card-renovar').addEventListener('click',function(){\r\n state.flow='renovacion';highlight('card-renovar');\r\n setTimeout(function(){show('screen-auth')},150);\r\n});\r\ndocument.getElementById('card-nuevo').addEventListener('click',function(){\r\n state.flow='nuevo';highlight('card-nuevo');\r\n setTimeout(function(){show('screen-form-nuevo')},150);\r\n});\r\n\r\n\/* RENOVACI\u00d3N *\/\r\ndocument.getElementById('btn-buscar-bono').addEventListener('click',function(){\r\n var n=document.getElementById('input-bono-num').value.trim();\r\n var a=document.getElementById('input-apellido').value.trim();\r\n if(!n){shake('input-bono-num');return}\r\n if(!a){shake('input-apellido');return}\r\n state.zona='Platea Norte';state.precio=6490;state.cantidad=1;state.total=6490;\r\n show('screen-resumen-renov');\r\n});\r\ndocument.getElementById('btn-continuar-renov').addEventListener('click',function(){\r\n fillPagoSummary();show('screen-pago');\r\n});\r\n\r\n\/* ZONA *\/\r\ndocument.querySelectorAll('.bg-zona-option').forEach(function(opt){\r\n opt.addEventListener('click',function(){\r\n document.querySelectorAll('.bg-zona-option').forEach(function(o){o.classList.remove('bg-selected')});\r\n opt.classList.add('bg-selected');\r\n state.zona=opt.dataset.zona;\r\n state.precio=parseInt(opt.dataset.precio);\r\n recalc();\r\n });\r\n});\r\n\r\n\/* QTY *\/\r\ndocument.getElementById('qty-minus').addEventListener('click',function(){if(qty>1){qty--;updQty()}});\r\ndocument.getElementById('qty-plus').addEventListener('click',function(){if(qty<10){qty++;updQty()}});\r\nfunction updQty(){document.getElementById('qty-display').textContent=qty;state.cantidad=qty;recalc()}\r\nfunction recalc(){\r\n state.total=state.precio*qty;\r\n document.getElementById('sum-zona').textContent=state.zona||'\u2013';\r\n document.getElementById('sum-qty').textContent=qty;\r\n document.getElementById('sum-total').textContent=state.zona?fmt(state.total):'\u2013';\r\n}\r\n\r\n\/* CONTINUAR NUEVO *\/\r\ndocument.getElementById('btn-continuar-nuevo').addEventListener('click',function(){\r\n if(!document.getElementById('inp-nombre').value.trim()){shake('inp-nombre');return}\r\n if(!document.getElementById('inp-apellido-nuevo').value.trim()){shake('inp-apellido-nuevo');return}\r\n if(!document.getElementById('inp-correo').value.trim()){shake('inp-correo');return}\r\n if(!state.zona){var first=document.querySelector('.bg-zona-option');if(first)first.click();else return;}\r\n state.cantidad=qty;state.total=state.precio*qty;\r\n fillPagoSummary();show('screen-pago');\r\n});\r\n\r\n\/* PAGO SUMMARY *\/\r\nfunction fillPagoSummary(){\r\n document.getElementById('pago-tipo').textContent=state.flow==='renovacion'?'Renovaci\u00f3n':'Compra nueva';\r\n document.getElementById('pago-zona').textContent=state.zona||'\u2013';\r\n document.getElementById('pago-qty').textContent=state.cantidad;\r\n document.getElementById('pago-total').textContent=fmt(state.total);\r\n}\r\n\r\nfunction getCardBrandMarkup(type){\r\n if(type === 'mastercard') return `<svg viewBox=\"0 0 80 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-label=\"Mastercard\">\r\n <circle cx=\"34\" cy=\"16\" r=\"11\" fill=\"white\" fill-opacity=\"0.95\"\/>\r\n <circle cx=\"46\" cy=\"16\" r=\"11\" fill=\"white\" fill-opacity=\"0.68\"\/>\r\n <path d=\"M40 7.8a11 11 0 0 0 0 16.4a11 11 0 0 0 0-16.4Z\" fill=\"white\"\/>\r\n<\/svg>`;\r\n if(type === 'amex') return '<span class=\"bg-card-brand-text\">AMEX<\/span>';\r\n return '<span class=\"bg-card-brand-text\">CARD<\/span>';\r\n}\r\n\r\n\/* CARD PREVIEW *\/\r\ndocument.getElementById('card-num').addEventListener('input',function(){\r\n var v=this.value.replace(\/\\D\/g,'').substring(0,16);\r\n this.value=v.replace(\/(.{4})\/g,'$1 ').trim();\r\n var p=v.padEnd(16,'\u2022').replace(\/(.{4})\/g,'$1 ').trim();\r\n document.getElementById('prev-num').textContent=p||'\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022';\r\n var brand=document.getElementById('card-brand');\r\n if(v[0]==='4')brand.innerHTML=getCardBrandMarkup('mastercard');\r\n else if(v[0]==='5')brand.innerHTML=getCardBrandMarkup('mastercard');\r\n else if(v[0]==='3')brand.innerHTML=getCardBrandMarkup('amex');\r\n else brand.innerHTML=getCardBrandMarkup('card');\r\n var badge=document.getElementById('card-type-badge');\r\n var txt=document.getElementById('card-type-txt');\r\n if(v[0]==='4'||v[0]==='5'||v[0]==='3'){\r\n badge.style.background='var(--bg-blue-light)';badge.style.color='var(--bg-blue)';\r\n txt.textContent='Tarjeta de cr\u00e9dito \u2014 ver\u00e1s opciones de meses sin intereses en el siguiente paso';\r\n }else if(v.length>0){\r\n badge.style.background='#f8f9fb';badge.style.color='var(--bg-text-3)';\r\n txt.textContent='Tarjeta de d\u00e9bito \u2014 pago de contado';\r\n }else{\r\n badge.style.background='var(--bg-blue-light)';badge.style.color='var(--bg-blue)';\r\n txt.textContent='Tarjeta de cr\u00e9dito detectada \u2014 ver\u00e1s opciones de meses sin intereses en el siguiente paso';\r\n }\r\n});\r\ndocument.getElementById('card-name').addEventListener('input',function(){\r\n document.getElementById('prev-name').textContent=this.value||'';\r\n});\r\ndocument.getElementById('card-exp').addEventListener('input',function(){\r\n var v=this.value.replace(\/\\D\/g,'').substring(0,4);\r\n if(v.length>=3)v=v.substring(0,2)+'\/'+v.substring(2);\r\n this.value=v;\r\n document.getElementById('prev-exp').textContent=v||'MM\/AA';\r\n});\r\n\r\n\/* BACK PAGO \u2014 l\u00f3gica por state.flow *\/\r\ndocument.getElementById('btn-back-pago').addEventListener('click',function(){\r\n show(state.flow==='renovacion'?'screen-resumen-renov':'screen-form-nuevo');\r\n});\r\n\r\n\/* VALIDAR TARJETA \u2192 MSI *\/\r\ndocument.getElementById('btn-validar-tarjeta').addEventListener('click',function(){\r\n if(!document.getElementById('card-name').value.trim()){shake('card-name');return}\r\n if(document.getElementById('card-num').value.replace(\/\\s\/g,'').length<16){shake('card-num');return}\r\n if(document.getElementById('card-exp').value.length<5){shake('card-exp');return}\r\n if(document.getElementById('card-cvv').value.length<3){shake('card-cvv');return}\r\n var btn=this;btn.textContent='Validando\u2026';btn.disabled=true;\r\n setTimeout(function(){\r\n btn.textContent='Continuar';btn.disabled=false;\r\n fillMSIScreen();show('screen-como-pagar');\r\n },300);\r\n});\r\n\r\n\/* MSI *\/\r\nfunction fillMSIScreen(){\r\n var t=state.total;\r\n document.getElementById('cp-total-lbl').textContent=fmt(t);\r\n document.getElementById('modo-total-amt').textContent=fmt(t);\r\n document.getElementById('modo-3msi-amt').textContent=fmt(Math.ceil(t\/3))+'\/mes';\r\n document.getElementById('modo-6msi-amt').textContent=fmt(Math.ceil(t\/6))+'\/mes';\r\n document.getElementById('modo-9m-amt').textContent=fmt(Math.ceil(t\/9))+'\/mes';\r\n document.getElementById('modo-12m-amt').textContent=fmt(Math.ceil(t\/12))+'\/mes';\r\n document.querySelectorAll('.bg-pago-modo-card').forEach(function(c){c.classList.remove('bg-selected')});\r\n state.modo=null;\r\n}\r\ndocument.querySelectorAll('.bg-pago-modo-card').forEach(function(card){\r\n card.addEventListener('click',function(){\r\n document.querySelectorAll('.bg-pago-modo-card').forEach(function(c){c.classList.remove('bg-selected')});\r\n card.classList.add('bg-selected');\r\n state.modo=card.dataset.modo;\r\n });\r\n});\r\ndocument.getElementById('btn-back-como-pagar').addEventListener('click',function(){show('screen-pago')});\r\ndocument.getElementById('btn-cambiar-tarjeta').addEventListener('click',function(){show('screen-pago')});\r\n\r\n\/* CONFIRMAR *\/\r\nfunction modoLabel(m){\r\n if(m==='total')return 'Pago de contado';\r\n if(m==='3msi')return '3 meses sin intereses';\r\n if(m==='6msi')return '6 meses sin intereses';\r\n if(m==='9m')return '9 meses con financiamiento';\r\n if(m==='12m')return '12 meses con financiamiento';\r\n return '\u2013';\r\n}\r\ndocument.getElementById('btn-confirmar-pago').addEventListener('click',function(){\r\n if(!state.modo){var first=document.querySelector('.bg-pago-modo-card');if(first){first.click();}else{return;}}\r\n var btn=this;btn.textContent='Procesando pago\u2026';btn.disabled=true;\r\n setTimeout(function(){\r\n fillConfirm();show('screen-confirm');\r\n btn.textContent='Confirmar pago';btn.disabled=false;\r\n },400);\r\n});\r\n\r\nfunction fillConfirm(){\r\n var folio='BG-2025-'+Math.floor(700000+Math.random()*99999);\r\n document.getElementById('folio-num').textContent=folio;\r\n document.getElementById('conf-tipo').textContent=state.flow==='renovacion'?'Renovaci\u00f3n':'Compra nueva';\r\n document.getElementById('conf-zona').textContent=state.zona||'\u2013';\r\n document.getElementById('conf-qty').textContent=state.cantidad;\r\n document.getElementById('conf-plan').textContent=modoLabel(state.modo);\r\n document.getElementById('conf-total').textContent=fmt(state.total);\r\n}\r\ndocument.getElementById('btn-inicio').addEventListener('click',function(){reset();show('screen-oferta')});\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');setTimeout(function(){el.classList.remove('bg-shake')},500);\r\n}\r\nfunction reset(){\r\n state={flow:null,zona:'',cantidad:1,total:0,precio:0,modo:null};qty=1;\r\n ['input-bono-num','input-apellido','card-num','card-exp','card-cvv','inp-nombre','inp-apellido-nuevo','inp-apellido2','inp-correo','inp-tel','card-name'].forEach(function(id){\r\n var el=document.getElementById(id);if(el)el.value='';\r\n });\r\n document.getElementById('card-num').value='4152 3131 1234 5678';\r\n document.getElementById('card-exp').value='12\/27';\r\n document.getElementById('qty-display').textContent='1';\r\n document.getElementById('prev-num').textContent='4152 3131 1234 5678';\r\n document.getElementById('prev-name').textContent='TITULAR';\r\n document.getElementById('prev-exp').textContent='12\/27';\r\n document.getElementById('card-brand').textContent='Mastercard';\r\n var foundName=document.getElementById('bg-found-holder-name'); if(foundName) foundName.textContent='Titular Gallo Card';\r\n var savedCardName=document.getElementById('bg-saved-card-name'); if(savedCardName) savedCardName.textContent='Titular Gallo Card';\r\n document.getElementById('sum-zona').textContent='\u2013';\r\n document.getElementById('sum-qty').textContent='1';\r\n document.getElementById('sum-total').textContent='\u2013';\r\n document.querySelectorAll('.bg-sel-card,.bg-zona-option,.bg-pago-modo-card').forEach(function(c){c.classList.remove('bg-selected')});\r\n applyUrlUserData();\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>Bono Gallo \u2013 Gallo Card \u270e Cambiar foto Gallo Card \u00b7 Exclusivo para socios BONO GALLO Acceso preferencial Todos los partidos Descuentos exclusivos Comprar o renovar Conoce los beneficios Beneficios Bono Gallo CON BONO GALLO TAMBI\u00c9N TIENES LOSBENEFICIOS Acceso a descuentos y experiencias exclusivas para socios de la temporada 2025. GALLO CARD 3 y 6 […]<\/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-2530","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/pages\/2530","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=2530"}],"version-history":[{"count":70,"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/pages\/2530\/revisions"}],"predecessor-version":[{"id":2793,"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/pages\/2530\/revisions\/2793"}],"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=2530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}