/* BlackPhone Club 3.0 - capa visual Bento / Apple sobre la funcionalidad 2.0 */
html, body { background: #dfe4ea; }
body { color: var(--ink); }
#app {
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(10,10,11,.05), 0 24px 80px rgba(6,42,82,.12);
}
.screen { background: var(--bg); }
.screen.active { animation: bpScreenIn .38s var(--ease-premium) both; }
#ti-touch-overlay,
#ti-touch-overlay * { box-sizing:border-box; }
#ti-touch-overlay { isolation:isolate; contain:layout paint; }
#ti-touch-overlay #tt-grid,
#ti-touch-overlay .tt-cell { touch-action:none !important; overscroll-behavior:none !important; }
#ti-touch-overlay .tt-cell { -webkit-user-select:none; user-select:none; }
@keyframes bpScreenIn { from { opacity: 0; transform: translate3d(18px,0,0) scale(.995); } to { opacity:1; transform:none; } }

/* Botones e inputs */
.btn { min-height: 50px; border-radius: 15px; font-weight: 650; letter-spacing: -.012em; }
.btn-w, .btn-gold { background: linear-gradient(135deg, var(--bp-blue), var(--bp-blue-strong)); box-shadow: 0 11px 24px -14px rgba(8,119,249,.8); }
.btn-w:hover, .btn-gold:hover { background: linear-gradient(135deg, #1683ff, #0758bd); }
.btn-g, .btn-o, .btn-outline { background: rgba(255,255,255,.86); border: 1px solid var(--line2); color: var(--ink); box-shadow: none; }
.if, .calc-row input, .calc-row select, .calc-row textarea {
  min-height: 50px; border-radius: 14px; background: rgba(255,255,255,.92); border-color: var(--line2);
}
.if:focus, .calc-row input:focus, .calc-row select:focus { border-color: var(--bl); box-shadow: 0 0 0 4px rgba(8,119,249,.11); }
.field-with-action { position: relative; }
.field-with-action .if { padding-right: 52px; }
.field-action { position:absolute; right:7px; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:11px; color:var(--mu); display:grid; place-items:center; }
.field-action svg { width:19px; height:19px; }

/* Iconografía BlackPhone aprobada: una sola familia lineal y acentos controlados */
.bp-glyph {
  width:24px; height:24px; display:block; flex:none;
  color:inherit; fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
}
.bp-glyph--inline { width:18px; height:18px; display:inline-block; vertical-align:-4px; margin-right:7px; }
.bp-glyph--lg { width:30px; height:30px; }
.bp-glyph--xl { width:44px; height:44px; }
.bp-glyph--medal { width:34px; height:34px; }
.bp-tone-bronze { --bp-icon-fill:#f6bd8c; }
.bp-tone-silver { --bp-icon-fill:#eef0f2; }
.bp-tone-gold { --bp-icon-fill:#ffdd87; }
.bp-tone-elite { --bp-icon-fill:#eaf3ff; --bp-icon-accent:#0877f9; }
.btn .bp-glyph { width:19px; height:19px; display:inline-block; vertical-align:-5px; margin-right:7px; }

/* Splash premium */
#sc-splash { background: radial-gradient(circle at 78% 15%, rgba(8,119,249,.40), transparent 34%), radial-gradient(circle at 8% 90%, rgba(81,160,255,.18), transparent 38%), linear-gradient(155deg,#03080f 0%,#07182d 48%,#062a52 100%); color:#fff; }
#sc-splash::before { background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.045) 50%, transparent 72%); animation: splashSheen 6s ease-in-out infinite; }
@keyframes splashSheen { 0%,100%{ transform:translateX(-55%); } 50%{ transform:translateX(55%); } }
.splash-logo-img { filter: brightness(0) invert(1); height:64px; animation: logoArrival 1.05s var(--ease-premium) both .1s; }
@keyframes logoArrival { 0%{opacity:0;transform:translateY(80px) scale(1.28);filter:blur(8px) brightness(0) invert(1)} 55%{opacity:1;transform:translateY(18px) scale(1)} 100%{opacity:1;transform:none;filter:blur(0) brightness(0) invert(1)} }
.splash-tagline, .splash-hero p, .splash-note { color:rgba(255,255,255,.66); }
.splash-hero h1 { color:#fff; font-size:47px; font-weight:650; }
.splash-hero h1 em { color:#60aaff; }
.splash-actions .btn-g { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(12px); }
.splash-note a { color:#fff; }

/* Autenticación */
#sc-login, #sc-register {
  padding-left:22px; padding-right:22px;
  background: radial-gradient(circle at 95% 0%, rgba(8,119,249,.20), transparent 34%), linear-gradient(180deg,#f3f7ff 0%,#f7f8fa 50%,#fff 100%);
}
.auth-header { margin-left:-4px; }
.auth-title { font-size:42px; letter-spacing:-.045em; font-weight:700; }
.auth-title em { color:var(--bl); font-weight:750; }
.auth-sub { max-width:330px; }
.auth-brand { display:flex; align-items:center; gap:10px; margin:4px 0 36px; }
.auth-brand img { width:146px; max-height:34px; object-fit:contain; }
.auth-brand span { font-size:11px; color:var(--mu); letter-spacing:.12em; text-transform:uppercase; }

/* Cabeceras */
.page-header { padding-left:16px; padding-right:16px; background:rgba(247,248,250,.88); border:0; }
.page-header h2 { font-weight:720; font-size:18px; }
.back-btn, .icon-btn { background:rgba(255,255,255,.82); border-color:rgba(229,232,235,.9); box-shadow:0 8px 18px -16px rgba(6,42,82,.8); }
.home-header { justify-content:flex-start; padding-left:20px; }
.home-logo { height:24px; }
.home-header .header-actions { display:flex; gap:9px; }
.icon-btn { width:40px; height:40px; }
.icon-btn svg { width:19px; height:19px; }

/* Home Bento */
#sc-home { background:linear-gradient(180deg,#f4f8ff 0,#f7f8fa 340px); }
.home-greeting { padding:18px 20px 10px; display:flex; align-items:end; justify-content:space-between; }
.home-greeting h2 { font-size:31px; font-weight:720; }
.home-greeting h2 em { font-weight:760; }
.home-greeting::after { content:'BLACKPHONE CLUB'; font-size:9px; font-weight:750; letter-spacing:.12em; color:var(--mu); padding-bottom:3px; }
.birthday-strip .emoji { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:#fff; color:var(--ink); }
.level-banner {
  display:flex; margin:0 14px 12px; padding:13px 15px; border-radius:20px;
  background:linear-gradient(135deg,#fff,#f2f7ff); border-color:#dbe8f7;
}
.level-icon { width:46px; height:46px; background:#fff; border:1px solid var(--line); border-radius:14px; color:var(--ink); }
.level-info .eyebrow { color:var(--bl); font-weight:750; }
.level-info h4 { font-size:17px; font-weight:720; }
.level-arrow .bp-glyph { width:17px; height:17px; transform:rotate(180deg); }
.card-wrap { padding:0 14px 14px; }
.loyalty-card { aspect-ratio:auto; min-height:218px; border-radius:26px; padding:21px; background:linear-gradient(145deg,#08090b 0%,#07192c 53%,#064c94 100%); box-shadow:0 24px 44px -25px rgba(6,76,148,.9); }
.loyalty-card::before { top:-85%; right:-45%; width:430px; height:430px; opacity:.78; }
.card-tier-badge { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); backdrop-filter:blur(12px); }
.card-pts { font-size:52px; font-weight:680; }
.card-pts-sub { color:rgba(255,255,255,.64); }
.card-bar { height:5px; }
.card-fill { background:linear-gradient(90deg,#58a9ff,#fff); }
.lc-credit-pill { align-items:center; gap:6px; margin-top:7px; font-size:11px; font-weight:700; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.13); border-radius:999px; padding:5px 10px; width:max-content; }
.lc-credit-pill .bp-glyph { width:16px; height:16px; color:#fff; --bp-icon-accent:#80e09b; }
.banner-section { padding:0 14px 16px; }
.bp-slider { position:relative; overflow:hidden; border-radius:21px; box-shadow:var(--shadow); background:#07192c; }
.bp-slides { display:flex; transition:transform .62s var(--ease-premium); }
.bp-slide { min-width:100%; aspect-ratio:1600/741; position:relative; overflow:hidden; color:#fff; cursor:pointer; }
.bp-slide img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.bp-slide::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,8,15,.82),rgba(3,8,15,.08)); }
.bp-slide--art::after { display:none; }
.bp-slide-copy { position:absolute; z-index:2; left:20px; top:50%; transform:translateY(-50%); max-width:58%; }
.bp-slide-copy small { text-transform:uppercase; letter-spacing:.13em; font-size:9px; opacity:.75; font-weight:700; }
.bp-slide-copy strong { display:block; font-size:21px; line-height:1.05; margin:5px 0 7px; letter-spacing:-.025em; }
.bp-slide-copy span { font-size:11px; opacity:.78; }
.bp-slide--gradient { background:radial-gradient(circle at 85% 20%,rgba(90,170,255,.72),transparent 30%),linear-gradient(135deg,#07192c,#0877f9); }
.bp-slide--light { color:var(--ink); background:radial-gradient(circle at 92% 0,#fff 0,transparent 34%),linear-gradient(135deg,#eaf3ff,#cfe2ff); }
.bp-slide--light::after { background:linear-gradient(90deg,rgba(255,255,255,.72),transparent); }
.bp-slider-dots { position:absolute; left:20px; bottom:12px; z-index:3; display:flex; gap:5px; }
.bp-slider-dot { width:5px; height:5px; border-radius:8px; background:rgba(255,255,255,.42); transition:.25s; }
.bp-slider-dot.active { width:18px; background:#fff; }
.qa-grid { grid-template-columns:repeat(4,1fr); gap:9px; padding:0 14px 18px; }
.qa { border-radius:19px; padding:12px 4px 11px; box-shadow:0 10px 24px -22px rgba(6,42,82,.65); }
.qa-icon { width:44px; height:44px; border-radius:14px; background:#fff; border:1px solid var(--line); color:var(--ink); }
.qa-icon svg { width:24px; height:24px; }
.qa:nth-child(2n) .qa-icon { background:#fff; color:var(--ink); --bp-icon-accent:#7357ff; }
.qa:nth-child(3n) .qa-icon { background:#fff; color:var(--ink); --bp-icon-accent:#228a3d; }
.qa:nth-child(5n) .qa-icon { background:#fff; color:var(--ink); --bp-icon-accent:#ef3028; }
.qa-label { font-size:10px; font-weight:650; }
.sec-hdr { padding:0 18px; }
.sec-hdr h3 { font-size:21px; font-weight:720; letter-spacing:-.025em; }
.bp-section-intro { align-items:flex-end; margin-top:9px; }
.bp-section-intro > div > span { display:block; margin-bottom:3px; color:var(--bl); font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.bp-reward-strip { display:flex; gap:10px; padding:0 14px 22px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.bp-reward-card { min-width:148px; padding:14px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:19px; box-shadow:var(--shadow); scroll-snap-align:start; }
.bp-reward-icon { width:42px; height:42px; display:grid; place-items:center; background:#f7f8fa; border:1px solid var(--line); border-radius:13px; color:var(--ink); margin-bottom:11px; }
.bp-reward-icon .bp-glyph { width:26px; height:26px; }
.bp-reward-card strong { display:block; color:var(--ink); font-size:13px; }
.bp-reward-card small { display:block; color:var(--mu); font-size:10px; min-height:28px; margin-top:3px; line-height:1.35; }
.bp-coin-price { display:flex; align-items:center; gap:5px; color:var(--bl); font-size:11px; font-weight:800; margin-top:7px; }
.bp-coin-price .bp-glyph { width:18px; height:18px; color:var(--ink); }
.bp-product-spotlight { margin:0 14px 22px; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); display:grid; grid-template-columns:42% 1fr; min-height:148px; }
.bp-product-spotlight img { width:100%; height:100%; object-fit:contain; padding:12px; background:linear-gradient(145deg,#f9fbff,#edf4ff); }
.bp-spotlight-copy { padding:18px 15px 16px; display:flex; flex-direction:column; justify-content:center; }
.bp-spotlight-copy small { color:var(--bl); font-size:9px; letter-spacing:.12em; font-weight:800; text-transform:uppercase; }
.bp-spotlight-copy strong { font-size:17px; line-height:1.18; margin:6px 0; }
.bp-spotlight-copy span { font-size:14px; font-weight:750; }

/* Paneles laterales */
.bp-panel-backdrop { display:none; position:fixed; inset:0; z-index:8500; background:rgba(3,8,15,.48); backdrop-filter:blur(4px); }
.bp-panel-backdrop.open { display:block; animation:fadeIn .2s ease; }
.bp-side-panel { position:absolute; top:0; right:0; height:100%; width:min(88%,360px); background:var(--bg); transform:translateX(100%); transition:transform .34s var(--ease-premium); padding:max(env(safe-area-inset-top),22px) 16px max(env(safe-area-inset-bottom),20px); overflow:auto; box-shadow:-30px 0 70px rgba(3,8,15,.2); }
.bp-panel-backdrop.open .bp-side-panel { transform:none; }
.bp-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.bp-panel-head h3 { font-size:23px; }
.bp-panel-close { width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--line); font-size:19px; }
.bp-menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bp-menu-item { border:1px solid var(--line); background:#fff; border-radius:18px; padding:16px; text-align:left; min-height:108px; box-shadow:var(--shadow); }
.bp-menu-item .bp-menu-icon { width:42px; height:42px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); color:var(--ink); border-radius:13px; margin-bottom:12px; --bp-icon-accent:#0877f9; }
.bp-menu-item .bp-menu-icon .bp-glyph { width:25px; height:25px; }
.bp-menu-item strong { display:block; font-size:13px; }
.bp-menu-item span { display:block; font-size:10px; color:var(--mu); margin-top:3px; line-height:1.35; }
.bp-note { background:#fff; border:1px solid var(--line); border-radius:17px; padding:15px; display:flex; gap:12px; margin-bottom:9px; }
.bp-note.unread { border-color:#b9d7ff; background:#f5f9ff; }
.bp-note-dot { width:9px; height:9px; border-radius:50%; background:var(--bl); margin-top:5px; flex:none; }
.bp-note strong { font-size:13px; display:block; }
.bp-note p { font-size:11px; color:var(--mu); line-height:1.45; margin-top:4px; }
.bp-note time { font-size:9px; color:var(--mu2); display:block; margin-top:7px; }
.bp-notifications-empty { padding:38px 12px; text-align:center; }
.bp-notifications-empty > span { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 13px; background:#fff; border:1px solid var(--line); border-radius:18px; color:var(--ink); }
.bp-notifications-empty > span .bp-glyph { width:30px; height:30px; }
.bp-notifications-empty strong { display:block; font-size:15px; }
.bp-notifications-empty p { font-size:12px; color:var(--mu); line-height:1.5; margin-top:6px; }

/* Secciones Bento */
.balance-hero, .passport-card, .profile-hero, .ref-code-card, .calc-card, .order-summary, .ti-card, .sv-card { border-radius:22px; box-shadow:var(--shadow); }
.benefit-tier { margin:0 14px 11px; border-radius:22px; border:1px solid var(--line); background:#fff; overflow:hidden; box-shadow:var(--shadow); padding:0; }
.benefit-tier-header { padding:17px; margin:0; cursor:pointer; background:linear-gradient(135deg,#f6f9ff,#eaf3ff); position:relative; }
.benefit-tier-header::after { content:'⌄'; position:absolute; right:18px; top:50%; transform:translateY(-50%) rotate(-90deg); font-size:20px; transition:.25s; }
.benefit-tier.open .benefit-tier-header::after { transform:translateY(-50%) rotate(0); }
.benefit-tier .benefit-card { display:none; margin:0 13px; border-radius:0; border-left:0; border-right:0; box-shadow:none; }
.benefit-tier.open .benefit-card { display:flex; animation:fadeUp .28s ease both; }
.benefit-tier .benefit-card:last-child { margin-bottom:12px; }
.benefit-icon { background:#fff; border:1px solid var(--line); color:var(--ink); }
.benefit-icon .bp-glyph { width:23px; height:23px; }
.tier-emoji { width:46px; height:46px; display:grid; place-items:center; background:#fff; border:1px solid rgba(10,10,11,.08); border-radius:14px; }
.tier-emoji .bp-glyph { width:32px; height:32px; }
.tier-name { display:flex; align-items:center; gap:7px; }
.tier-name .bp-glyph { width:23px; height:23px; }
.benefits-overview { padding:0 14px 16px; }
.benefits-status-card, .benefits-convert-card { background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); }
.benefits-status-card { padding:17px; display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:center; margin-bottom:11px; }
.benefits-status-icon { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:#f7f8fa; border:1px solid var(--line); }
.benefits-status-copy span { display:block; color:var(--bl); font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.benefits-status-copy strong { display:block; font-size:20px; margin:3px 0; }
.benefits-status-copy small { display:block; color:var(--mu); font-size:11px; }
.benefits-redeem-btn { grid-column:1/-1; margin-top:3px; }
.benefits-convert-card { padding:16px; }
.benefits-mini-banner { display:flex; align-items:center; gap:11px; padding:13px; border-radius:16px; background:linear-gradient(135deg,#f7faff,#eaf3ff); margin-bottom:15px; }
.benefits-mini-banner > span { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:#fff; border:1px solid var(--line); }
.benefits-mini-banner .bp-glyph { width:25px; height:25px; }
.benefits-mini-banner strong { display:block; font-size:14px; }
.benefits-mini-banner small { display:block; color:var(--mu); font-size:10px; line-height:1.4; margin-top:3px; }

/* Tienda */
#sc-store { background:var(--bg); }
.store-hero { margin:0 14px 13px; min-height:130px; border-radius:22px; padding:20px; color:#fff; background:radial-gradient(circle at 90% 10%,rgba(86,169,255,.9),transparent 32%),linear-gradient(135deg,#07192c,#064c94); display:flex; flex-direction:column; justify-content:center; }
.store-hero small { font-size:9px; letter-spacing:.13em; text-transform:uppercase; opacity:.7; }
.store-hero strong { font-size:24px; line-height:1.05; margin:6px 0; max-width:62%; }
.store-hero span { font-size:11px; opacity:.75; }
.store-cats { padding-left:14px; }
.store-cat { border-radius:13px; background:#fff; display:inline-flex; align-items:center; gap:3px; }
.store-cat .bp-glyph { width:16px; height:16px; display:inline-block; vertical-align:-4px; margin-right:5px; }
.store-cat.active { background:var(--ink); border-color:var(--ink); color:#fff; }
.store-grid { padding:0 14px 120px; gap:10px; }
.prod-card { border-radius:20px; box-shadow:var(--shadow); }
.prod-img { background:linear-gradient(145deg,#fff,#edf3fb); }
.prod-img-placeholder .bp-glyph { width:44px; height:44px; color:var(--ink); }
.store-empty-icon { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 12px; border:1px solid var(--line); border-radius:18px; background:#fff; color:var(--ink); }
.store-empty-icon .bp-glyph { width:31px; height:31px; }
.prod-badge.sale { color:#fff; background:linear-gradient(135deg,#ff5656,#f29a38); }
.detail-img-wrap, .detail-body { background:var(--bg); }

/* Canjes y checkout */
#redeem-modal { backdrop-filter:blur(6px); }
#redeem-modal > div { animation:slideUp .34s var(--ease-premium); border-radius:26px 26px 0 0 !important; }
.ti-hero .ti-emoji { width:58px; height:58px; display:grid; place-items:center; background:#fff; border-radius:18px; color:var(--ink); right:18px; top:18px; opacity:1; }
.ti-hero .ti-emoji .bp-glyph { width:34px; height:34px; }
.bp-hero-eyebrow { display:block; color:rgba(255,255,255,.68); font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; margin-bottom:5px; }
.redeem-balance { display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.82); font-size:12px; margin-top:8px; }
.redeem-balance .bp-glyph { width:20px; height:20px; color:#fff; --bp-icon-fill:#ffdd87; }
#redeem-list { padding-top:2px !important; }
.redeem-item { background:#fff; border:1.5px solid var(--line); border-radius:18px; padding:14px; margin-bottom:10px; display:flex; align-items:center; gap:13px; box-shadow:var(--shadow); }
.redeem-item.is-available { cursor:pointer; border-color:#cfe2ff; }
.redeem-item.is-locked { opacity:.5; }
.redeem-item-icon { width:46px; height:46px; display:grid; place-items:center; flex:none; background:#f7f8fa; border:1px solid var(--line); border-radius:14px; color:var(--ink); }
.redeem-item-icon .bp-glyph { width:28px; height:28px; }
.redeem-item-copy { flex:1; min-width:0; }
.redeem-item-copy > strong { display:block; color:var(--ink); font-size:14px; }
.redeem-item-copy p { color:var(--mu); font-size:11px; line-height:1.4; margin-top:3px; }
.redeem-item-cost { display:flex; align-items:center; gap:5px; color:var(--bl); font-size:11px; font-weight:800; margin-top:7px; }
.redeem-item-cost .bp-glyph { width:17px; height:17px; color:var(--ink); }
.redeem-item-state { color:var(--ink); }
.redeem-item-state .bp-glyph { width:20px; height:20px; }
.redeem-item.is-available .redeem-item-state .bp-glyph { transform:rotate(180deg); }
.redeem-empty > span { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 12px; }
.redeem-empty > span .bp-glyph { width:48px; height:48px; }
.redeem-modal-heading { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.redeem-modal-icon { width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--line); border-radius:14px; background:#f7f8fa; }
.redeem-modal-icon .bp-glyph { width:28px; height:28px; }
#rm-title { font-size:18px; font-weight:800; color:var(--ink); }
#rm-desc { font-size:12px; color:var(--mu); line-height:1.4; margin-top:3px; }
.tradein-credit-card { border:1.5px solid #8fc2ff; background:linear-gradient(135deg,#f4f9ff,#eaf3ff); }
.tradein-credit-card.is-selected { border-color:var(--bl); box-shadow:0 0 0 4px rgba(8,119,249,.09); }
.tradein-credit-row { display:flex; gap:12px; align-items:center; cursor:pointer; }
.tradein-credit-icon { width:43px; height:43px; border-radius:14px; background:#fff; border:1px solid #bcd9ff; color:var(--ink); display:grid; place-items:center; flex:none; }
.tradein-credit-icon .bp-glyph { width:25px; height:25px; }
.tradein-credit-copy { flex:1; }
.tradein-credit-copy strong { display:block; font-size:14px; }
.tradein-credit-copy span { display:block; font-size:11px; color:var(--mu); margin-top:3px; }
.tradein-credit-value { font-size:18px; font-weight:800; color:var(--bl); }
.bp-card-title { display:flex; align-items:center; gap:8px; }
.bp-card-title .bp-glyph { width:21px; height:21px; }
.bp-card-title span { color:var(--mu); font-weight:500; }
.bp-card-title--sm { font-size:12px !important; margin-bottom:8px; }
.pay-method .pay-icon { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:13px; background:#fff; color:var(--ink); }
.pay-method .pay-icon .bp-glyph { width:25px; height:25px; }
.pay-modal-icon { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 11px; border:1px solid var(--line); border-radius:18px; background:#f7f8fa; }
.pay-modal-icon .bp-glyph { width:36px; height:36px; }
.sv-benefit-icon { width:46px; height:46px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); border-radius:14px; flex:none; }
.sv-benefit-icon .bp-glyph { width:30px; height:30px; }
.game-result-icon { width:64px; height:64px; display:grid; place-items:center; margin:0 auto 10px; border:1px solid rgba(255,255,255,.18); border-radius:19px; }
#game-coins-hud { display:flex; align-items:center; gap:4px; }

/* Avatar */
.avatar-uploader { display:flex; align-items:center; gap:15px; border:1px solid var(--line); background:#fff; border-radius:18px; padding:14px; margin-bottom:16px; }
.avatar-preview { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,#eaf3ff,#cfe2ff); overflow:hidden; display:grid; place-items:center; color:var(--bl); font-weight:750; }
.avatar-preview img { width:100%; height:100%; object-fit:cover; }
.prof-avatar.has-photo { background-size:cover; background-position:center; color:transparent; }

/* Barra móvil */
#bnav { margin:0; background:rgba(255,255,255,.9); border-top-color:rgba(229,232,235,.9); }
.ni.active { color:var(--bl); }
.ni.active::before { background:var(--bl); }

@media (min-width: 700px) {
  #app { max-width:430px; }
}
@media (max-width: 360px) {
  .qa-grid { gap:6px; padding-left:10px; padding-right:10px; }
  .qa-label { font-size:9px; }
  .card-pts { font-size:46px; }
  .bp-slide-copy strong { font-size:18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}