@khipu/design-system 0.1.0-alpha.50 → 0.1.0-alpha.52

package/dist/beercss/khipu-beercss.css

@@ -11,7 +11,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-04-27T13:24:37.477Z
+ * Generated: 2026-04-28T15:56:42.052Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -66,7 +66,7 @@
   --kds-color-background-default: #FFFFFF;
   --kds-color-background-paper: #FFFFFF;
   --kds-color-background-elevated: #FAFAFA;
-  --kds-color-background-muted: #F5F5F5;
+  --kds-color-background-muted: #F4F4F7;
 
   /* Action colors */
   --kds-color-action-active: rgba(0, 0, 0, 0.56);
@@ -650,7 +650,7 @@ body.dark {
     --kds-color-hover-bg: #FAFAFA;        /* Ultra-subtle hover background for rows */
 
     /* Layout colors */
-    --kds-color-shell: #F5F5F5;           /* Neutral page background */
+    --kds-color-shell: #F4F4F7;           /* Neutral page background */
 
     /* Card specific */
     --kds-radius-card: 14px;              /* Payment card radius (between lg and xl) */
@@ -4758,6 +4758,12 @@ dialog#surveyModal button.circle {
     font-size: var(--kds-font-size-sm);
 }
 
+/* Inside a card: push to bottom with auto margin, subtle top spacing */
+.kds-secure-footer.inside {
+    margin-top: auto;
+    padding-top: var(--kds-spacing-3);
+}
+
 .kds-secure-footer-code {
     color: var(--kds-color-text-hint);
 }
@@ -5174,64 +5180,157 @@ dialog#surveyModal button.circle {
    ======================================== */
 
 /* -- Sticky Invoice Card (.kds-invoice-sticky) -- */
