:root{
    /* Tokens tomados del S24 Design System (Figma) */
    --s24-red:#E12615;        /* Red/600 */
    --s24-red-dark:#A21E12;   /* Red/800 */
    --s24-red-light:#FFE3E0;  /* Red/100 */
    --s24-yellow:#FFD400;     /* Marca (logo) */
    --s24-black:#141414;      /* Grey/950 */
    --s24-black-soft:#1F1F1F;
    --s24-grey-bg:#F6F5F6;    /* Grey/50 */
    --s24-grey-line:#E7E7E7;  /* Grey/100 */
    --s24-grey-mid:#D1D1D1;   /* Grey/200 */
    --s24-text:#141414;       /* Grey/950 */
    --s24-text-soft:#6D6D6D;  /* Grey/500 */
    --s24-success:#188605;    /* Success Green/700 */
    --s24-success-bg:#EAFBE6;
    --s24-warning:#946906;    /* Warning Yellow/500 (texto, oscurecido para contraste) */
    --s24-warning-accent:#ECAC06; /* Warning Yellow/500 */
    --s24-warning-bg:#FFF8E1;
    --s24-info:#1E6DFF;       /* Info Blue/600 */
    --tier-bronce:#B4732E;
    --tier-plata:#9AA0A6;
    --tier-oro:#ECAC06;       /* Warning Yellow/500 */
    --tier-black:#141414;
    --s24-card-border:#D1D1D1; /* Gray/200 — borde de card según Figma */
    --s24-product-bg:#f9f1e4; /* fondo para contenedores de fotos de producto individuales */
    /* Shadows/Efectos tomados del S24 Design System */
    --shadow-xs: 0 1px 2px 0 rgba(20,20,20,.05);
    --shadow-sm: 0 1px 2px -1px rgba(20,20,20,.10), 0 1px 3px 0 rgba(20,20,20,.10);
    --shadow-md: 0 2px 4px -2px rgba(20,20,20,.06), 0 4px 6px -1px rgba(20,20,20,.10);
    --shadow-lg: 0 2px 2px -1px rgba(20,20,20,.04), 0 4px 6px -2px rgba(20,20,20,.03);
    --shadow-xl: 0 3px 3px -1.5px rgba(20,20,20,.04), 0 8px 8px -4px rgba(20,20,20,.03);
    --radius-lg:22px;
    --radius-md:16px;
    --radius-sm:10px;
    --font-display:'Helvetica Neue', Helvetica, Arial, sans-serif; /* Tipografia S24: Helvetica Neue (design system) */
    --font-body:'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0; padding:0; font-family:var(--font-body); color:var(--s24-text); background:var(--s24-grey-bg);}
  button{font-family:inherit; cursor:pointer;}
  input{font-family:inherit;}
  a{color:inherit; text-decoration:none;}
  .icon-svg{width:1em; height:1em; display:inline-block; vertical-align:-0.15em; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

  /* ============ PRESENTATION SHELL (desktop) ============ */
  body{
    display:flex; flex-direction:row; align-items:center; justify-content:center;
    min-height:100vh; padding:32px 12px;
    background:radial-gradient(circle at 50% 0%, #2a2a2a 0%, #0d0d0d 55%, #000 100%);
  }

  .phone-shell{
    position:relative; width:390px; height:844px; border-radius:56px; padding:14px;
    background:linear-gradient(160deg,#3a3a3a,#0c0c0c 60%); box-shadow:0 40px 80px -20px rgba(0,0,0,.7), 0 0 0 2px rgba(255,255,255,.04) inset;
    flex-shrink:0;
  }
  .phone-notch{
    position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:28px; background:#0c0c0c; border-radius:0 0 18px 18px; z-index:50;
  }
  .phone-screen{
    position:relative; width:100%; height:100%; background:#fff; border-radius:42px; overflow:hidden;
    box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
  }
  .status-bar{
    height:47px; display:flex; align-items:center; justify-content:space-between; padding:0 26px; font-size:13px; font-weight:600;
    position:relative; z-index:40; flex-shrink:0;
  }
  .status-bar.light{color:#fff;}
  .status-bar.dark{color:#111;}
  .status-icons{display:flex; align-items:center; gap:5px;}

  .app-viewport{ position:absolute; top:0; left:0; right:0; bottom:0; display:flex; flex-direction:column; }

  /* ============ SCREENS ============ */
  .screen{
    position:absolute; inset:0; display:none; flex-direction:column; background:#fff; overflow-y:auto; -ms-overflow-style:none; scrollbar-width:none;
  }
  .screen::-webkit-scrollbar{display:none;}
  .screen.active{display:flex;}
  .screen-scroll{flex:1; overflow-y:auto; padding-bottom:100px;}
  .screen-scroll.no-nav-pad{padding-bottom:24px;}

  /* ============ SPLASH ============ */
  #screen-splash{
    background:radial-gradient(circle at 50% 30%, #262626 0%, #0c0c0c 70%); align-items:center; justify-content:center; color:#fff;
  }
  .splash-logo{display:flex; align-items:baseline;}
  .splash-logo img{height:66px; width:auto; display:block;}
  .splash-logo .s-super{color:var(--s24-yellow); font-style:italic; transform:skewX(-6deg); text-shadow:2px 2px 0 rgba(0,0,0,.4);}
  .splash-logo .s-24{color:var(--s24-red); margin-left:2px; text-shadow:2px 2px 0 rgba(0,0,0,.4);}
  .splash-tagline{font-size:12.5px; letter-spacing:.32em; color:#d8d8d8; margin-top:6px; font-weight:600;}
  .splash-loader{width:120px; height:4px; background:rgba(255,255,255,.15); border-radius:10px; margin-top:46px; overflow:hidden;}
  .splash-loader-bar{height:100%; width:30%; background:var(--s24-red); border-radius:10px; animation:loadbar 1.6s ease-in-out infinite;}
  @keyframes loadbar{0%{transform:translateX(-100%);} 60%{transform:translateX(260%);} 100%{transform:translateX(260%);}}

  /* ============ ONBOARDING ============ */
  .onb-skip{position:absolute; top:14px; right:20px; font-size:13px; font-weight:600; color:var(--s24-text-soft); z-index:5;}
  .onb-art{
    flex:1; position:relative; overflow:hidden;
  }
  .onb-art img{width:100%; height:100%; object-fit:cover; display:block;}
  .onb-art::after{content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(20,20,20,0) 45%, rgba(255,255,255,.9) 82%, #fff 100%);}
  .onb-art.no-fade::after{display:none;}
  .onb-art.soft-fade::after{background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 55%, rgba(255,255,255,.55) 80%, rgba(255,255,255,.92) 92%, #fff 100%);}
  .onb-badge{
    position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:2;
    width:64px; height:64px; border-radius:50%; background:#fff; box-shadow:var(--shadow-lg);
    display:flex; align-items:center; justify-content:center; font-size:28px;
  }
  .onb-body{padding:0 30px 20px;}
  .onb-dots{display:flex; gap:6px; justify-content:center; margin-bottom:18px;}
  .onb-dot{width:7px; height:7px; border-radius:50%; background:var(--s24-grey-line);}
  .onb-dot.on{width:22px; background:var(--s24-red); border-radius:6px;}
  .onb-body h2{font-family:var(--font-display); font-size:22px; margin:0 0 10px; text-align:center; font-weight:700;}
  .onb-body p{font-size:14px; color:var(--s24-text-soft); text-align:center; line-height:1.55; margin:0 0 26px;}

  /* ============ GENERIC UI ============ */
  .btn{
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:15px 18px; border-radius:100px;
    border:none; font-weight:700; font-size:15px; transition:transform .15s ease;
  }
  .btn:active{transform:scale(.97);}
  .btn-primary{background:var(--s24-red); color:#fff; box-shadow:0 10px 20px -8px rgba(225,38,21,.55);}
  .btn-dark{background:var(--s24-black); color:#fff;}
  .btn-outline{background:#fff; color:var(--s24-text); border:1.5px solid var(--s24-grey-line);}
  .btn-ghost{background:transparent; color:var(--s24-text-soft); font-weight:600; font-size:13.5px; padding:8px;}
  .btn[disabled]{opacity:.4; pointer-events:none;}

  .topbar{
    display:flex; align-items:center; gap:14px; padding:38px 20px 10px; flex-shrink:0;
  }
  .topbar h1{font-family:var(--font-display); font-size:18px; font-weight:700; margin:0;}
  .back-btn{
    width:36px; height:36px; border-radius:50%; background:var(--s24-grey-bg); display:flex; align-items:center; justify-content:center;
    font-size:16px; flex-shrink:0;
  }

  .field{margin-bottom:16px;}
  .field label{display:block; font-size:12.5px; font-weight:600; color:var(--s24-text-soft); margin-bottom:6px; letter-spacing:.02em;}
  .field input{
    width:100%; padding:14px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--s24-grey-line); font-size:15px; background:#fbfbfc;
    outline:none;
  }
  .field input:focus{border-color:var(--s24-red); background:#fff;}
  .field-hint{font-size:11.5px; color:var(--s24-text-soft); margin-top:5px;}
  .check-row{display:flex; align-items:flex-start; gap:10px; margin:6px 0 22px;}
  .check-row input{margin-top:3px;}
  .check-row span{font-size:12.5px; color:var(--s24-text-soft); line-height:1.5;}

  .auth-wrap{padding:8px 26px 26px; flex:1; display:flex; flex-direction:column;}
  .auth-logo{display:flex; align-items:baseline; margin:6px 0 4px;}
  .auth-logo img{height:36px; width:auto; display:block;}
  .auth-logo .s-super{color:var(--s24-yellow); -webkit-text-stroke:1.2px #111; font-style:italic;}
  .auth-logo .s-24{color:var(--s24-red); -webkit-text-stroke:1.2px #111; margin-left:1px;}
  .auth-title{font-family:var(--font-display); font-size:21px; font-weight:700; margin:14px 0 4px;}
  .auth-sub{font-size:13.5px; color:var(--s24-text-soft); margin:0 0 24px; line-height:1.5;}
  .auth-switch{text-align:center; margin-top:18px; font-size:13.5px; color:var(--s24-text-soft);}
  .auth-switch b{color:var(--s24-red);}
  .auth-tabs{display:flex; gap:0; margin:20px 0 24px; border-bottom:1.5px solid var(--s24-grey-line);}
  .auth-tab{flex:1; text-align:center; padding:12px 4px; font-size:14px; font-weight:700; color:var(--s24-text-soft); cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-1.5px;}
  .auth-tab.on{color:var(--s24-red); border-bottom-color:var(--s24-red);}
  .auth-row{display:flex; align-items:center; justify-content:space-between; margin:-6px 0 22px; gap:10px; flex-wrap:wrap;}
  .check-inline{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--s24-text-soft); cursor:pointer;}
  .check-inline input{width:16px; height:16px; accent-color:var(--s24-red); flex-shrink:0;}
  .auth-row a{font-size:12px; color:var(--s24-red); font-weight:700; cursor:pointer;}

  /* OTP */
  .otp-row{display:flex; gap:12px; justify-content:center; margin:26px 0 10px;}
  .otp-box{
    width:54px; height:62px; border-radius:var(--radius-sm); border:1.5px solid var(--s24-grey-line); text-align:center; font-size:24px; font-weight:700;
    background:#fbfbfc;
  }
  .otp-box:focus{border-color:var(--s24-red); outline:none; background:#fff;}
  .otp-resend{text-align:center; font-size:13px; color:var(--s24-text-soft); margin:14px 0 30px;}
  .otp-resend b{color:var(--s24-red); font-weight:700;}
  .otp-icon-wrap{width:64px; height:64px; border-radius:20px; background:#FFF1EF; display:flex; align-items:center; justify-content:center; font-size:30px; margin:10px auto 18px;}

  /* ============ HOME ============ */
  .home-header{
    display:flex; align-items:center; justify-content:space-between; padding:18px 20px 6px; flex-shrink:0; position:relative;
  }
  .home-greeting{display:flex; align-items:center; gap:11px; cursor:pointer;}
  .avatar{width:42px; height:42px; border-radius:50%; background:#E12615; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-family:var(--font-display); font-size:15px; flex-shrink:0;}
  .home-greeting .hi{font-size:12px; color:var(--s24-text-soft); font-weight:500;}
  .home-greeting .name{font-size:15.5px; font-weight:700; font-family:var(--font-display);}
  .icon-btn{width:38px; height:38px; border-radius:50%; background:var(--s24-grey-bg); display:flex; align-items:center; justify-content:center; font-size:16px; position:relative; cursor:pointer;}
  .icon-btn .dot{position:absolute; top:8px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--s24-red); border:1.5px solid #fff;}

  /* Notifications dropdown */
  .notif-dropdown{
    position:absolute; top:56px; right:14px; width:272px; background:#fff; border-radius:16px; border:1px solid var(--s24-grey-line);
    box-shadow:0 18px 34px -10px rgba(0,0,0,.28); z-index:200; display:none; overflow:hidden;
  }
  .notif-dropdown.open{display:block;}
  .notif-head{display:flex; justify-content:space-between; align-items:center; padding:14px 16px 10px;}
  .notif-head b{font-family:var(--font-display); font-size:13.5px;}
  .notif-head a{font-size:10.5px; color:var(--s24-red); font-weight:700; cursor:pointer;}
  .notif-list{max-height:280px; overflow-y:auto;}
  .notif-item{display:flex; gap:10px; padding:11px 16px; border-top:1px solid var(--s24-grey-line);}
  .notif-item .ni-icon{width:34px; height:34px; border-radius:10px; background:var(--s24-grey-bg); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;}
  .notif-item .ni-text b{display:block; font-size:12px; font-weight:700;}
  .notif-item .ni-text span{font-size:10.5px; color:var(--s24-text-soft); line-height:1.4;}

  /* ============ PROFILE ============ */
  .profile-head{display:flex; flex-direction:column; align-items:center; padding:16px 20px 22px; text-align:center;}
  .profile-avatar{width:64px; height:64px; border-radius:50%; background:#E12615; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-family:var(--font-display); font-size:20px;}
  .profile-name{font-family:var(--font-display); font-weight:700; font-size:17px; margin-top:12px;}
  .profile-meta{font-size:12px; color:var(--s24-text-soft); margin-top:3px;}
  .profile-tier{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; margin-top:12px; background:var(--s24-grey-bg); padding:6px 14px; border-radius:100px;}
  .profile-tier .dot{width:8px; height:8px; border-radius:50%;}
  .settings-row{display:flex; align-items:center; gap:12px; padding:13px 20px;}
  .settings-row .row-icon{width:38px; height:38px; border-radius:11px; background:var(--s24-grey-bg); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;}
  .settings-row .row-label{flex:1; font-size:13.5px; font-weight:600;}
  .settings-row .row-chevron{color:var(--s24-text-soft); font-size:16px;}

  /* ============ PROMOS ============ */
  .promo-tabs{display:flex; gap:8px; padding:6px 20px 14px;}
  .promo-tab{flex:1; text-align:center; padding:10px; border-radius:100px; font-size:12.5px; font-weight:700; background:var(--s24-grey-bg); color:var(--s24-text-soft);}
  .promo-tab.on{background:var(--s24-red); color:#fff;}
  .promo-locked-banner{
    display:flex; gap:10px; align-items:center; background:#FFF8E8; border:1px solid #F5DFA0; border-radius:14px;
    padding:13px 14px; margin:6px 20px 14px;
  }
  .promo-locked-banner .plb-icon{font-size:20px; flex-shrink:0;}
  .promo-locked-banner span{font-size:12px; color:var(--s24-warning); line-height:1.5; font-weight:600;}
  .promo-full-card{
    display:flex; gap:14px; padding:14px; border-radius:16px; border:1px solid var(--s24-card-border); margin:0 20px 12px; align-items:center; position:relative;
    box-shadow:var(--shadow-xs);
  }
  .promo-full-card .pf-icon{width:52px; height:52px; border-radius:14px; overflow:hidden; position:relative; flex-shrink:0; background:var(--s24-product-bg);}
  .promo-full-card .pf-icon img{width:100%; height:100%; object-fit:contain; display:block; padding:6px; box-sizing:border-box;}
  .promo-full-card .pf-body{flex:1; min-width:0;}
  .promo-full-card .pf-body b{font-size:13.5px; font-family:var(--font-display); display:block;}
  .promo-full-card .pf-body span{font-size:11.5px; color:var(--s24-text-soft); display:block; margin-top:2px;}
  .promo-full-card .pf-exp{font-size:10.5px; color:var(--s24-red); font-weight:700; margin-top:6px; display:inline-block;}
  .promo-full-card.locked{opacity:.6; filter:grayscale(.4); pointer-events:none;}
  .promo-full-card.locked .pf-exp{color:var(--tier-oro);}
  .locked-chip{
    position:absolute; top:12px; right:12px; background:var(--tier-oro); color:#fff; font-size:9px; font-weight:800;
    padding:4px 8px; border-radius:100px; display:flex; align-items:center; gap:3px; letter-spacing:.02em;
  }

  .balance-card{
    margin:14px 20px 0; border-radius:24px; padding:22px 22px 20px; position:relative; overflow:hidden; color:#fff;
    background:
      radial-gradient(120% 140% at 100% 0%, #2c2c2c 0%, transparent 45%),
      repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px),
      linear-gradient(135deg,#242424,#0a0a0a 70%);
    box-shadow:var(--shadow-xl), 0 18px 30px -14px rgba(0,0,0,.5);
  }
  .balance-card .bc-top{display:flex; justify-content:space-between; align-items:flex-start;}
  .balance-card .bc-label{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:#c9c9c9; font-weight:600;}
  .balance-card .bc-logo{display:flex; align-items:center;}
  .balance-card .bc-logo img{height:16px; width:auto; display:block;}
  .balance-card .bc-logo .s-super{color:var(--s24-yellow); font-style:italic;}
  .balance-card .bc-logo .s-24{color:var(--s24-red);}
  .balance-card .bc-amount{font-family:var(--font-display); font-size:38px; font-weight:800; margin:10px 0 2px; letter-spacing:-.5px;}
  .balance-card .bc-exp{font-size:12px; color:#d6d6d6;}
  .balance-card .bc-exp b{color:var(--s24-yellow); font-weight:700;}
  .balance-card .bc-actions{display:flex; gap:10px; margin-top:18px;}
  .bc-btn{flex:1; text-align:center; padding:11px; border-radius:100px; font-size:12.5px; font-weight:700; background:rgba(255,255,255,.12); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.14);}
  .bc-btn.solid{background:var(--s24-red); border-color:transparent;}

  .tier-strip{
    margin:16px 20px 0; background:var(--s24-grey-bg); border-radius:18px; padding:14px 16px;
  }
  .tier-strip-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
  .tier-badge{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;}
  .tier-badge .dot{width:9px; height:9px; border-radius:50%;}
  .tier-strip-top a{font-size:12px; color:var(--s24-red); font-weight:700;}
  .tier-progress-bg{height:7px; background:#e3e4e8; border-radius:10px; overflow:hidden;}
  .tier-progress-fill{height:100%; border-radius:10px; background:linear-gradient(90deg,var(--tier-plata),#c7c7c7);}
  .tier-strip-note{font-size:11.5px; color:var(--s24-text-soft); margin-top:8px;}
  .tier-strip-note b{color:var(--s24-text);}

  .section-title{display:flex; justify-content:space-between; align-items:center; padding:22px 20px 10px;}
  .section-title h3{font-family:var(--font-display); font-size:15.5px; font-weight:700; margin:0;}
  .section-title a{font-size:12.5px; color:var(--s24-red); font-weight:700;}

  .promo-scroll{display:flex; gap:12px; padding:0 20px 4px; overflow-x:auto;}
  .promo-card{
    flex-shrink:0; width:230px; height:150px; border-radius:16px; padding:14px; color:#fff; position:relative; overflow:hidden;
    display:flex; flex-direction:column; justify-content:flex-end; background-size:cover; background-position:center;
  }
  .promo-card::before{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.1) 60%, rgba(0,0,0,.3) 100%); z-index:0;}
  .promo-card.p1{background-image:url('img/5a782f5e9535.jpg');}
  .promo-card.p2{background-image:url('img/c02f3d5e9ecf.jpg');}
  .promo-card b{font-size:14px; font-family:var(--font-display); position:relative; z-index:1;}
  .promo-card span{font-size:11px; opacity:.85; margin-top:2px; position:relative; z-index:1;}

  /* ============ GUEST / EMPTY STATES (V7) ============ */
  .balance-card.guest{
    background:var(--s24-grey-bg); box-shadow:none; border:1.5px dashed var(--s24-grey-mid); color:var(--s24-text);
  }
  .balance-card.guest .bc-label{color:var(--s24-text-soft);}
  .balance-card.guest .bc-logo .s-super{color:var(--s24-red-dark);}
  .balance-card.guest .bc-logo .s-24{color:var(--s24-text);}
  .balance-card.guest .bc-amount{color:var(--s24-grey-mid); font-family:var(--font-display); font-size:38px; font-weight:800; margin:10px 0 2px;}
  .balance-card.guest .bc-exp{color:var(--s24-text-soft);}
  .balance-card.guest .bc-btn.solid{background:var(--s24-red); color:#fff;}

  .empty-state-card{
    margin:14px 20px 4px; padding:30px 22px; text-align:center; background:var(--s24-grey-bg); border-radius:20px;
  }
  .empty-state-icon{
    width:52px; height:52px; border-radius:50%; background:#fff; box-shadow:var(--shadow-xs); color:var(--s24-text-soft);
    display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 14px;
  }
  .empty-state-title{font-family:var(--font-display); font-weight:700; font-size:15.5px; margin-bottom:8px;}
  .empty-state-text{font-size:13px; color:var(--s24-text-soft); line-height:1.55; margin-bottom:20px;}

  .guest-promo-banner{margin:14px 20px 0; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); cursor:pointer;}
  .guest-promo-banner img{width:100%; display:block;}
  .cc-guest-hero{margin:0 0 20px; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm);}
  .cc-guest-hero img{width:100%; display:block;}
  .stores-hero{margin:0 20px 16px; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm);}
  .stores-hero img{width:100%; display:block;}
  .cc-guest{padding:36px 24px 10px; text-align:center;}
  .cc-guest-icon{
    width:72px; height:72px; border-radius:50%; background:var(--s24-grey-bg); color:var(--s24-text-soft);
    display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 18px;
  }
  .cc-guest-title{font-family:var(--font-display); font-weight:700; font-size:17px; margin-bottom:8px;}
  .cc-guest-text{font-size:13.5px; color:var(--s24-text-soft); line-height:1.55; margin-bottom:26px;}

  /* ============ TOAST (sesión heredada al e-commerce) ============ */
  .s24-toast{
    position:absolute; left:50%; bottom:26px; transform:translateX(-50%) translateY(16px); opacity:0; pointer-events:none;
    background:rgba(20,20,20,.94); color:#fff; font-size:12.5px; font-weight:600; padding:12px 20px; border-radius:100px;
    box-shadow:var(--shadow-lg); z-index:500; transition:opacity .25s ease, transform .25s ease; white-space:nowrap; max-width:88%;
    overflow:hidden; text-overflow:ellipsis;
  }
  .s24-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  /* Bottom nav */
  .bottom-nav{
    position:absolute; left:0; right:0; bottom:0; height:82px; background:#fff; border-top:1px solid var(--s24-grey-line);
    display:flex; align-items:flex-start; padding-top:9px; z-index:60;
  }
  .nav-item{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10.5px; font-weight:600; color:#a8a9ae;}
  .nav-item .nav-icon{font-size:19px;}
  .nav-item.active{color:var(--s24-red);}
  .nav-item.center{justify-content:flex-start;}
  .nav-item.center .nav-icon-circle{
    width:56px; height:56px; border-radius:50%; background:var(--s24-red); color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:23px; margin-top:-34px; border:4px solid #fff; box-shadow:0 10px 18px -6px rgba(225,38,21,.6);
  }
  .nav-item.center.active .nav-icon-circle{transform:scale(1.06);}
  .nav-item.center span{margin-top:1px;}

  /* ============ CASH CARD ============ */
  .cc-wrap{padding:4px 22px 30px;}
  .cc-card{
    border-radius:20px; padding:22px; color:#fff; position:relative; overflow:hidden; height:190px; display:flex; flex-direction:column; justify-content:space-between;
    background:
      radial-gradient(130% 160% at 100% 0%, #333 0%, transparent 45%),
      repeating-linear-gradient(120deg, rgba(255,255,255,.05) 0 2px, transparent 2px 10px),
      linear-gradient(140deg,#262626,#050505 75%);
    box-shadow:var(--shadow-xl), 0 20px 34px -16px rgba(0,0,0,.55);
    margin-bottom:22px;
  }
  .cc-card-top{display:flex; justify-content:space-between; align-items:flex-start;}
  .cc-logo{display:flex; align-items:center;}
  .cc-logo img{height:20px; width:auto; display:block;}
  .cc-logo .s-super{color:var(--s24-yellow); font-style:italic;}
  .cc-logo .s-24{color:var(--s24-red);}
  .cc-chip{width:38px; height:28px; border-radius:6px; background:linear-gradient(135deg,#e8c874,#b8933f);}
  .cc-number{font-size:15px; letter-spacing:.14em; font-weight:600; color:#eee;}
  .cc-bottom-row{display:flex; justify-content:space-between; align-items:flex-end;}
  .cc-name{font-size:12.5px; color:#ddd; font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
  .cc-label{font-size:9.5px; color:#999; letter-spacing:.1em; text-transform:uppercase;}

  .qr-box{background:#fff; border:1px solid var(--s24-card-border); border-radius:20px; padding:22px; text-align:center; margin-bottom:18px; box-shadow:var(--shadow-xs);}
  .barcode-wrap{background:#fff; border-radius:10px; padding:10px 6px 4px; margin-bottom:14px;}
  .barcode-svg{width:100%; height:70px; display:block;}
  .barcode-number{font-size:13px; letter-spacing:.18em; font-weight:600; color:var(--s24-text); margin-top:8px; font-family:'Courier New', monospace;}
  .qr-box .qr-saldo{font-size:12.5px; color:var(--s24-text-soft);}
  .qr-box .qr-saldo b{color:var(--s24-text); font-family:var(--font-display); font-size:16px;}

  .wallet-row{display:flex; gap:10px; margin-bottom:20px;}
  .wallet-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:12px; font-size:12.5px; font-weight:700;
    box-shadow:var(--shadow-sm);
  }
  .wallet-btn.apple{background:#000; color:#fff;}
  .wallet-btn.google{background:#fff; color:#3c4043; border:1.3px solid var(--s24-grey-line);}
  .cc-note{background:var(--s24-warning-bg); border:1px solid #F5DFA0; border-radius:12px; padding:12px 14px; font-size:12px; color:var(--s24-warning); line-height:1.5;}

  /* ============ HISTORY ============ */
  .filter-tabs{display:flex; gap:8px; padding:6px 20px 14px;}
  .filter-tab{padding:8px 16px; border-radius:100px; font-size:12.5px; font-weight:700; background:var(--s24-grey-bg); color:var(--s24-text-soft);}
  .filter-tab.on{background:var(--s24-red); color:#fff;}
  .hist-group-label{font-size:12px; font-weight:700; color:var(--s24-text-soft); padding:14px 20px 6px; text-transform:uppercase; letter-spacing:.04em;}
  .hist-item{display:flex; align-items:center; gap:12px; padding:12px 20px;}
  .hist-icon{width:42px; height:42px; border-radius:12px; background:var(--s24-grey-bg); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;}
  .hist-info{flex:1; min-width:0;}
  .hist-info .h-store{font-size:13.5px; font-weight:700;}
  .hist-info .h-meta{font-size:11.5px; color:var(--s24-text-soft); margin-top:2px;}
  .hist-pts{font-size:14px; font-weight:800; font-family:var(--font-display); white-space:nowrap;}
  .hist-pts.plus{color:var(--s24-success);}
  .hist-pts.minus{color:var(--s24-red);}

  /* ============ TRANSFER ============ */
  .tr-avail{background:var(--s24-grey-bg); border-radius:14px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;}
  .tr-avail .lbl{font-size:12px; color:var(--s24-text-soft);}
  .tr-avail .val{font-family:var(--font-display); font-weight:800; font-size:17px;}
  .recipient-found{display:flex; align-items:center; gap:12px; background:var(--s24-success-bg); border:1px solid #CDEFD8; border-radius:14px; padding:12px 14px; margin:-6px 0 18px;}
  .recipient-found .av{width:36px; height:36px; border-radius:50%; background:var(--s24-success); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;}
  .recipient-found .txt b{display:block; font-size:13px;}
  .recipient-found .txt span{font-size:11.5px; color:var(--s24-text-soft);}
  .amount-quick{display:flex; gap:8px; margin-bottom:20px;}
  .amount-quick button{flex:1; padding:10px; border-radius:10px; border:1.5px solid var(--s24-grey-line); background:#fff; font-weight:700; font-size:12.5px;}
  .amount-quick button.on{border-color:var(--s24-red); color:var(--s24-red); background:#FFF3F2;}
  .security-note{display:flex; gap:10px; background:var(--s24-warning-bg); border:1px solid #F5DFA0; border-radius:12px; padding:12px 14px; font-size:12px; color:var(--s24-warning); line-height:1.5; margin-top:6px;}

  .success-wrap{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; text-align:center;}
  .success-check{width:84px; height:84px; border-radius:50%; background:var(--s24-success-bg); color:var(--s24-success); display:flex; align-items:center; justify-content:center; font-size:40px; margin-bottom:20px;}
  .success-wrap h2{font-family:var(--font-display); font-size:21px; margin:0 0 8px;}
  .success-wrap p{font-size:13.5px; color:var(--s24-text-soft); margin:0 0 30px; line-height:1.5;}

  /* ============ TIERS ============ */
  .tiers-hero{padding:6px 20px 4px; text-align:center;}
  .tiers-hero .cur{font-size:12.5px; color:var(--s24-text-soft);}
  .tiers-hero .big{font-family:var(--font-display); font-size:22px; font-weight:800; margin:4px 0 14px;}
  .tier-track{display:flex; align-items:center; padding:0 26px; margin-bottom:6px;}
  .tier-node{display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; position:relative;}
  .tier-node .circ{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; z-index:2; border:3px solid #fff;}
  .tier-node span{font-size:10.5px; font-weight:700; color:var(--s24-text-soft);}
  .tier-node.on span{color:var(--s24-text);}
  .tier-line{position:absolute; top:17px; left:-50%; width:100%; height:3px; background:var(--s24-grey-line); z-index:1;}
  .tier-line.filled{background:var(--s24-red);}
  .tier-node:first-child .tier-line{display:none;}

  .tier-card{margin:16px 20px; border-radius:18px; padding:18px; border:1px solid var(--s24-card-border); position:relative; overflow:hidden; box-shadow:var(--shadow-xs);}
  .tier-card.current{border-color:var(--s24-red); background:#FFF9F8;}
  .tier-card-top{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
  .tier-icon{width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff;}
  .tier-card-top b{font-family:var(--font-display); font-size:15.5px; display:block;}
  .tier-card-top span{font-size:11.5px; color:var(--s24-text-soft);}
  .tier-perks{list-style:none; margin:0; padding:0; font-size:12.5px; color:var(--s24-text-soft);}
  .tier-perks li{padding:4px 0 4px 20px; position:relative;}
  .tier-perks li::before{content:"✓"; position:absolute; left:0; color:var(--s24-success); font-weight:800;}
  .current-tag{position:absolute; top:14px; right:14px; background:var(--s24-red); color:#fff; font-size:10px; font-weight:800; padding:4px 10px; border-radius:100px; letter-spacing:.03em;}

  /* ============ STORES ============ */
  .map-placeholder{
    margin:4px 20px 16px; height:150px; border-radius:18px; position:relative; overflow:hidden;
    background:
      linear-gradient(#eef1e9,#eef1e9),
      repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 26px),
      repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 26px);
  }
  .map-road{position:absolute; background:#fff; box-shadow:0 0 0 1px #dfe3d8;}
  .map-pin{position:absolute; width:26px; height:26px; border-radius:50% 50% 50% 0; background:var(--s24-red); transform:rotate(-45deg); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 8px rgba(0,0,0,.25);}
  .map-pin::after{content:""; width:8px; height:8px; border-radius:50%; background:#fff; transform:rotate(45deg);}
  .map-pin.me{background:var(--s24-info); border-radius:50%; transform:none; width:16px; height:16px; box-shadow:0 0 0 6px rgba(30,109,255,.22);}
  .map-pin.me::after{display:none;}

  .search-box{display:flex; align-items:center; gap:8px; background:#F5F5F5; border-radius:100px; padding:11px 18px; margin:0 20px 16px;}
  .search-box input{background:transparent; border:none; outline:none; font-size:13.5px; flex:1;}

  .store-item{display:flex; gap:13px; padding:14px 20px; border-bottom:1px solid var(--s24-grey-line);}
  .store-badge{width:44px; height:44px; border-radius:13px; background:var(--s24-black); color:var(--s24-yellow); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:12px; flex-shrink:0;}
  .store-info b{font-size:13.5px; display:block;}
  .store-info .addr{font-size:11.5px; color:var(--s24-text-soft); margin:2px 0 4px;}
  .store-info .meta{display:flex; gap:10px; font-size:11px; color:var(--s24-text-soft);}
  .store-info .meta .open{color:var(--s24-success); font-weight:700;}
  .store-dist{font-size:12px; font-weight:700; color:var(--s24-red); white-space:nowrap; margin-left:auto; align-self:center;}

  /* Nav dock (lateral menu, for switching screens quickly during demo) */
  .dev-dock{
    position:fixed; top:50%; left:0; transform:translateY(-50%); background:rgba(20,20,20,.88); color:#fff;
    border-radius:0 16px 16px 0; padding:10px 6px; display:flex; flex-direction:column; gap:3px; z-index:999;
    backdrop-filter:blur(6px); box-shadow:8px 12px 28px rgba(0,0,0,.35); max-height:80vh; overflow-y:auto;
  }
  .dev-dock::-webkit-scrollbar{width:0;}
  .dev-dock button{background:transparent; border:none; color:#ccc; font-size:10.5px; font-weight:600; padding:7px 12px; border-radius:100px; white-space:nowrap; text-align:left;}
  .dev-dock button.active{background:var(--s24-red); color:#fff;}

  /* Mobile: dock collapses into a sticky dropdown header, outside the phone prototype */
  .mobile-dock-bar{display:none;}
  .mobile-dock-toggle{
    display:none; width:100%; align-items:center; justify-content:space-between; padding:13px 18px;
    background:transparent; border:none; color:#fff; font-weight:700; font-size:13px;
  }
  .mobile-dock-toggle .mdb-left{display:flex; align-items:center; gap:8px;}
  .mobile-dock-toggle .mdb-current{color:var(--s24-yellow); font-weight:700;}
  .mobile-dock-toggle .mdb-caret{transition:transform .2s ease; opacity:.7;}
  .mobile-dock-toggle.open .mdb-caret{transform:rotate(180deg);}

  @media (max-width: 600px){
    body{padding:0; background:#fff; align-items:stretch; flex-direction:column;}
    .mobile-dock-bar{
      display:block; position:sticky; top:0; z-index:1000; background:#141414;
      box-shadow:0 4px 14px rgba(0,0,0,.25);
    }
    .mobile-dock-toggle{display:flex;}
    .phone-shell{
      width:100%; flex:1; min-height:0; height:auto; border-radius:0; padding:0; box-shadow:none;
      display:flex; flex-direction:column;
    }
    .phone-notch{display:none;}
    .phone-screen{border-radius:0; height:auto; flex:1; min-height:0;}
    .dev-dock{
      position:static; display:none; width:100%; max-height:55vh; border-radius:0; box-shadow:none;
      background:#1c1c1c; padding:6px 10px 10px; transform:none;
    }
    .dev-dock.open{display:flex;}
    .dev-dock button{text-align:left; border-radius:8px; padding:11px 12px; font-size:13px;}
    .topbar{padding-top:16px;}
  }

  /* ============================================================
     VISUAL REDESIGN v14 -- inspirado en referencia (solo estilo,
     NO se modifica estructura, flujo ni funcionalidad)
     ============================================================ */

  h1,h2,h3,.auth-title,.bc-amount,.success-wrap h2,.tiers-hero .big{letter-spacing:-.3px;}
  .onb-body h2{font-weight:800;}
  .btn, .nav-item, .promo-tab, .filter-tab, .tier-badge, .empty-state-title, .hist-info .h-store, .store-info b, .field label{font-family:var(--font-body);}

  /* --- HOME: hero amarillo + balance card flotante --- */
  #screen-home .home-header{
    background:#F9F1E4; /* color real del cms-free-shipping del e-commerce Super24 */
    padding:20px 20px 130px; margin-bottom:-100px; border-radius:0 0 36px 36px;
  }
  #screen-home .home-greeting .hi{color:#6d5a3a; opacity:.85;}
  #screen-home .home-greeting .name{color:#1f1a00;}
  #screen-home .icon-btn{background:rgba(255,255,255,.7); backdrop-filter:blur(2px);}
  #screen-home .avatar{box-shadow:0 6px 14px -4px rgba(0,0,0,.25);}

  .balance-card{
    position:relative; z-index:2; border-radius:28px;
    box-shadow:0 24px 40px -18px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.06) inset;
  }
  .balance-card.guest{border-radius:28px; box-shadow:0 18px 30px -16px rgba(20,20,20,.14);}

  /* Tarjetas tipo "sticker": radios generosos + sombras suaves difusas */
  .promo-full-card{border:none; border-radius:20px; box-shadow:0 10px 22px -14px rgba(20,20,20,.18), 0 1px 2px rgba(20,20,20,.06);}
  .promo-card{border-radius:20px; box-shadow:0 14px 26px -14px rgba(20,20,20,.35);}
  .tier-card{border:none; border-radius:22px; box-shadow:0 10px 22px -14px rgba(20,20,20,.14);}
  .tier-card.current{background:#FFF9F8; box-shadow:0 14px 26px -12px rgba(225,38,21,.22);}
  .empty-state-card{border-radius:24px; box-shadow:0 8px 18px -12px rgba(20,20,20,.12);}
  .tier-strip{border-radius:22px;}
  .cc-card{border-radius:24px;}
  .qr-box{border:none; border-radius:24px; box-shadow:0 10px 22px -14px rgba(20,20,20,.14);}
  .notif-dropdown{border:none; border-radius:22px; box-shadow:0 20px 40px -14px rgba(20,20,20,.3);}
  .wallet-btn{border-radius:16px;}
  .promo-locked-banner{border:none; border-radius:16px; box-shadow:0 6px 14px -10px rgba(148,105,6,.3);}
  .security-note,.cc-note{border:none; border-radius:16px;}
  .guest-promo-banner,.cc-guest-hero,.stores-hero{border-radius:22px;}
  .otp-box{border-radius:14px;}

  /* Filas de tiendas como mini-cards flotantes */
  .store-item{margin:0 16px 10px; border-bottom:none; border-radius:18px; box-shadow:0 6px 16px -12px rgba(20,20,20,.16); background:#fff;}

  /* --- Insignias de icono a color (badges tipo "sticker") --- */
  :nth-child(4n+1 of .hist-item) .hist-icon{background:#FFF1C2; color:#8a6400;}
  :nth-child(4n+2 of .hist-item) .hist-icon{background:#FFE1DE; color:var(--s24-red-dark);}
  :nth-child(4n+3 of .hist-item) .hist-icon{background:#E2EEFF; color:var(--s24-info);}
  :nth-child(4n+4 of .hist-item) .hist-icon{background:#E5F7E0; color:var(--s24-success);}

  :nth-child(4n+1 of .notif-item) .ni-icon{background:#FFF1C2; color:#8a6400;}
  :nth-child(4n+2 of .notif-item) .ni-icon{background:#FFE1DE; color:var(--s24-red-dark);}
  :nth-child(4n+3 of .notif-item) .ni-icon{background:#E2EEFF; color:var(--s24-info);}
  :nth-child(4n+4 of .notif-item) .ni-icon{background:#FFF1C2; color:#8a6400;}

  :nth-child(6n+1 of .settings-row) .row-icon{background:#FFF1C2; color:#8a6400;}
  :nth-child(6n+2 of .settings-row) .row-icon{background:#FFE1DE; color:var(--s24-red-dark);}
  :nth-child(6n+3 of .settings-row) .row-icon{background:#E2EEFF; color:var(--s24-info);}
  :nth-child(6n+4 of .settings-row) .row-icon{background:#E5F7E0; color:var(--s24-success);}
  :nth-child(6n+5 of .settings-row) .row-icon{background:#F1E4FF; color:#7A2ECC;}
  :nth-child(6n+6 of .settings-row) .row-icon{background:#FFF1C2; color:#8a6400;}

  .empty-state-icon{background:#FFF1C2; color:#8a6400; box-shadow:none;}
  .cc-guest-icon{background:#FFE1DE; color:var(--s24-red-dark);}
  .otp-icon-wrap{background:#FFF1C2;}

  /* Boton central del bottom-nav, mas "pop" */
  .nav-item.center .nav-icon-circle{box-shadow:0 14px 22px -8px rgba(225,38,21,.5), 0 0 0 4px #fff;}

  /* Chips y filtros mas bold */
  .filter-tab,.promo-tab{font-weight:800;}

  /* ============================================================
     VISUAL REDESIGN v15 -- iteracion 2, mas fiel a la referencia
     (fondo gris para que las cards blancas floten, ticket con
     borde festoneado real, chips de color, tipografia mas bold)
     ============================================================ */

  .screen{background:var(--s24-grey-bg);}
  #screen-splash{background:radial-gradient(circle at 50% 30%, #262626 0%, #0c0c0c 70%) !important;}

  /* Elementos que antes usaban gris sobre blanco -> ahora blancos sobre gris */
  .back-btn{background:#fff; box-shadow:var(--shadow-xs);}
  .profile-tier{background:#fff; box-shadow:var(--shadow-xs);}
  .promo-tab{background:#fff; box-shadow:var(--shadow-xs);}
  .filter-tab{background:#fff; box-shadow:var(--shadow-xs);}
  .tr-avail{background:#fff; box-shadow:var(--shadow-xs);}
  .search-box{background:#fff; box-shadow:var(--shadow-xs);}
  .tier-strip{background:#fff;}
  .empty-state-card{background:#fff;}

  /* Filas de listas -> mini-cards flotantes blancas (igual que .store-item) */
  .hist-item{margin:0 16px 8px; padding:12px 14px; border-radius:16px; background:#fff; box-shadow:0 6px 14px -10px rgba(20,20,20,.14);}
  .settings-row{margin:0 16px 8px; padding:12px 14px; border-radius:16px; background:#fff; box-shadow:0 6px 14px -10px rgba(20,20,20,.12);}

  /* Sombra de color a juego bajo cada badge de icono ("efecto sticker") */
  :nth-child(4n+1 of .hist-item) .hist-icon{box-shadow:0 6px 12px -6px rgba(138,100,0,.45);}
  :nth-child(4n+2 of .hist-item) .hist-icon{box-shadow:0 6px 12px -6px rgba(162,30,18,.4);}
  :nth-child(4n+3 of .hist-item) .hist-icon{box-shadow:0 6px 12px -6px rgba(30,109,255,.35);}
  :nth-child(4n+4 of .hist-item) .hist-icon{box-shadow:0 6px 12px -6px rgba(24,134,5,.35);}

  /* Ticket real: borde festoneado (scalloped) + separador punteado, como cupon */
  .promo-full-card{position:relative; padding-top:18px; margin-top:16px;}
  .promo-full-card::before{
    content:''; position:absolute; left:14px; right:14px; top:-6px; height:13px;
    background-image:radial-gradient(circle at 8px 6px, var(--s24-grey-bg) 6px, transparent 6.5px);
    background-size:16px 13px; background-repeat:repeat-x; background-position:left top;
  }
  .promo-full-card .pf-icon{position:relative;}
  .promo-full-card .pf-icon::after{
    content:''; position:absolute; top:-14px; bottom:-14px; right:-7px; width:1px;
    background-image:linear-gradient(to bottom, transparent 0 3px, var(--s24-grey-line) 3px 7px);
    background-size:1px 8px; background-repeat:repeat-y;
  }

  /* Chip de puntos con "moneda", estilo referencia (VUI 178) */
  .bc-amount::before, .qr-box .qr-saldo b::before{
    content:''; display:inline-block; width:15px; height:15px; border-radius:50%;
    background:var(--s24-yellow); margin-right:7px; vertical-align:middle; box-shadow:0 0 0 2px rgba(255,255,255,.25) inset;
  }
  .hist-pts{padding:5px 10px; border-radius:100px;}
  .hist-pts.plus{background:var(--s24-success-bg);}
  .hist-pts.minus{background:var(--s24-red-light);}

  /* Botones de accion del balance card */
  .balance-card .bc-actions{margin-top:20px;}
  .bc-btn{border-radius:14px; font-weight:800;}

  /* Tipografia mas bold y confiada en titulos */
  .section-title h3,.empty-state-title,.cc-guest-title,.auth-title,.tiers-hero .big{font-weight:800;}
  #screen-home .home-greeting .name{font-size:16.5px;}

  /* ============================================================
     VISUAL REDESIGN v16 -- animaciones/transiciones + banners
     ampliables (lightbox). Solo interaccion/estilo, sin tocar flujo.
     ============================================================ */

  @keyframes screenFadeIn{
    from{opacity:0; transform:translateY(14px);}
    to{opacity:1; transform:translateY(0);}
  }
  .screen.active{animation:screenFadeIn .38s cubic-bezier(.22,.61,.36,1);}

  @keyframes itemFadeUp{
    from{opacity:0; transform:translateY(10px);}
    to{opacity:1; transform:translateY(0);}
  }
  .hist-item,.store-item,.settings-row,.promo-full-card,.promo-card{animation:itemFadeUp .4s ease both;}
  .hist-item:nth-child(1),.store-item:nth-child(1),.settings-row:nth-child(1),.promo-full-card:nth-child(1),.promo-card:nth-child(1){animation-delay:.02s;}
  .hist-item:nth-child(2),.store-item:nth-child(2),.settings-row:nth-child(2),.promo-full-card:nth-child(2),.promo-card:nth-child(2){animation-delay:.06s;}
  .hist-item:nth-child(3),.store-item:nth-child(3),.settings-row:nth-child(3),.promo-full-card:nth-child(3),.promo-card:nth-child(3){animation-delay:.10s;}
  .hist-item:nth-child(4),.store-item:nth-child(4),.settings-row:nth-child(4),.promo-full-card:nth-child(4),.promo-card:nth-child(4){animation-delay:.14s;}
  .hist-item:nth-child(5),.store-item:nth-child(5),.settings-row:nth-child(5),.promo-full-card:nth-child(5){animation-delay:.18s;}
  .hist-item:nth-child(6),.store-item:nth-child(6),.settings-row:nth-child(6),.promo-full-card:nth-child(6){animation-delay:.22s;}
  .hist-item:nth-child(7),.store-item:nth-child(7),.settings-row:nth-child(7){animation-delay:.26s;}
  .hist-item:nth-child(8),.store-item:nth-child(8),.settings-row:nth-child(8){animation-delay:.30s;}

  /* Micro-interacciones: feedback al presionar */
  .promo-full-card,.promo-card,.hist-item,.store-item,.settings-row,.tier-card,.qr-box,.empty-state-card{
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .promo-full-card:not(.locked):active,.promo-card:active,.hist-item:active,.store-item:active,.settings-row:active{transform:scale(.97);}
  .promo-card{cursor:pointer;}
  .promo-full-card:not(.locked){cursor:pointer;}
  .nav-icon-circle{transition:transform .2s ease;}
  .nav-item{transition:color .2s ease;}
  .icon-btn,.back-btn{transition:transform .15s ease;}
  .icon-btn:active,.back-btn:active{transform:scale(.9);}
  .tier-progress-fill{transition:width .8s cubic-bezier(.22,.61,.36,1);}
  .avatar,.profile-avatar{transition:transform .2s ease;}
  .home-greeting:active .avatar{transform:scale(.94);}

  /* Dropdown de notificaciones con transicion suave (antes era instantaneo) */
  .notif-dropdown{
    display:block; opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-10px) scale(.96); transform-origin:top right;
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .notif-dropdown.open{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1);
    transition:opacity .2s ease, transform .2s ease;
  }

  /* Banners con boton de "ampliar" */
  .guest-promo-banner,.cc-guest-hero,.stores-hero{position:relative;}
  .banner-expand-btn{
    position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%;
    background:rgba(20,20,20,.5); backdrop-filter:blur(3px); color:#fff; display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:transform .15s ease, background .15s ease; z-index:3;
  }
  .banner-expand-btn svg{width:16px; height:16px;}
  .banner-expand-btn:active{transform:scale(.88);}

  /* Lightbox para ampliar banners/promos */
  .banner-lightbox{
    position:absolute; inset:0; z-index:600; display:flex; align-items:center; justify-content:center; padding:26px;
    background:rgba(10,10,10,0); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .25s ease, background .25s ease, visibility 0s linear .25s;
  }
  .banner-lightbox.open{
    background:rgba(10,10,10,.72); opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity .25s ease, background .25s ease;
  }
  .banner-lightbox-card{
    position:relative; background:#fff; border-radius:24px; overflow:hidden; width:100%; max-height:100%;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.5); transform:scale(.9) translateY(14px);
    transition:transform .28s cubic-bezier(.22,.61,.36,1); display:flex; flex-direction:column;
  }
  .banner-lightbox.open .banner-lightbox-card{transform:scale(1) translateY(0);}
  .banner-lightbox-img-wrap{width:100%; max-height:56vh; overflow:hidden; background:var(--s24-grey-bg);}
  .banner-lightbox-img-wrap img{width:100%; display:block; object-fit:contain;}
  .banner-lightbox-body{padding:18px 20px 22px;}
  .banner-lightbox-body h4{font-family:var(--font-display); font-size:17px; margin:0 0 8px; font-weight:800;}
  .banner-lightbox-body p{font-size:13.5px; color:var(--s24-text-soft); line-height:1.55; margin:0;}
  .banner-lightbox-close{
    position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; background:rgba(20,20,20,.55);
    color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; backdrop-filter:blur(3px);
    transition:transform .15s ease;
  }
  .banner-lightbox-close:active{transform:scale(.88);}

  /* ============================================================
     VISUAL REDESIGN v17 -- Cash Card "wow": gradientes de marca,
     brillo animado, chip metalico y efecto tap disruptivo.
     ============================================================ */

  @keyframes ccCardIntro{
    0%{opacity:0; transform:perspective(900px) rotateY(-22deg) rotateX(5deg) scale(.9) translateY(16px);}
    100%{opacity:1; transform:perspective(900px) rotateY(0) rotateX(0) scale(1) translateY(0);}
  }
  @keyframes ccFloat{
    0%,100%{transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-5px) rotate(-.35deg);}
  }
  @keyframes ccSheen{
    0%{left:-60%; opacity:0;}
    6%{opacity:1;}
    32%{left:130%; opacity:0;}
    100%{left:130%; opacity:0;}
  }
  @keyframes ccTapPulse{
    0%{transform:scale(1); filter:brightness(1);}
    32%{transform:scale(1.035); filter:brightness(1.22);}
    100%{transform:scale(1); filter:brightness(1);}
  }

  .cc-card,.balance-card{
    background:
      radial-gradient(140% 160% at 100% 0%, rgba(255,212,0,.4) 0%, transparent 45%),
      radial-gradient(160% 180% at 0% 110%, rgba(225,38,21,.55) 0%, transparent 55%),
      repeating-linear-gradient(120deg, rgba(255,255,255,.05) 0 2px, transparent 2px 10px),
      linear-gradient(135deg,#1c1c1c 0%,#050505 65%) !important;
    box-shadow:0 25px 45px -18px rgba(225,38,21,.35), 0 10px 22px -10px rgba(0,0,0,.5), var(--shadow-xl) !important;
    cursor:pointer;
    animation:ccCardIntro .7s cubic-bezier(.22,.61,.36,1) both, ccFloat 5s ease-in-out .7s infinite;
  }
  .cc-card::before,.balance-card::before{
    content:''; position:absolute; top:-60%; left:-60%; width:55%; height:220%;
    background:linear-gradient(75deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
    transform:rotate(10deg); pointer-events:none;
    animation:ccSheen 4.2s ease-in-out .9s infinite;
  }
  .cc-card.cc-pulse,.balance-card.cc-pulse{animation:ccTapPulse .55s ease !important;}
  .balance-card.guest{
    animation:none !important;
    background:var(--s24-grey-bg) !important;
    box-shadow:0 18px 30px -16px rgba(20,20,20,.14) !important;
  }
  .balance-card.guest::before{display:none;}

  .cc-chip{
    background:linear-gradient(135deg,#f5dfa0,#caa356 45%,#8a6a2f 100%) !important;
    box-shadow:0 2px 4px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.6);
    position:relative; overflow:hidden;
  }
  .cc-chip::after{
    content:''; position:absolute; inset:0;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 2px, transparent 2px 5px);
  }
  .cc-number{text-shadow:0 1px 2px rgba(0,0,0,.4);}

  /* ============================================================
     VISUAL REDESIGN v18 -- fondo con gradiente del avatar en la
     vista interna de Cash Card, desde arriba hasta la mitad del qr-box
     ============================================================ */
  #screen-cashcard.cc-linked{
    background-image:linear-gradient(to bottom, #FFC62D 0%, rgba(255,198,45,0) 100%);
    background-repeat:no-repeat;
    background-size:100% 380px;
    background-position:top;
  }

  /* ============================================================
     VISUAL REDESIGN v19 -- Home: menos peso a "Ultimos movimientos",
     nuevas cards de invitacion a canjear puntos (tienda / e-commerce)
     ============================================================ */
  .redeem-cta-row{display:flex; gap:12px; padding:0 20px 4px;}
  .redeem-cta-card{
    flex:1; display:flex; flex-direction:column; gap:6px; padding:16px 14px; border-radius:18px; background:#fff;
    box-shadow:0 8px 18px -12px rgba(20,20,20,.16); position:relative; cursor:pointer; text-decoration:none; color:inherit;
    transition:transform .15s ease, box-shadow .15s ease; animation:itemFadeUp .4s ease both;
  }
  .redeem-cta-card:active{transform:scale(.97);}
  .redeem-cta-icon{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:2px;}
  .redeem-cta-icon.store{background:#FFF1C2; color:#8a6400;}
  .redeem-cta-icon.cart{background:#FFE1DE; color:var(--s24-red-dark);}
  .redeem-cta-card b{font-family:var(--font-display); font-size:13.5px; font-weight:800; line-height:1.25;}
  .redeem-cta-card span{font-size:11.5px; color:var(--s24-text-soft); line-height:1.4;}
  .redeem-cta-arrow{position:absolute; top:14px; right:14px; color:var(--s24-red); font-weight:800; font-size:15px;}

  /* ============================================================
     FEEDBACK CLIENTE v20 -- max 2 colores en recuadros de icono,
     tipografia Helvetica Neue, sin blur en tarjetas
     ============================================================ */
  :nth-child(2n+1 of .hist-item) .hist-icon{background:#FFF1C2; color:#8a6400; box-shadow:0 6px 12px -6px rgba(138,100,0,.45);}
  :nth-child(2n of .hist-item) .hist-icon{background:#FFE1DE; color:var(--s24-red-dark); box-shadow:0 6px 12px -6px rgba(162,30,18,.4);}
  :nth-child(2n+1 of .notif-item) .ni-icon{background:#FFF1C2; color:#8a6400;}
  :nth-child(2n of .notif-item) .ni-icon{background:#FFE1DE; color:var(--s24-red-dark);}
  :nth-child(2n+1 of .settings-row) .row-icon{background:#FFF1C2; color:#8a6400;}
  :nth-child(2n of .settings-row) .row-icon{background:#FFE1DE; color:var(--s24-red-dark);}

  /* --- Task 22/25: quitar blur rojo/amarillo de las tarjetas (legibilidad) --- */
  .cc-card,.balance-card{
    background:
      repeating-linear-gradient(120deg, rgba(255,255,255,.05) 0 2px, transparent 2px 10px),
      linear-gradient(135deg,#1c1c1c 0%,#050505 65%) !important;
  }

  /* --- Home: nuevo carrusel "Conoce nuestras promos" --- */
  .home-promo-banner-scroll{display:flex; gap:12px; padding:0 20px 4px; overflow-x:auto;}
  .home-promo-banner-item{flex-shrink:0; width:82%; border-radius:18px; overflow:hidden; box-shadow:0 10px 22px -14px rgba(20,20,20,.22); cursor:pointer;}
  .home-promo-banner-item img{width:100%; display:block;}

  /* ============================================================
     FEEDBACK CLIENTE v21 -- transicion al e-commerce: pantalla
     puente + vista simulada con retorno persistente
     ============================================================ */
  .ecom-topbar{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:#fff; border-bottom:1px solid var(--s24-grey-line); flex-shrink:0;}
  .ecom-logo img{height:20px; width:auto; display:block;}
  .ecom-cart{width:36px; height:36px; border-radius:50%; background:var(--s24-grey-bg); display:flex; align-items:center; justify-content:center;}
  .ecom-banner-note{margin:14px 20px; padding:12px 14px; background:#FFF8E8; border:1px solid #F5DFA0; border-radius:12px; font-size:12px; color:var(--s24-warning); line-height:1.5;}
  .ecom-product-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:4px 20px 20px;}
  .ecom-product{border:1px solid var(--s24-grey-line); border-radius:14px; padding:12px; background:#fff;}
  .ecom-product-thumb{height:70px; border-radius:10px; background:var(--s24-grey-bg); margin-bottom:8px;}
  .ecom-product b{font-size:12.5px; display:block;}
  .ecom-product span{font-size:12px; color:var(--s24-text-soft);}
  .ecom-return-btn{
    position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
    display:flex; align-items:center; gap:8px; background:var(--s24-black); color:#fff; font-weight:700; font-size:13px;
    padding:12px 20px; border-radius:100px; box-shadow:0 14px 26px -10px rgba(0,0,0,.5); cursor:pointer; z-index:80;
    transition:transform .15s ease;
  }
  .ecom-return-btn:active{transform:translateX(-50%) scale(.96);}

  /* ============================================================
     v22 -- Pantalla "Mis niveles" en dark mode con tratamiento
     de fondo tipo Cash Card + progreso visible al siguiente nivel
     ============================================================ */
  #screen-niveles{
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(255,198,45,.20) 0%, transparent 55%),
      radial-gradient(120% 90% at 0% 8%, rgba(225,38,21,.28) 0%, transparent 55%),
      repeating-linear-gradient(120deg, rgba(255,255,255,.035) 0 2px, transparent 2px 10px),
      linear-gradient(180deg,#1c1c1c 0%,#0a0a0a 60%,#050505 100%) !important;
    color:#fff;
  }
  #screen-niveles .topbar h1{color:#fff;}
  #screen-niveles .back-btn{background:rgba(255,255,255,.12); color:#fff; box-shadow:none;}

  #screen-niveles .tiers-hero{padding:10px 20px 6px;}
  #screen-niveles .tiers-hero .cur{color:rgba(255,255,255,.62);}
  #screen-niveles .tiers-hero .big{color:#fff; font-size:26px;}
  #screen-niveles .tiers-hero .big .icon-svg{color:var(--tier-plata);}

  .tiers-progress{margin:16px auto 4px; max-width:320px; text-align:left;}
  .tiers-progress-head{display:flex; justify-content:space-between; font-size:11px; color:rgba(255,255,255,.6); margin-bottom:7px; font-weight:600;}
  .tiers-progress-bg{height:9px; border-radius:10px; background:rgba(255,255,255,.14); overflow:hidden;}
  .tiers-progress-fill{
    height:100%; border-radius:10px;
    background:linear-gradient(90deg, var(--tier-plata), #FFC62D 70%, var(--tier-oro));
    box-shadow:0 0 14px -2px rgba(255,198,45,.7);
    transition:width .8s cubic-bezier(.22,.61,.36,1);
  }
  .tiers-progress-note{margin-top:9px; font-size:12.5px; color:rgba(255,255,255,.75); text-align:center;}
  .tiers-progress-note b{color:#FFC62D;}

  #screen-niveles .tier-node span{color:rgba(255,255,255,.55);}
  #screen-niveles .tier-node.on span{color:#fff;}
  #screen-niveles .tier-node .circ{border-color:rgba(255,255,255,.14);}
  #screen-niveles .tier-line{background:rgba(255,255,255,.16);}
  #screen-niveles .tier-line.filled{background:linear-gradient(90deg,var(--tier-bronce),var(--tier-plata));}

  /* Cards de nivel: vidrio oscuro en vez de blanco */
  #screen-niveles .tier-card{
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
    box-shadow:0 14px 28px -18px rgba(0,0,0,.8); backdrop-filter:blur(6px);
  }
  #screen-niveles .tier-card.current{
    background:rgba(255,198,45,.10); border-color:rgba(255,198,45,.38);
    box-shadow:0 16px 30px -16px rgba(255,198,45,.28);
  }
  #screen-niveles .tier-card-top b{color:#fff;}
  #screen-niveles .tier-card-top span{color:rgba(255,255,255,.55);}
  #screen-niveles .tier-perks{color:rgba(255,255,255,.72);}
  #screen-niveles .tier-perks li::before{color:#5FD35A;}
  #screen-niveles .tier-icon{box-shadow:0 6px 14px -6px rgba(0,0,0,.6);}

  /* ============================================================
     v23 -- "Mis niveles": anillo de progreso ludico (reemplaza
     stepper + barra) y carrusel horizontal de niveles
     ============================================================ */
  #screen-niveles .tiers-hero .big{font-size:26px; margin:4px 0 6px;}

  .tier-ring-wrap{position:relative; width:212px; height:212px; margin:14px auto 4px;}
  .tier-ring{width:100%; height:100%; transform:rotate(-90deg); display:block;}
  .tier-ring-track{fill:none; stroke:rgba(255,255,255,.14); stroke-width:15;}
  .tier-ring-fill{
    fill:none; stroke:url(#tierRingGrad); stroke-width:15; stroke-linecap:round;
    stroke-dasharray:540.4; stroke-dashoffset:540.4;
    filter:drop-shadow(0 0 8px rgba(255,198,45,.55));
    animation:tierRingGrow 1.15s cubic-bezier(.22,.61,.36,1) .25s forwards;
  }
  @keyframes tierRingGrow{to{stroke-dashoffset:227;}} /* 58% de avance */

  .tier-ring-center{
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; gap:1px;
  }
  .tier-ring-center .trc-label{font-size:11px; color:rgba(255,255,255,.55); font-weight:600;}
  .tier-ring-center .trc-value{font-family:var(--font-display); font-size:46px; font-weight:800; color:#fff; line-height:1.05; letter-spacing:-1px;}
  .tier-ring-center .trc-unit{font-size:12px; color:rgba(255,255,255,.6); font-weight:600;}

  .tier-ring-goal{
    font-family:var(--font-display); font-size:30px; font-weight:800; color:#FFC62D;
    text-align:center; margin-top:14px; letter-spacing:-.5px;
  }
  .tier-ring-note{text-align:center; font-size:13px; color:rgba(255,255,255,.72); line-height:1.5; margin-top:4px;}
  .tier-ring-note b{color:#fff;}

  /* Carrusel horizontal de niveles */
  .tier-card-scroll{display:flex; gap:12px; overflow-x:auto; padding:18px 20px 8px; scroll-snap-type:x mandatory;}
  .tier-card-scroll::-webkit-scrollbar{display:none;}
  .tier-card-scroll{-ms-overflow-style:none; scrollbar-width:none;}
  .tier-card-scroll .tier-card{
    flex:0 0 78%; margin:0; scroll-snap-align:center; display:flex; flex-direction:column;
  }

  /* ============================================================
     v24 -- Tab bars con swipe propio: solo la fila de tabs se
     desplaza, el layout de la pantalla queda fijo
     ============================================================ */
  .screen, .screen-scroll{overflow-x:hidden;}

  .filter-tabs, .promo-tabs{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
    scrollbar-width:none; -ms-overflow-style:none;
    padding-right:20px; /* aire al final del scroll */
  }
  .filter-tabs::-webkit-scrollbar, .promo-tabs::-webkit-scrollbar{display:none;}
  .filter-tab, .promo-tab{flex:0 0 auto; white-space:nowrap; scroll-snap-align:start;}
  .promo-tab{min-width:132px;}

  /* ============================================================
     v25 -- Flujo funcional "Agregar al Wallet" (bottom sheet)
     ============================================================ */
  .wallet-btn{cursor:pointer; transition:transform .15s ease, opacity .2s ease;}
  .wallet-btn:active{transform:scale(.96);}
  .wallet-btn.added{opacity:.75; pointer-events:none;}

  .wallet-sheet-overlay{
    position:absolute; inset:0; z-index:650; display:flex; align-items:flex-end; justify-content:center;
    background:rgba(10,10,10,0); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .25s ease, background .25s ease, visibility 0s linear .25s;
  }
  .wallet-sheet-overlay.open{
    background:rgba(10,10,10,.66); opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity .25s ease, background .25s ease;
  }
  .wallet-sheet{
    width:100%; background:#fff; border-radius:26px 26px 0 0; padding:10px 22px 26px;
    box-shadow:0 -18px 40px -14px rgba(0,0,0,.4); transform:translateY(100%);
    transition:transform .32s cubic-bezier(.22,.61,.36,1); max-height:92%; overflow-y:auto;
  }
  .wallet-sheet::-webkit-scrollbar{display:none;}
  .wallet-sheet-overlay.open .wallet-sheet{transform:translateY(0);}

  .ws-grabber{width:42px; height:4px; border-radius:10px; background:var(--s24-grey-mid); margin:0 auto 16px;}
  .ws-title{font-family:var(--font-display); font-size:18px; font-weight:800; margin-bottom:6px;}
  .ws-sub{font-size:13px; color:var(--s24-text-soft); line-height:1.5; margin-bottom:18px;}

  /* Mini preview del pase */
  .ws-pass{
    border-radius:16px; padding:16px; color:#fff; margin-bottom:16px;
    background:repeating-linear-gradient(120deg, rgba(255,255,255,.05) 0 2px, transparent 2px 10px), linear-gradient(135deg,#1c1c1c 0%,#050505 65%);
    box-shadow:0 14px 26px -14px rgba(0,0,0,.55);
  }
  .ws-pass-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
  .ws-pass-logo img{height:15px; width:auto; display:block;}
  .ws-pass-kind{font-size:9px; letter-spacing:.12em; color:#9a9a9a; font-weight:700;}
  .ws-pass-name{font-size:12px; font-weight:700; letter-spacing:.04em;}
  .ws-pass-num{font-size:12px; color:#bdbdbd; letter-spacing:.12em; margin-top:2px;}
  .ws-pass-code{
    height:26px; margin:12px 0 8px; border-radius:4px;
    background:repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 9px);
    opacity:.9;
  }
  .ws-pass-pts{font-size:11.5px; color:#FFC62D; font-weight:700;}

  .ws-perks{list-style:none; margin:0 0 20px; padding:0; font-size:12.5px; color:var(--s24-text-soft);}
  .ws-perks li{padding:5px 0 5px 22px; position:relative;}
  .ws-perks li::before{content:"✓"; position:absolute; left:0; color:var(--s24-success); font-weight:800;}

  .ws-spinner{
    width:44px; height:44px; margin:14px auto 18px; border-radius:50%;
    border:3.5px solid var(--s24-grey-line); border-top-color:var(--s24-red);
    animation:wsSpin .8s linear infinite;
  }
  @keyframes wsSpin{to{transform:rotate(360deg);}}

  .ws-check{
    width:66px; height:66px; margin:8px auto 18px; border-radius:50%;
    background:var(--s24-success-bg); color:var(--s24-success);
    display:flex; align-items:center; justify-content:center;
    animation:wsPop .45s cubic-bezier(.22,1.2,.36,1) both;
  }
  @keyframes wsPop{from{transform:scale(.4); opacity:0;} to{transform:scale(1); opacity:1;}}

  /* ============================================================
     v26 -- E-commerce simulado: grilla con productos reales y
     boton flotante realmente centrado (el keyframe anterior
     sobrescribia el translateX(-50%) del centrado)
     ============================================================ */
  .ecom-product-thumb{
    height:96px; border-radius:10px; background:var(--s24-product-bg);
    margin-bottom:8px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  }
  .ecom-product-thumb img{width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box; display:block;}
  .ecom-product{display:flex; flex-direction:column;}
  .ecom-product b{font-size:12.5px; line-height:1.3;}
  .ecom-product span{font-size:11.5px; color:var(--s24-text-soft);}
  .ecom-price{margin-top:6px; font-size:13.5px; font-weight:800; color:var(--s24-red);}

  .ecom-return-btn{
    animation:ecomBtnIn .45s ease both;
  }
  @keyframes ecomBtnIn{
    from{opacity:0; transform:translateX(-50%) translateY(14px);}
    to{opacity:1; transform:translateX(-50%) translateY(0);}
  }

  /* ============================================================
     v27 -- Ancla de URL por vista (para exportar/replicar en Figma)
     ============================================================ */
  .dev-dock button{display:flex; flex-direction:column; align-items:flex-start; gap:1px;}
  .dock-anchor{font-style:normal; font-size:9px; opacity:.5; font-weight:600; letter-spacing:.02em;}
  .dev-dock button.active .dock-anchor{opacity:.8;}

/* ============================================================
   ITERACIÓN S24 — componentes nuevos
   (onboarding, tienda in-app, carrito, checkout, canje, puntos)
   ============================================================ */

/* ---------- Pantalla de bienvenida (dark) ---------- */
#screen-bienvenida{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,198,45,.20) 0%, transparent 55%),
    radial-gradient(120% 90% at 0% 8%, rgba(225,38,21,.28) 0%, transparent 55%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.035) 0 2px, transparent 2px 10px),
    linear-gradient(180deg,#1c1c1c 0%,#0a0a0a 60%,#050505 100%) !important;
  color:#fff; justify-content:center;
}
.wel-top{padding:0 28px 0; text-align:center;}
.wel-logo img{height:40px; width:auto; margin:0 auto 26px; display:block;}
.wel-title{font-family:var(--font-display); font-size:26px; font-weight:800; line-height:1.25; margin-bottom:10px;}
.wel-sub{font-size:14px; color:rgba(255,255,255,.68); line-height:1.6;}
.wel-actions{padding:34px 24px 0; display:flex; flex-direction:column; gap:12px;}
.wel-btn{
  display:flex; align-items:center; gap:14px; text-align:left; padding:18px 18px; border-radius:20px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.07); color:#fff; cursor:pointer;
  transition:transform .15s ease, background .2s ease;
}
.wel-btn:active{transform:scale(.97);}
.wel-btn.primary{background:var(--s24-red); border-color:transparent; box-shadow:0 16px 28px -12px rgba(225,38,21,.6);}
.wel-btn-ico{
  width:46px; height:46px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12);
}
.wel-btn-ico .icon-svg{width:22px; height:22px;}
.wel-btn b{display:block; font-size:15px; font-weight:800;}
.wel-btn span{display:block; font-size:11.5px; opacity:.75; margin-top:2px; line-height:1.4;}
.wel-skip{text-align:center; font-size:13px; color:rgba(255,255,255,.6); padding:2px 0 0; cursor:pointer;}
.wel-skip b{color:#fff;}

/* ---------- Chip de puntos (siempre visible) ---------- */
.pts-chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--s24-black); color:#fff;
  padding:7px 13px; border-radius:100px; font-size:12.5px; font-weight:800; cursor:pointer;
}
.pts-chip .coin{width:13px; height:13px; border-radius:50%; background:var(--s24-yellow); flex-shrink:0;}
.pts-chip.light{background:rgba(255,255,255,.16); backdrop-filter:blur(3px);}

/* ---------- Home rebalanceado ---------- */
.hero-actions{display:flex; gap:10px; margin:14px 20px 0;}
.hero-action{
  flex:1; display:flex; flex-direction:column; gap:7px; padding:15px 14px; border-radius:18px; background:#fff;
  box-shadow:0 8px 18px -12px rgba(20,20,20,.18); cursor:pointer; text-decoration:none; color:inherit;
  transition:transform .15s ease;
}
.hero-action:active{transform:scale(.97);}
.hero-action .ha-ico{width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;}
.hero-action.shop .ha-ico{background:var(--s24-red); color:#fff;}
.hero-action.redeem .ha-ico{background:#FFF1C2; color:#8a6400;}
.hero-action b{font-size:13.5px; font-weight:800; line-height:1.25;}
.hero-action span{font-size:11px; color:var(--s24-text-soft); line-height:1.4;}

.cat-scroll{display:flex; gap:10px; padding:2px 20px 6px; overflow-x:auto; scrollbar-width:none;}
.cat-scroll::-webkit-scrollbar{display:none;}
.cat-item{flex:0 0 auto; width:74px; text-align:center; cursor:pointer;}
.cat-item .cat-ico{
  width:60px; height:60px; border-radius:20px; background:#fff; margin:0 auto 6px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px -10px rgba(20,20,20,.25);
}
.cat-item .cat-ico .icon-svg{width:26px; height:26px; color:var(--s24-red);}
.cat-item span{font-size:10.5px; font-weight:700; color:var(--s24-text); line-height:1.3; display:block;}

.value-strip{
  margin:14px 20px 0; padding:13px 16px; border-radius:16px; background:#fff; display:flex; align-items:center; gap:12px;
  box-shadow:0 8px 18px -13px rgba(20,20,20,.18); cursor:pointer;
}
.value-strip .vs-ico{width:36px; height:36px; border-radius:11px; background:#FFF1C2; color:#8a6400;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.value-strip b{display:block; font-size:12.5px; font-weight:800;}
.value-strip span{display:block; font-size:11px; color:var(--s24-text-soft); margin-top:2px; line-height:1.4;}
.value-strip .vs-arrow{margin-left:auto; color:var(--s24-red); font-weight:800;}

/* ---------- Tienda in-app ---------- */
.shop-header{
  padding:16px 20px 14px; background:var(--s24-red); color:#fff; flex-shrink:0;
  border-radius:0 0 22px 22px;
}
.shop-header-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;}
.shop-header-top .sh-back{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.shop-header h1{font-family:var(--font-display); font-size:17px; font-weight:800; margin:0;}
.shop-search{display:flex; align-items:center; gap:8px; background:#fff; border-radius:100px; padding:11px 18px;}
.shop-search input{background:transparent; border:none; outline:none; font-size:13.5px; flex:1; font-family:inherit;}
.shop-search .icon-svg{color:var(--s24-text-soft);}

.ship-note{
  display:flex; gap:10px; align-items:flex-start; margin:14px 20px 0; padding:12px 14px; border-radius:14px;
  background:var(--s24-success-bg); border:1px solid #CDEFD8;
}
.ship-note .icon-svg{color:var(--s24-success); flex-shrink:0; margin-top:1px;}
.ship-note b{font-size:12px; display:block; color:var(--s24-success);}
.ship-note span{font-size:11.5px; color:var(--s24-text-soft); line-height:1.45;}

.chip-row{display:flex; gap:8px; padding:14px 20px 6px; overflow-x:auto; scrollbar-width:none;}
.chip-row::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto; padding:8px 16px; border-radius:100px; font-size:12.5px; font-weight:800; background:#fff;
  color:var(--s24-text-soft); box-shadow:var(--shadow-xs); white-space:nowrap; cursor:pointer;}
.chip.on{background:var(--s24-red); color:#fff;}

.prod-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px 20px 20px;}
.prod-card{background:#fff; border-radius:16px; padding:12px; display:flex; flex-direction:column;
  box-shadow:0 8px 18px -13px rgba(20,20,20,.2); cursor:pointer; transition:transform .15s ease;}
.prod-card:active{transform:scale(.97);}
.prod-thumb{height:96px; border-radius:11px; background:var(--s24-product-bg); overflow:hidden;
  display:flex; align-items:center; justify-content:center; margin-bottom:9px; position:relative;}
.prod-thumb img{width:100%; height:100%; object-fit:contain; padding:7px; box-sizing:border-box;}
.prod-card b{font-size:12.5px; line-height:1.3; font-weight:700;}
.prod-card .p-size{font-size:11px; color:var(--s24-text-soft); margin-top:1px;}
.prod-price-row{display:flex; align-items:baseline; justify-content:space-between; margin-top:8px; gap:6px;}
.prod-price{font-size:14.5px; font-weight:800; color:var(--s24-text);}
.prod-pts{font-size:10.5px; font-weight:800; color:#8a6400; background:#FFF1C2; padding:3px 7px; border-radius:100px;
  white-space:nowrap;}
.prod-add{
  margin-top:9px; width:100%; padding:9px; border-radius:100px; border:none; background:var(--s24-red); color:#fff;
  font-weight:800; font-size:12px; cursor:pointer;
}
.prod-add.added{background:var(--s24-success);}

/* ---------- Detalle de producto ---------- */
.pd-hero{background:var(--s24-product-bg); padding:22px; display:flex; align-items:center; justify-content:center;}
.pd-hero img{width:190px; height:190px; object-fit:contain;}
.pd-body{padding:20px 20px 0;}
.pd-body h2{font-family:var(--font-display); font-size:19px; font-weight:800; margin:0 0 3px;}
.pd-size{font-size:12.5px; color:var(--s24-text-soft);}
.pd-price{font-family:var(--font-display); font-size:27px; font-weight:800; margin:12px 0 4px;}
.pd-earn{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:#8a6400;
  background:#FFF1C2; padding:6px 12px; border-radius:100px;}
.qty-row{display:flex; align-items:center; gap:16px; margin:20px 0;}
.qty-btn{width:38px; height:38px; border-radius:50%; border:1.5px solid var(--s24-grey-line); background:#fff;
  font-size:19px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.qty-val{font-size:17px; font-weight:800; min-width:26px; text-align:center;}

/* ---------- Carrito ---------- */
.cart-item{display:flex; gap:12px; align-items:center; margin:0 16px 10px; padding:12px 14px; border-radius:16px;
  background:#fff; box-shadow:0 6px 14px -11px rgba(20,20,20,.2);}
.cart-thumb{width:52px; height:52px; border-radius:12px; background:var(--s24-product-bg); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;}
.cart-thumb img{width:100%; height:100%; object-fit:contain; padding:5px; box-sizing:border-box;}
.cart-info{flex:1; min-width:0;}
.cart-info b{font-size:13px; display:block; line-height:1.3;}
.cart-info span{font-size:11.5px; color:var(--s24-text-soft);}
.cart-qty{display:flex; align-items:center; gap:9px;}
.cart-qty button{width:26px; height:26px; border-radius:50%; border:1.5px solid var(--s24-grey-line);
  background:#fff; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.cart-qty span{font-size:13px; font-weight:800; min-width:16px; text-align:center;}

.summary-card{margin:14px 20px; padding:16px 18px; border-radius:18px; background:#fff;
  box-shadow:0 8px 18px -13px rgba(20,20,20,.2);}
.sum-row{display:flex; justify-content:space-between; font-size:13px; margin-bottom:9px; color:var(--s24-text-soft);}
.sum-row b{color:var(--s24-text); font-weight:700;}
.sum-row.total{font-size:16px; color:var(--s24-text); font-weight:800; padding-top:11px;
  border-top:1px solid var(--s24-grey-line); margin-bottom:0;}
.sum-row.total b{font-family:var(--font-display); font-size:19px;}
.sum-row.earn{color:#8a6400;}
.sum-row.earn b{color:#8a6400;}

.sticky-cta{
  position:absolute; left:0; right:0; bottom:0; padding:14px 20px 20px; background:#fff;
  box-shadow:0 -10px 24px -16px rgba(20,20,20,.4); z-index:70;
}
.sticky-cta .btn{margin:0;}
.sticky-cta-info{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:11px;}
.sticky-cta-info span{font-size:12px; color:var(--s24-text-soft);}
.sticky-cta-info b{font-family:var(--font-display); font-size:19px; font-weight:800;}

/* ---------- Entrega / pago ---------- */
.opt-card{
  display:flex; gap:12px; align-items:flex-start; margin:0 20px 11px; padding:15px 16px; border-radius:16px;
  background:#fff; border:1.5px solid var(--s24-grey-line); cursor:pointer; transition:border-color .2s ease;
}
.opt-card.on{border-color:var(--s24-red); background:#FFF9F8;}
.opt-radio{width:20px; height:20px; border-radius:50%; border:2px solid var(--s24-grey-mid); flex-shrink:0;
  margin-top:2px; display:flex; align-items:center; justify-content:center;}
.opt-card.on .opt-radio{border-color:var(--s24-red);}
.opt-card.on .opt-radio::after{content:''; width:10px; height:10px; border-radius:50%; background:var(--s24-red);}
.opt-body{flex:1;}
.opt-body b{font-size:13.5px; display:block;}
.opt-body span{font-size:11.5px; color:var(--s24-text-soft); display:block; margin-top:2px; line-height:1.45;}
.opt-price{font-size:13px; font-weight:800; color:var(--s24-text); white-space:nowrap;}
.opt-price.free{color:var(--s24-success);}

.pts-slider-card{margin:0 20px 14px; padding:16px 18px; border-radius:18px; background:#fff;
  box-shadow:0 8px 18px -13px rgba(20,20,20,.2);}
.pts-slider-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;}
.pts-slider-head b{font-size:13.5px; font-weight:800;}
.pts-slider-head .pv{font-size:13.5px; font-weight:800; color:var(--s24-red);}
.pts-slider-card .hint{font-size:11.5px; color:var(--s24-text-soft); margin-bottom:12px; line-height:1.45;}
input[type=range].pts-range{width:100%; accent-color:var(--s24-red); height:22px;}
.pts-range-labels{display:flex; justify-content:space-between; font-size:10.5px; color:var(--s24-text-soft); margin-top:-2px;}

/* ---------- Confirmación / seguimiento ---------- */
.order-hero{text-align:center; padding:26px 24px 6px;}
.order-check{width:78px; height:78px; margin:0 auto 18px; border-radius:50%; background:var(--s24-success-bg);
  color:var(--s24-success); display:flex; align-items:center; justify-content:center;
  animation:wsPop .45s cubic-bezier(.22,1.2,.36,1) both;}
.order-hero h2{font-family:var(--font-display); font-size:21px; font-weight:800; margin:0 0 8px;}
.order-hero p{font-size:13.5px; color:var(--s24-text-soft); line-height:1.55; margin:0;}
.earn-badge{display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:11px 18px; border-radius:100px;
  background:#FFF1C2; color:#8a6400; font-weight:800; font-size:14px;}

.track-list{margin:18px 20px 0; padding:18px; border-radius:18px; background:#fff;
  box-shadow:0 8px 18px -13px rgba(20,20,20,.2);}
.track-step{display:flex; gap:13px; position:relative; padding-bottom:20px;}
.track-step:last-child{padding-bottom:0;}
.track-dot{width:24px; height:24px; border-radius:50%; background:var(--s24-grey-line); flex-shrink:0; z-index:2;
  display:flex; align-items:center; justify-content:center; color:#fff;}
.track-step.done .track-dot{background:var(--s24-success);}
.track-step.now .track-dot{background:var(--s24-red); box-shadow:0 0 0 5px rgba(225,38,21,.16);}
.track-step::before{content:''; position:absolute; left:11.5px; top:24px; bottom:0; width:2px; background:var(--s24-grey-line);}
.track-step:last-child::before{display:none;}
.track-step.done::before{background:var(--s24-success);}
.track-body b{font-size:13.5px; display:block;}
.track-body span{font-size:11.5px; color:var(--s24-text-soft); display:block; margin-top:2px;}

/* ---------- Canje de premios ---------- */
.reward-card{
  display:flex; gap:13px; align-items:center; margin:0 20px 11px; padding:13px 14px; border-radius:18px;
  background:#fff; box-shadow:0 8px 18px -13px rgba(20,20,20,.2); cursor:pointer; transition:transform .15s ease;
}
.reward-card:active{transform:scale(.97);}
.reward-thumb{width:58px; height:58px; border-radius:14px; background:var(--s24-product-bg); flex-shrink:0;
  overflow:hidden; display:flex; align-items:center; justify-content:center;}
.reward-thumb img{width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box;}
.reward-body{flex:1; min-width:0;}
.reward-body b{font-size:13.5px; display:block; line-height:1.3;}
.reward-body span{font-size:11.5px; color:var(--s24-text-soft); display:block; margin-top:2px;}
.reward-cost{font-size:12.5px; font-weight:800; color:#8a6400; background:#FFF1C2; padding:6px 11px;
  border-radius:100px; white-space:nowrap;}
.reward-card.locked{opacity:.5;}
.reward-card.locked .reward-cost{background:var(--s24-grey-bg); color:var(--s24-text-soft);}

/* ---------- Explicador de puntos ---------- */
.pts-hero{
  padding:26px 24px 24px; text-align:center; color:#fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,198,45,.22) 0%, transparent 55%),
    radial-gradient(120% 90% at 0% 8%, rgba(225,38,21,.3) 0%, transparent 55%),
    linear-gradient(180deg,#1c1c1c 0%,#0a0a0a 100%);
  border-radius:0 0 26px 26px;
}
.pts-hero .big{font-family:var(--font-display); font-size:34px; font-weight:800; letter-spacing:-.5px;}
.pts-hero .big em{font-style:normal; color:#FFC62D;}
.pts-hero p{font-size:13.5px; color:rgba(255,255,255,.7); margin:8px 0 0; line-height:1.55;}

.how-step{display:flex; gap:14px; margin:0 20px 12px; padding:15px 16px; border-radius:18px; background:#fff;
  box-shadow:0 8px 18px -13px rgba(20,20,20,.18);}
.how-num{width:32px; height:32px; border-radius:50%; background:var(--s24-red); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;}
.how-body b{font-size:13.5px; display:block; margin-bottom:3px;}
.how-body span{font-size:12px; color:var(--s24-text-soft); line-height:1.5; display:block;}

.faq-item{margin:0 20px 10px; padding:15px 16px; border-radius:16px; background:#fff;
  box-shadow:0 6px 14px -11px rgba(20,20,20,.16); cursor:pointer;}
.faq-q{display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13px; font-weight:700; color:var(--s24-text);}
.faq-q .faq-caret{color:var(--s24-red); font-weight:800; transition:transform .2s ease; flex-shrink:0;}
.faq-item.open .faq-caret{transform:rotate(180deg);}
.faq-a{font-size:12.5px; color:var(--s24-text-soft); line-height:1.55; max-height:0; overflow:hidden;
  transition:max-height .28s ease, margin-top .28s ease;}
.faq-item.open .faq-a{max-height:260px; margin-top:9px;}

/* ---------- Badge del carrito en el nav ---------- */
.nav-item{position:relative;}
.cart-badge{
  position:absolute; top:-2px; right:50%; transform:translateX(20px); min-width:17px; height:17px; padding:0 5px;
  border-radius:100px; background:var(--s24-red); color:#fff; font-size:9.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; border:1.5px solid #fff;
}

/* ============================================================
   Patrones tomados del benchmark Spin Premia (Oxxo)
   ============================================================ */

/* Chip de puntos en topbar: puntos + su valor en Q siempre visibles */
.topbar .pts-chip{font-size:11.5px; padding:7px 12px;}
.topbar h1{margin-right:6px;}

/* "Dónde usar tus puntos" (patrón: Marcas participantes / Dónde usar Spin Premia) */
.use-card{
  display:flex; align-items:center; gap:13px; margin:0 20px 10px; padding:14px 16px; border-radius:18px;
  background:#fff; box-shadow:0 8px 18px -13px rgba(20,20,20,.2); cursor:pointer;
  transition:transform .15s ease;
}
.use-card:active{transform:scale(.97);}
.use-ico{width:42px; height:42px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.use-ico.red{background:#FFE1DE; color:var(--s24-red-dark);}
.use-ico.yellow{background:#FFF1C2; color:#8a6400;}
.use-body{flex:1; min-width:0;}
.use-body b{display:block; font-size:13.5px; font-weight:800; line-height:1.3;}
.use-body span{display:block; font-size:11.5px; color:var(--s24-text-soft); margin-top:2px; line-height:1.45;}
.use-arrow{color:var(--s24-text-soft); font-size:20px; font-weight:700; flex-shrink:0;}

/* Resumen mensual de puntos (patrón: Resumen de octubre — Ganaste / Ahorraste) */
.month-card{
  margin:16px 20px 4px; padding:16px 18px; border-radius:20px; background:#fff;
  box-shadow:0 10px 22px -14px rgba(20,20,20,.2);
}
.month-title{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--s24-text-soft); margin-bottom:12px;}
.month-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--s24-grey-line);}
.month-row:first-of-type{border-top:none; padding-top:0;}
.month-ico{width:38px; height:38px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.month-ico.green{background:var(--s24-success-bg); color:var(--s24-success);}
.month-ico.red{background:#FFE1DE; color:var(--s24-red-dark);}
.month-body{flex:1;}
.month-body b{display:block; font-size:13.5px; font-weight:800;}
.month-body span{display:block; font-size:11.5px; color:var(--s24-text-soft); margin-top:1px;}
.month-val{text-align:right;}
.month-val b{display:block; font-size:14.5px; font-weight:800; font-family:var(--font-display);}
.month-val span{display:block; font-size:10.5px; color:var(--s24-text-soft); background:var(--s24-grey-bg);
  padding:2px 8px; border-radius:100px; margin-top:3px;}

/* Actividad con pestañas (patrón: Tus puntos / Transacciones) */
.act-tabs{display:flex; gap:8px; padding:6px 20px 12px;}
.act-tab{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 8px;
  border-radius:100px; font-size:12.5px; font-weight:800; background:#fff; color:var(--s24-text-soft);
  box-shadow:var(--shadow-xs); cursor:pointer; transition:background .2s ease, color .2s ease;
}
.act-tab .icon-svg{width:15px; height:15px;}
.act-tab.on{background:var(--s24-red); color:#fff;}

/* Text button (enlace de texto bajo la tarjeta) */
.text-btn{
  display:block; width:100%; text-align:center; background:none; border:none;
  font-family:var(--font-body); font-size:13px; font-weight:700; color:var(--s24-red);
  padding:14px 8px 2px; cursor:pointer;
}
.text-btn:active{opacity:.6;}

/* Chip de nivel dentro de la Cash Card (esquina superior derecha) */
.cc-tier{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px 6px 11px; border-radius:100px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(4px);
  font-size:11px; font-weight:800; color:#fff; cursor:pointer; white-space:nowrap;
  transition:background .2s ease, transform .15s ease;
}
.cc-tier:hover{background:rgba(255,255,255,.22);}
.cc-tier:active{transform:scale(.95);}
.cc-tier .dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.cc-tier-arrow{font-size:15px; line-height:1; opacity:.7; margin-left:1px;}

/* Caret del text button "Ver más" */
.text-btn .tb-caret{display:inline-block; font-size:11px; transition:transform .2s ease; margin-left:2px;}
.text-btn.open .tb-caret{transform:rotate(180deg);}

/* Carrusel "En 3 pasos" */
.how-scroll{
  display:flex; gap:12px; padding:0 20px 4px; overflow-x:auto;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
}
.how-scroll::-webkit-scrollbar{display:none;}
.how-scroll .how-step{
  flex:0 0 82%; margin:0; scroll-snap-align:center; align-items:flex-start;
}
.how-dots{display:flex; gap:6px; justify-content:center; padding:12px 0 2px;}
.how-dots span{width:7px; height:7px; border-radius:50%; background:var(--s24-grey-mid); transition:width .25s ease, background .25s ease;}
.how-dots span.on{width:20px; border-radius:6px; background:var(--s24-red);}

/* Selector "¿Cómo quieres canjear?" */
.choose-title{font-family:var(--font-display); font-size:21px; font-weight:800; margin-bottom:7px;}
.choose-sub{font-size:13.5px; color:var(--s24-text-soft); line-height:1.55;}
.choose-actions{display:flex; flex-direction:column; gap:12px; padding:24px 20px 0;}
.choose-btn{
  display:flex; align-items:center; gap:14px; text-align:left; padding:18px 18px; border-radius:20px;
  background:#fff; border:1.5px solid var(--s24-grey-line); cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease;
}
.choose-btn:active{transform:scale(.97);}
.choose-btn.primary{background:var(--s24-red); border-color:transparent; color:#fff;
  box-shadow:0 16px 28px -14px rgba(225,38,21,.55);}
.choose-ico{width:48px; height:48px; border-radius:15px; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; background:var(--s24-grey-bg); color:var(--s24-red);}
.choose-btn.primary .choose-ico{background:rgba(255,255,255,.18); color:#fff;}
.choose-ico .icon-svg{width:23px; height:23px;}
.choose-btn b{display:block; font-size:15px; font-weight:800;}
.choose-btn span{display:block; font-size:11.5px; margin-top:3px; line-height:1.45; color:var(--s24-text-soft);}
.choose-btn.primary span{color:rgba(255,255,255,.82);}

/* Tag de nivel en Perfil: ahora es enlace a Mis niveles */
.profile-tier{transition:transform .15s ease, background .2s ease;}
.profile-tier:active{transform:scale(.95);}
.profile-tier .pt-arrow{color:var(--s24-text-soft); font-size:16px; line-height:1; margin-left:2px;}

/* Resumen de puntos con tratamiento de tag oscuro (Canjear) */
.pts-summary-dark{
  margin:8px 20px 14px; padding:16px 18px; border-radius:20px; color:#fff;
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.05) 0 2px, transparent 2px 10px),
    linear-gradient(135deg,#1c1c1c 0%,#050505 65%);
  box-shadow:0 14px 26px -16px rgba(0,0,0,.55);
}
.pts-summary-dark .psd-row{display:flex; justify-content:space-between; align-items:center; gap:12px;}
.pts-summary-dark .psd-row + .psd-row{margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.1);}
.pts-summary-dark .psd-row span{font-size:13px; color:rgba(255,255,255,.62);}
.pts-summary-dark .psd-row b{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-size:16px; font-weight:800; color:#fff; white-space:nowrap;
}
.psd-coin{width:14px; height:14px; border-radius:50%; background:var(--s24-yellow); flex-shrink:0;}

/* Las tarjetas de FAQ son blancas: fijan su color para no heredar el de pantallas dark */
.faq-item{color:var(--s24-text);}
.faq-item .faq-a{color:var(--s24-text-soft);}

/* ---------- "Canjear puntos": dark mode como Bienvenida ---------- */
#screen-canjear-como{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,198,45,.20) 0%, transparent 55%),
    radial-gradient(120% 90% at 0% 8%, rgba(225,38,21,.28) 0%, transparent 55%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.035) 0 2px, transparent 2px 10px),
    linear-gradient(180deg,#1c1c1c 0%,#0a0a0a 60%,#050505 100%) !important;
  color:#fff;
}
#screen-canjear-como .topbar h1{color:#fff;}
#screen-canjear-como .back-btn{background:rgba(255,255,255,.12); color:#fff; box-shadow:none;}
#screen-canjear-como .choose-title{color:#fff;}
#screen-canjear-como .choose-sub{color:rgba(255,255,255,.66);}

/* La tarjeta de saldo se integra al fondo oscuro */
#screen-canjear-como .pts-summary-dark{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  box-shadow:none; backdrop-filter:blur(4px);
}

/* Botones con el mismo tratamiento que los de Bienvenida */
#screen-canjear-como .choose-btn{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#fff;
}
#screen-canjear-como .choose-btn.primary{
  background:var(--s24-red); border-color:transparent;
  box-shadow:0 16px 28px -12px rgba(225,38,21,.6);
}
#screen-canjear-como .choose-btn span{color:rgba(255,255,255,.7);}
#screen-canjear-como .choose-btn.primary span{color:rgba(255,255,255,.82);}
#screen-canjear-como .choose-ico{background:rgba(255,255,255,.12); color:#fff;}
#screen-canjear-como .choose-btn.primary .choose-ico{background:rgba(255,255,255,.18);}
#screen-canjear-como .text-btn{color:#fff;}

/* ============================================================
   Badges absolutos: reservar espacio para que no pisen el texto
   ============================================================ */

/* Chip "Oro" sobre las promos bloqueadas */
.promo-full-card.locked .pf-body{padding-right:56px;}
.locked-chip{max-width:calc(100% - 28px);}

/* Tag "ACTUAL" sobre la tarjeta de nivel */
.tier-card{position:relative;}
.tier-card .tier-card-top{padding-right:72px;}

/* ============================================================
   FIX: barra de navegación siempre fija abajo
   Causa: .screen tenía overflow-y:auto, por lo que al convertirse en
   contenedor de scroll, el bottom:0 del nav se anclaba al final del
   contenido y no al borde visible de la pantalla.
   Solución: solo .screen-scroll hace scroll, y el nav es un item flex
   empujado al fondo (no depende del contexto de posicionamiento).
   ============================================================ */
/* Causa real: .screen-scroll es un flex item con overflow:auto pero sin
   min-height:0. Por defecto min-height:auto impide que un flex item se
   encoja por debajo de su contenido, así que el contenedor crecía hasta
   la altura del contenido y empujaba el nav fuera de la pantalla
   (la sección entera terminaba haciendo scroll). */
.screen{overflow:hidden;}
.screen-scroll{flex:1 1 0; min-height:0; padding-bottom:40px;}
.bottom-nav{
  position:relative; left:auto; right:auto; bottom:auto;
  flex-shrink:0; margin-top:0;
}

/* ============================================================
   Mi Cash Card: mismo fondo sutil del Home (#F9F1E4)
   Bloque superior con esquinas redondeadas, igual que .home-header
   ============================================================ */
/* Mismo patrón que .home-header: el color va en la barra superior con
   padding y margen negativo, para que la tarjeta lo monte por encima.
   (Antes usaba un ::before + "> * {position:relative}", pero esa regla
   anulaba el position:absolute del bottom sheet del wallet y lo convertía
   en un item flex que empujaba el nav fuera de su sitio.) */
#screen-cashcard .topbar{
  background:#F9F1E4;
  padding:38px 20px 120px;
  margin-bottom:-96px;
  border-radius:0 0 36px 36px;
}

/* La regla vieja del degradado amarillo ya no aplica (la clase no se usa) */
#screen-cashcard.cc-linked{background-image:none;}

/* Premios que no son producto: ícono en vez de foto */
.reward-thumb.is-icon{background:#FFF1C2; color:#8a6400;}
.reward-thumb.is-icon .icon-svg{width:24px; height:24px;}

/* ============================================================
   Tienda: la barra de estado va sobre el header rojo.
   Antes usaba texto blanco pero quedaba sobre el fondo gris claro
   de la pantalla (el rojo empezaba debajo), así que se perdía.
   ============================================================ */
#screen-tienda .status-bar{
  background:var(--s24-red);
  color:#fff;
}
#screen-tienda .shop-header{margin-top:-1px;}