-/* Collapses detail rows on scroll via .collapsed class (JS toggle) */
+/* MOBILE ONLY: Progressive scroll-linked collapse (0-150px) via --collapse-progress CSS variable */
+/* Desktop: Mantiene cajitas normales sin sticky behavior */
+
+/* Mobile only (< 768px): Sticky positioning and progressive collapse behavior */
+/* Animated properties match source prototype (Payment Flow.html lines 133-165) */
+@media (max-width: 767px) {
+    /* Scroll-linked collapse variables — defaults on screen, overridden by JS inline style.
+       Set on .kds-screen so both sticky card and siblings (via translateY) can inherit them. */
+    .kds-screen {
+        --collapse-progress: 0;
+        --collapse-collapsible-h: 0px;
+    }
 
-.kds-invoice-sticky {
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    transition: box-shadow 0.25s ease, border-radius 0.25s ease;
-}
+    /* Wrapper: carries sticky positioning + shadow (outside clip-path) */
+    .kds-invoice-sticky-wrap {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+
+        /* Shadow rendered on wrapper so clip-path on child doesn't clip it.
+           drop-shadow traces the child's clipped alpha boundary → follows rounded shape. */
+        -webkit-filter: drop-shadow(
+            0 calc(4px * var(--collapse-progress, 0))
+            calc(12px * var(--collapse-progress, 0))
+            rgba(16, 24, 40, calc(0.12 * var(--collapse-progress, 0)))
+        );
+        filter: drop-shadow(
+            0 calc(4px * var(--collapse-progress, 0))
+            calc(12px * var(--collapse-progress, 0))
+            rgba(16, 24, 40, calc(0.12 * var(--collapse-progress, 0)))
+        );
+    }
 
-.kds-invoice-sticky.collapsed {
-    box-shadow: var(--kds-shadow-2);
-    border-radius: 0 0 var(--kds-radius-card) var(--kds-radius-card);
-}
+    .kds-card-elevated.kds-invoice-sticky {
+        /* Symmetric padding */
+        padding: var(--kds-spacing-2);
 
-.kds-invoice-sticky .kds-invoice-collapsible {
-    overflow: hidden;
-    max-height: 300px;
-    opacity: 1;
-    transition: max-height 0.3s ease, opacity 0.2s ease;
-}
+        /* Static border-radius on all corners */
+        border-radius: var(--kds-radius-card);
+
+        /* Override .kds-card-elevated transition — scroll drives the animation, not CSS transitions */
+        transition: none;
+
+        /* GPU acceleration */
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+
+        /* clip-path clips the card from the bottom to hide the collapsible space.
+           This is VISUAL ONLY — no layout change — prevents scroll feedback loop.
+           Safari 13.1+ compatible (inset + round)
+           When collapsed (progress=1): bottom corners get border-radius,
+           top stays flush with screen edge. */
+        /* Bottom inset = collapsible height + half the card padding to tighten
+           the gap between "Código" and the visible bottom edge when collapsed. */
+        clip-path: inset(
+            0 0
+            calc(
+                var(--collapse-collapsible-h) * var(--collapse-progress)
+                + var(--kds-spacing-1) * var(--collapse-progress)
+            )
+            0
+            round var(--kds-radius-card)
+        );
+
+        /* Suppress card's own shadow — wrapper handles it */
+        box-shadow: none !important;
+    }
 
-.kds-invoice-sticky.collapsed .kds-invoice-collapsible {
-    max-height: 0;
-    opacity: 0;
-}
+    /* Brand inner: shrink logo + reduce margin on collapse */
+    .kds-invoice-sticky .kds-brand-inner {
+        margin-bottom: calc(var(--kds-spacing-1) * (1 - var(--collapse-progress)) + var(--kds-spacing-0-5) * var(--collapse-progress));
+    }
+    .kds-invoice-sticky .kds-brand-inner svg {
+        height: calc(22px - 5px * var(--collapse-progress));
+    }
 
-.kds-invoice-sticky .kds-invoice-amount {
-    transition: font-size 0.25s ease;
-}
+    /* Collapsible content (kv-rows, detail-panel): Fade out only */
+    /* No max-height — clip-path on parent handles visual collapse without layout changes */
+    .kds-invoice-sticky .kds-invoice-collapsible {
+        opacity: calc(1 - var(--collapse-progress) * 1.5);
+    }
 
-.kds-invoice-sticky.collapsed .kds-invoice-amount {
-    font-size: var(--kds-font-size-xl);
-}
+    /* Amount: NO font-size change (source keeps 30px always) */
+
+    /* Merchant tile: 64×64px → 50×50px, radius 8px → 6px (progressive) */
+    .kds-invoice-sticky .kds-invoice-merchant {
+        width: calc(
+            var(--kds-merchant-size) -
+            (var(--kds-merchant-size) - var(--kds-merchant-size-collapsed)) * var(--collapse-progress)
+        );
+        height: calc(
+            var(--kds-merchant-size) -
+            (var(--kds-merchant-size) - var(--kds-merchant-size-collapsed)) * var(--collapse-progress)
+        );
+        border-radius: calc(
+            var(--kds-merchant-radius) -
+            (var(--kds-merchant-radius) - var(--kds-merchant-radius-collapsed)) * var(--collapse-progress)
+        );
+    }
 
-.kds-invoice-sticky .kds-invoice-merchant {
-    transition: width 0.25s ease, height 0.25s ease;
-}
+    /* Merchant icon: 30px → 24px (progressive) */
+    .kds-invoice-sticky .kds-invoice-merchant i {
+        font-size: calc(
+            var(--kds-merchant-icon-size) -
+            (var(--kds-merchant-icon-size) - var(--kds-merchant-icon-size-collapsed)) * var(--collapse-progress)
+        );
+    }
 
-.kds-invoice-sticky.collapsed .kds-invoice-merchant {
-    width: var(--kds-status-icon-size-sm);
-    height: var(--kds-status-icon-size-sm);
-}
+    /* Code: margin-top 4px → 0 (progressive). Font-size stays 12px. */
+    .kds-invoice-sticky .kds-invoice-code {
+        margin-top: calc(var(--kds-spacing-1) * (1 - var(--collapse-progress)));
+        margin-bottom: 0;
+    }
+
+    /* Pull all siblings after sticky wrapper up to fill clipped gap.
+       transform: translateY is VISUAL ONLY — no layout change, no scroll feedback loop.
+       --collapse-progress and --collapse-collapsible-h are set on the .kds-screen parent by JS. */
+    .kds-invoice-sticky-wrap ~ * {
+        transform: translateY(calc(
+            -1 * (var(--collapse-collapsible-h, 0px) + var(--kds-spacing-1))
+            * var(--collapse-progress, 0)
+        ));
+    }
 
-.kds-invoice-sticky .kds-invoice-merchant i {
-    transition: font-size 0.25s ease;
 }
 
-.kds-invoice-sticky.collapsed .kds-invoice-merchant i {
-    font-size: var(--kds-font-size-xl);
+/* Desktop (>= 768px): Regular card behavior, no sticky */
+@media (min-width: 768px) {
+    .kds-invoice-sticky {
+        position: relative;
+    }
 }
 
-.kds-invoice-sticky .kds-invoice-code {
-    transition: margin-top 0.25s ease, font-size 0.25s ease;
+/* -- Invoice Collapsible (kv rows below header) -- */
+.kds-invoice-collapsible {
+    margin-top: var(--kds-spacing-1-5);
 }
 
-.kds-invoice-sticky.collapsed .kds-invoice-code {
-    margin-top: 0;
-    font-size: var(--kds-font-size-caption);
+/* -- Invoice Summary (kv + expand toggle side by side) -- */
+.kds-invoice-summary {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--kds-spacing-2);
+}
+.kds-invoice-summary .kds-kv {
+    flex: 1;
+    min-width: 0;
+}
+.kds-invoice-summary .kds-expand-toggle {
+    flex-shrink: 0;
+    white-space: nowrap;
 }
 
 /* -- Invoice Header (amount + merchant tile) -- */
@@ -5242,6 +5341,12 @@ dialog#surveyModal button.circle {
     gap: var(--kds-spacing-2);
 }
 
+/* Reset BeerCSS sibling margin on <p> inside invoice header — specificity (0,4,1) ties BeerCSS, wins by source order */
+.kds-card-elevated.kds-invoice-sticky .kds-invoice-header p.kds-invoice-amount,
+.kds-card-elevated.kds-invoice-sticky .kds-invoice-header p.kds-invoice-code {
+    margin-block: 0;
+}
+
 .kds-invoice-amount {
     font-weight: 700;
     font-size: 30px;
@@ -5258,7 +5363,8 @@ dialog#surveyModal button.circle {
 .kds-invoice-code {
     font-size: var(--kds-font-size-xs);
     color: var(--kds-color-text-hint);
-    margin-top: var(--kds-spacing-0-5);
+    margin: 0;
+    margin-top: var(--kds-spacing-1);
 }
 
 .kds-invoice-merchant {
@@ -5596,7 +5702,30 @@ button.kds-btn-success::after {
     gap: var(--kds-spacing-3);
 }
 
-/* Brand logo row */
+/* Mobile: Cards full-width with rounded corners */
+@media (max-width: 767px) {
+    .kds-payment-stage {
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .kds-payment-flow {
+        max-width: none;
+        padding: 0;
+    }
+
+    /* Cards: rounded corners, full width within padded stage */
+    .kds-card-elevated,
+    .khipu-card-elevated {
+        margin-left: 0;
+        margin-right: 0;
+        border-radius: var(--kds-radius-card);
+        width: 100%;
+    }
+
+}
+
+/* Brand logo row (external, outside cards) */
 .kds-brand-row {
     padding: 0 var(--kds-spacing-0-5);
     display: flex;
@@ -5607,6 +5736,27 @@ button.kds-btn-success::after {
     display: block;
 }
 
+/* Brand inner (inside invoice card, hidden on desktop) */
+.kds-brand-inner {
+    display: none;
+    align-items: center;
+    margin-bottom: var(--kds-spacing-1);
+}
+.kds-brand-inner svg {
+    height: 22px;
+    display: block;
+}
+
+/* Mobile: hide external brand, show inner brand */
+@media (max-width: 767px) {
+    .kds-brand-row {
+        display: none;
+    }
+    .kds-brand-inner {
+        display: flex;
+    }
+}
+
 /* Screen transitions (multi-step flows) */
 .kds-screen {
     display: none;
@@ -5922,3 +6072,145 @@ button.kds-btn-success::after {
 .kds-bank-modal-empty.visible {
     display: block;
 }
+/* ========================================
+   QR FEATURED BUTTON (.kds-qr-row)
+   Featured payment option with gradient background
+   and badge for highlighting quick payment methods
+   ======================================== */
+
+.kds-qr-row {
+    display: flex;
+    align-items: center;
+    gap: var(--kds-spacing-1-75);
+    background: var(--kds-qr-bg-gradient);
+    border: 1px solid var(--kds-qr-border);
+    border-radius: var(--kds-radius-card);
+    padding: var(--kds-spacing-1-75);
+    cursor: pointer;
+    text-align: left;
+    font: inherit;
+    color: inherit;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
+    box-shadow: var(--kds-qr-shadow);
+    position: relative;
+}
+
+.kds-qr-row:hover {
+    border-color: var(--kds-qr-border-hover);
+    box-shadow: var(--kds-qr-shadow-hover);
+}
+
+.kds-qr-row:focus-visible {
+    outline: 2px solid var(--kds-qr-focus-ring);
+    outline-offset: 2px;
+}
+
+.kds-qr-row:active {
+    transform: translateY(1px);
+}
+
+/* QR Avatar - Icon container */
+.kds-qr-avatar {
+    width: var(--kds-status-icon-size-sm);
+    height: var(--kds-status-icon-size-sm);
+    border-radius: var(--kds-qr-avatar-radius);
+    background: var(--kds-qr-avatar-bg);
+    display: grid;
+    place-items: center;
+    color: var(--kds-color-primary-main);
+    flex: 0 0 auto;
+    border: 1px solid var(--kds-qr-avatar-border);
+}
+
+.kds-qr-avatar .material-symbols-outlined,
+.kds-qr-avatar .material-icons-round {
+    font-size: 24px;
+}
+
+/* QR Text content */
+.kds-qr-text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+
+.kds-qr-text .title {
+    font-family: var(--kds-font-family-primary);
+    font-weight: 600;
+    font-size: var(--kds-font-size-sm);
+    letter-spacing: -0.15px;
+    color: var(--kds-color-text-primary);
+}
+
+.kds-qr-text .sub {
+    font-family: var(--kds-font-family-primary);
+    font-size: var(--kds-font-size-caption);
+    color: var(--kds-color-text-secondary);
+}
+
+/* QR Badge - "Rápido" indicator */
+.kds-qr-badge {
+    font-family: var(--kds-font-family-primary);
+    font-weight: 600;
+    font-size: 10px;
+    letter-spacing: 0.4px;
+    text-transform: uppercase;
+    color: var(--kds-qr-badge-text);
+    background: var(--kds-qr-badge-bg);
+    padding: 3px 7px;
+    border-radius: 9999px;
+}
+
+/* Chevron icon */
+.kds-qr-row .material-symbols-outlined:last-child,
+.kds-qr-row .material-icons-round:last-child {
+    color: var(--kds-color-primary-main);
+    font-size: 20px;
+}
+
+/* Mobile responsive: Ajustes para pantallas pequeñas */
+@media (max-width: 480px) {
+    .kds-qr-row {
+        gap: var(--kds-spacing-1-5);
+        padding: var(--kds-spacing-1-5);
+    }
+
+    .kds-qr-avatar {
+        width: var(--kds-spacing-4-5);
+        height: var(--kds-spacing-4-5);
+        flex-shrink: 0;
+    }
+
+    .kds-qr-avatar .material-symbols-outlined,
+    .kds-qr-avatar .material-icons-round {
+        font-size: var(--kds-font-size-lg);
+    }
+
+    .kds-qr-text .title {
+        font-size: var(--kds-font-size-xs);
+        line-height: var(--kds-line-height-tight);
+    }
+
+    .kds-qr-text .sub {
+        font-size: var(--kds-font-size-caption);
+        line-height: var(--kds-line-height-tight);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .kds-qr-badge {
+        font-size: var(--kds-font-size-caption);
+        padding: var(--kds-spacing-0-25) var(--kds-spacing-0-75);
+        flex-shrink: 0;
+    }
+
+    .kds-qr-row .material-symbols-outlined:last-child,
+    .kds-qr-row .material-icons-round:last-child {
+        font-size: var(--kds-font-size-base);
+        flex-shrink: 0;
+    }
+}
+

package/dist/beercss/khipu-beercss.js

@@ -1646,6 +1646,8 @@ function H(e){return e<0?-1:e===0?0:1}function nt(e,t,r){return(1-r)*e+r*t}funct
  * - Segmented tabs
  * - Bank modal (search and selection)
  * - Sticky invoice card (collapse on scroll)
+ * - Brand inner (logo inside sticky card on mobile)
+ * - Secure footer (moved inside last card per screen)
  */
 
 (function() {
@@ -1679,6 +1681,8 @@ function H(e){return e<0?-1:e===0?0:1}function nt(e,t,r){return(1-r)*e+r*t}funct
         initModals();
 
         // Initialize payment flow components
+        initBrandInner();
+        initSecureFooterInside();
         initExpandToggle();
         initCopyRow();
         initCountdown();
@@ -1742,6 +1746,62 @@ function H(e){return e<0?-1:e===0?0:1}function nt(e,t,r){return(1-r)*e+r*t}funct
         };
     }
 
+    /**
+     * Inject .kds-brand-inner logo into each .kds-invoice-sticky card
+     * On mobile the external .kds-brand-row is hidden via CSS; the inner brand
+     * keeps the logo visible inside the sticky card as the user scrolls.
+     * Clones the SVG from the nearest preceding .kds-brand-row so the logo
+     * markup is defined once in HTML (single source of truth).
+     * @param {Element} root - Root element to scope queries (default: document)
+     */
+    function initBrandInner(root) {
+        root = root || document;
+        var cards = root.querySelectorAll('.kds-invoice-sticky');
+
+        cards.forEach(function(card) {
+            // Skip if already injected
+            if (card.querySelector('.kds-brand-inner')) return;
+
+            // Find the brand-row logo for this screen (sibling before the sticky wrap)
+            var screen = card.closest('.kds-screen') || card.parentElement;
+            var brandRow = screen ? screen.querySelector('.kds-brand-row') : null;
+            var logoSource = brandRow ? brandRow.querySelector('svg, img') : null;
+
+            if (!logoSource) return;
+
+            var inner = document.createElement('div');
+            inner.className = 'kds-brand-inner';
+            inner.appendChild(logoSource.cloneNode(true));
+            card.insertBefore(inner, card.firstChild);
+        });
+    }
+
+    /**
+     * Move .kds-secure-footer inside the last card of each screen
+     * In the design, the "Pago seguro procesado por Khipu" line lives
+     * inside the bottom card, not as a standalone element.
+     * @param {Element} root - Root element to scope queries (default: document)
+     */
+    function initSecureFooterInside(root) {
+        root = root || document;
+        var screens = root.querySelectorAll('.kds-screen');
+
+        screens.forEach(function(screen) {
+            var footer = screen.querySelector('.kds-secure-footer');
+            if (!footer) return;
+
+            // Find the last non-sticky card in the screen
+            var cards = screen.querySelectorAll('.kds-card-elevated:not(.kds-invoice-sticky)');
+            if (!cards.length) return;
+
+            var lastCard = cards[cards.length - 1];
+
+            // Move (not clone) the footer inside the last card
+            footer.classList.add('inside');
+            lastCard.appendChild(footer);
+        });
+    }
+
     /**
      * Initialize expand toggle panels
      * Delegated click on [data-expand-toggle] toggles aria-expanded and .open on target panel
@@ -1999,41 +2059,94 @@ function H(e){return e<0?-1:e===0?0:1}function nt(e,t,r){return(1-r)*e+r*t}funct
     }
 
     /**
-     * Initialize sticky invoice card collapse on scroll
-     * Toggles .collapsed class on .kds-invoice-sticky when user scrolls past threshold
+     * Initialize sticky invoice card progressive collapse on scroll
+     * MOBILE ONLY - Desktop mantiene cajitas normales
+     * Uses scroll-linked animation (0-150px) for smooth collapse/expand
+     * Updates CSS custom property --collapse-progress (0 to 1) for GPU-accelerated animations
      * Works with multiple screens - targets sticky element in currently active screen
-     * Uses hysteresis (different thresholds for collapse/expand) to prevent oscillation
+     * Safari-compatible: uses native CSS custom properties, calc(), and requestAnimationFrame
      * @param {Element} root - Root element to scope queries (default: document)
      */
     function initStickyInvoice(root) {
         root = root || document;
 
-        var collapseAt = 60;   // px scrolled to collapse
-        var expandAt = 20;     // px scrolled to expand (lower = hysteresis)
-        var collapsedStates = {}; // Track collapsed state per screen
+        // Progressive collapse range: 0px (expanded) to 150px (collapsed)
+        var COLLAPSE_START = 0;
+        var COLLAPSE_END = 150;
+
+        var lastScrollY = 0;
+        var ticking = false;
+        var MOBILE_BREAKPOINT = 768;
+
+        function isMobile() {
+            return window.innerWidth < MOBILE_BREAKPOINT;
+        }
 
         function onScroll() {
-            // Find sticky element in currently active screen
+            // Find active screen first (needed for both desktop and mobile)
             var activeScreen = root.querySelector('.kds-screen.active');
             if (!activeScreen) return;
 
             var sticky = activeScreen.querySelector('.kds-invoice-sticky');
             if (!sticky) return;
 
-            var screenId = activeScreen.id || 'default';
-            var isCollapsed = collapsedStates[screenId] || false;
-            var scrollY = window.scrollY || window.pageYOffset;
-
-            if (!isCollapsed && scrollY > collapseAt) {
-                sticky.classList.add('collapsed');
-                collapsedStates[screenId] = true;
-            } else if (isCollapsed && scrollY < expandAt) {
-                sticky.classList.remove('collapsed');
-                collapsedStates[screenId] = false;
+            // Desktop: Sin animación, siempre expandido
+            if (!isMobile()) {
+                activeScreen.style.removeProperty('--collapse-progress');
+                activeScreen.style.removeProperty('--collapse-collapsible-h');
+                return;
             }
+
+            // Mobile: Animación progresiva scroll-linked
+            if (ticking) return;
+            ticking = true;
+
+            requestAnimationFrame(function() {
+                ticking = false;
+
+                // Re-query inside rAF (screen may have changed)
+                var currentScreen = root.querySelector('.kds-screen.active');
+                if (!currentScreen) return;
+                var currentSticky = currentScreen.querySelector('.kds-invoice-sticky');
+                if (!currentSticky) return;
+
+                var scrollY = window.scrollY || window.pageYOffset;
+
+                // Calcular progress: 0 (inicio) a 1 (totalmente colapsado)
+                var progress = Math.min(Math.max((scrollY - COLLAPSE_START) / (COLLAPSE_END - COLLAPSE_START), 0), 1);
+
+                // Cache collapsible height once for clip-path + translateY calculations
+                // Set on screen so both sticky card and its siblings can access the variable
+                if (!currentScreen.style.getPropertyValue('--collapse-collapsible-h')) {
+                    var collapsible = currentSticky.querySelector('.kds-invoice-collapsible');
+                    if (collapsible) {
+                        currentScreen.style.setProperty('--collapse-collapsible-h', collapsible.offsetHeight + 'px');
+                    }
+                }
+
+                // Single DOM write per frame — set on screen (parent) so it cascades to sticky + siblings
+                currentScreen.style.setProperty('--collapse-progress', progress);
+
+                lastScrollY = scrollY;
+            });
         }
 
+        // Handle resize - cleanup on desktop
+        window.addEventListener('resize', function() {
+            if (!isMobile()) {
+                // Desktop: cleanup all collapsed state from screen elements
+                var screens = root.querySelectorAll('.kds-screen');
+                screens.forEach(function(screen) {
+                    screen.style.removeProperty('--collapse-progress');
+                    screen.style.removeProperty('--collapse-collapsible-h');
+                });
+            }
+        });
+
         window.addEventListener('scroll', onScroll, { passive: true });
+
+        // Init: Set initial state on page load
+        onScroll();
     }
 
     /**
@@ -2086,6 +2199,8 @@ function H(e){return e<0?-1:e===0?0:1}function nt(e,t,r){return(1-r)*e+r*t}funct
     }
     window.Khipu.showSnackbar = showSnackbar;
     window.Khipu.closeModal = window.closeModal;
+    window.Khipu.initBrandInner = initBrandInner;
+    window.Khipu.initSecureFooterInside = initSecureFooterInside;
     window.Khipu.initExpandToggle = initExpandToggle;
     window.Khipu.initCopyRow = initCopyRow;
     window.Khipu.initCountdown = initCountdown;