/**
 * JUNJUN Remesas & Fidelización — Capa visual 1.6.0
 * Se carga DESPUÉS de frontend.css. Solo presentación: no toca marcado funcional, AJAX ni base de datos.
 * Secciones: 1 Fuente · 2 Tokens · 3 Iconos · 4 Escala tipográfica · 5 Botones · 6 Menú principal
 *            7 Calculadora y resultado · 8 Fidelización y sellos · 9 Carrusel · 10 Estados · 11 Movimiento
 */

/* ============ 1. TIPOGRAFÍA LOCAL (sin Google Fonts: cumple RGPD y evita parpadeos) ============ */
@font-face { font-family:'JJ Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/poppins-400.woff') format('woff'); }
@font-face { font-family:'JJ Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/poppins-500.woff') format('woff'); }
@font-face { font-family:'JJ Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/poppins-700.woff') format('woff'); }

/* ============ 2. TOKENS ============ */
:root {
    --jj-fuente: 'JJ Poppins', 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --jj-ink: #111111;
    --jj-muted: #5b6470;          /* 6:1 sobre blanco */
    --jj-line: #e5e7eb;
    --jj-yellow: #FFD60A;
    --jj-yellow-deep: #F5C400;
    --jj-yellow-soft: #FFF8D6;
    --jj-wa: #25D366;
    --jj-r-card: 18px;
    --jj-r-ctl: 14px;
    --jj-sh-1: 0 1px 2px rgba(17,17,17,.06), 0 4px 14px rgba(17,17,17,.06);
    --jj-sh-2: 0 2px 4px rgba(17,17,17,.08), 0 10px 28px rgba(17,17,17,.10);
    /* escala: 12 / 13 / 14 / 16 / 20 / 28 / 36 */
    --jj-fs-xs: 12px; --jj-fs-sm: 13px; --jj-fs-md: 14px; --jj-fs-base: 16px;
    --jj-fs-lg: 20px; --jj-fs-xl: 28px; --jj-fs-2xl: 36px;
    --jj-s1: 4px; --jj-s2: 8px; --jj-s3: 16px; --jj-s4: 24px;
}

.junjun-suite-container, .junjun-card, .junjun-welcome-wrapper, .junjun-install-modal, .junjun-terms-modal {
    font-family: var(--jj-fuente);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.junjun-suite-container button, .junjun-suite-container input, .junjun-suite-container select,
.junjun-card button, .junjun-card input, .junjun-card select, .junjun-welcome-wrapper button, .junjun-welcome-wrapper input {
    font-family: inherit;
}
.junjun-card { border-radius: var(--jj-r-card); box-shadow: var(--jj-sh-1); border-color: var(--jj-line); }

/* ============ 3. ICONOS SVG (sustituyen a los emojis) ============ */
.jj-i { display:inline-block; width:1em; height:1em; vertical-align:-.15em; flex:none; }
.jj-ico { display:inline-flex; align-items:center; margin-right:.35em; line-height:1; }
.jj-ico .jj-i { width:1.05em; height:1.05em; }
.junjun-share-icon, .junjun-btn-icon, .junjun-step-icon, .junjun-smart-banner-icon, .junjun-sticky-icon, .junjun-user-avatar { display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.junjun-share-icon .jj-i { width:18px; height:18px; margin-right:6px; }
.junjun-btn-icon .jj-i { width:20px; height:20px; margin-right:2px; }
.junjun-sticky-icon .jj-i { width:22px; height:22px; }
.junjun-step-icon { width:40px; height:40px; border-radius:12px; background:var(--jj-yellow); color:var(--jj-ink); flex:none; }
.junjun-step-icon .jj-i { width:20px; height:20px; }
.junjun-smart-banner-icon { width:40px; height:40px; border-radius:12px; background:var(--jj-yellow); color:var(--jj-ink); flex:none; }
.junjun-smart-banner-icon .jj-i { width:22px; height:22px; }
.junjun-user-avatar { width:34px; height:34px; border-radius:50%; background:var(--jj-yellow); color:var(--jj-ink); flex:none; }
.junjun-user-avatar .jj-i { width:18px; height:18px; }
.junjun-install-header h4 { display:flex; align-items:center; gap:8px; }

/* Bandera: círculo con emoji o, en Windows, el código del país */
.junjun-flag-circle, .junjun-dest-flag { display:inline-flex; align-items:center; justify-content:center; }
.jj-flag-code { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 6px; border-radius:999px; background:var(--jj-ink); color:var(--jj-yellow); font-size:11px; font-weight:700; letter-spacing:.04em; line-height:1; }
.junjun-dest-flag img { width:28px; height:28px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px var(--jj-line); }

/* ============ 4. ESCALA TIPOGRÁFICA Y LEGIBILIDAD MÓVIL ============ */
/* Texto secundario: mínimo 13 px (antes 11–12 px) */
.junjun-suite-container .junjun-location-maps-link,
.junjun-suite-container .junjun-limit-note,
.junjun-suite-container .junjun-rate-date,
.junjun-suite-container .junjun-result-sublabel,
.junjun-suite-container .junjun-result-estimate-note,
.junjun-suite-container .junjun-transfer-exclusion-note,
.junjun-suite-container .junjun-coupon-validity,
.junjun-suite-container .junjun-history-empty,
.junjun-suite-container .junjun-loyalty-next-reward,
.junjun-suite-container .junjun-referral-feedback,
.junjun-suite-container .junjun-stamp-count-text,
.junjun-suite-container .junjun-hub-info p,
.junjun-suite-container .junjun-form-group label,
.junjun-card .junjun-location-maps-link,
.junjun-card .junjun-limit-note,
.junjun-card .junjun-result-sublabel,
.junjun-card .junjun-transfer-exclusion-note,
.junjun-card .junjun-form-group label {
    font-size: var(--jj-fs-sm) !important;
    line-height: 1.45 !important;
}
.junjun-suite-container .junjun-hub-info p, .junjun-suite-container .junjun-result-estimate-note,
.junjun-suite-container .junjun-transfer-exclusion-note, .junjun-suite-container .junjun-rate-date { color: var(--jj-muted) !important; }
.junjun-suite-container .junjun-btn-toggle-sub, .junjun-suite-container .junjun-btn-back-hub { font-size: var(--jj-fs-md) !important; }
.junjun-card .junjun-form-group label { font-weight: 500; color: var(--jj-ink); }

/* Campos a 16 px: iOS no hace zoom al tocar */
.junjun-input-clean, .junjun-select-clean, .junjun-input, .junjun-input-key,
.junjun-referral-form input, .junjun-welcome-wrapper input[type="text"], .junjun-welcome-wrapper input[type="tel"] {
    font-size: var(--jj-fs-base) !important;
    min-height: 50px;
}
.junjun-input-clean, .junjun-select-clean, .junjun-input, .junjun-input-key {
    border: 1.5px solid #d6d9de; border-radius: var(--jj-r-ctl); transition: border-color .15s, box-shadow .15s;
}
.junjun-input-clean:focus, .junjun-select-clean:focus, .junjun-input:focus, .junjun-input-key:focus {
    border-color: var(--jj-ink); box-shadow: 0 0 0 3px rgba(255,214,10,.55); outline: none;
}
#junjun-send-amount { font-weight: 700; font-size: 20px !important; }
.junjun-input-spain-wrap .junjun-input-clean { border: 0 !important; box-shadow: none !important; background: transparent; min-height: 52px; }
.junjun-input-spain-wrap { border: 1.5px solid #d6d9de; border-radius: var(--jj-r-ctl); background: #fff; transition: border-color .15s, box-shadow .15s; }
.junjun-input-spain-wrap:focus-within { border-color: var(--jj-ink); box-shadow: 0 0 0 3px rgba(255,214,10,.55); }

/* ============ 5. JERARQUÍA DE BOTONES ============ */
/* Primario: amarillo · Secundario: borde · WhatsApp: solo para acciones de WhatsApp */
.junjun-btn { min-height: 52px; border-radius: var(--jj-r-ctl); font-size: var(--jj-fs-base); font-weight: 700; letter-spacing: -.005em; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease; }
.junjun-btn:active { transform: scale(.98); }
.junjun-btn-primary, .junjun-btn-full:not(.junjun-btn-whatsapp) { background: var(--jj-yellow); color: #0a0a0a; border: 1.5px solid var(--jj-yellow); box-shadow: 0 2px 0 rgba(17,17,17,.9); }
.junjun-btn-primary:hover, .junjun-btn-full:not(.junjun-btn-whatsapp):hover { background: var(--jj-yellow-deep); border-color: var(--jj-yellow-deep); }
.junjun-btn-whatsapp { background: var(--jj-wa) !important; color: #0a0a0a !important; border: 1.5px solid var(--jj-wa) !important; box-shadow: 0 2px 0 rgba(17,17,17,.9) !important; }
.junjun-btn-whatsapp:hover { background: #1fbf5b !important; }
.junjun-btn-share { min-height: 48px; border-radius: var(--jj-r-ctl); border: 1.5px solid #e6d88a; background: var(--jj-yellow-soft); color: var(--jj-ink); font-size: var(--jj-fs-md) !important; font-weight: 700; }
.junjun-btn-share:hover { background: #fff1a8; }
/* Terciario: texto con subrayado (antes: amarillo oscuro ilegible sobre blanco) */
.junjun-btn-toggle-sub { color: var(--jj-ink) !important; font-weight: 700 !important; text-decoration: underline; text-decoration-color: var(--jj-yellow-deep); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.junjun-btn-back-hub { border-radius: 999px; }
.junjun-location-maps-link:hover { color: var(--jj-ink) !important; text-decoration: underline; }

/* ============ 6. MENÚ PRINCIPAL («¿Qué deseas realizar hoy?») ============ */
.junjun-hub-title { font-size: var(--jj-fs-lg); font-weight: 700; letter-spacing: -.02em; color: var(--jj-ink); }
.junjun-suite-container .junjun-hub-buttons-grid .junjun-hub-card {
    display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px;
    height: auto; min-height: 92px; padding: 16px 16px 16px 14px;
    background: #fff; border: 1px solid var(--jj-line); border-left: 1px solid var(--jj-line);
    border-radius: var(--jj-r-card); box-shadow: var(--jj-sh-1); text-align: left;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .15s ease;
}
.junjun-suite-container .junjun-hub-buttons-grid .junjun-hub-card:hover { transform: translateY(-2px); box-shadow: var(--jj-sh-2); border-color: var(--jj-ink); background:#fff; }
.junjun-suite-container .junjun-hub-buttons-grid .junjun-hub-card:active { transform: scale(.985); background: var(--jj-yellow-soft); box-shadow: var(--jj-sh-1); }
.jj-hub-ico { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:16px; background: var(--jj-yellow); color: var(--jj-ink); box-shadow: inset 0 -2px 0 rgba(17,17,17,.12); }
.jj-hub-ico .jj-i { width:26px; height:26px; }
.jj-hub-chevron { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:#f3f4f6; color: var(--jj-ink); transition: transform .2s ease, background-color .2s ease; }
.jj-hub-chevron .jj-i { width:18px; height:18px; }
.junjun-hub-card:hover .jj-hub-chevron { transform: translateX(3px); background: var(--jj-yellow); }
.junjun-hub-info { min-width:0; width:auto !important; }
.junjun-hub-info h4 { font-size: 17px !important; font-weight: 700; letter-spacing: -.015em; margin: 0 0 2px !important; color: var(--jj-ink); }
.junjun-hub-info p { margin: 0 !important; }
.junjun-hub-card .junjun-nav-custom-image { max-width: 52px; max-height: 52px; margin-bottom: 6px; }
.junjun-user-greeting-pill { font-weight: 500; }

/* Barra inferior móvil */
.junjun-sticky-mobile-bar { background: rgba(255,255,255,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--jj-line); box-shadow: 0 -6px 20px rgba(17,17,17,.06); }
.junjun-sticky-btn { color: var(--jj-ink); }
.junjun-sticky-label { font-size: var(--jj-fs-xs) !important; font-weight: 700; }
.junjun-sticky-btn:active .junjun-sticky-icon { transform: scale(.92); }
.junjun-sticky-wa .junjun-sticky-icon { color: #0b7a3e; }

/* ============ 7. CALCULADORA Y RESULTADO ============ */
.junjun-pill { font-size: clamp(13px, 3.6vw, 15px) !important; font-weight: 700; min-height: 44px; border-radius: 999px; border: 1.5px solid #d6d9de; background:#fff; color: var(--jj-ink); }
.junjun-pill.active, .junjun-pill:active { background: var(--jj-ink); color: var(--jj-yellow); border-color: var(--jj-ink); }
.junjun-spain-suffix { font-weight: 700; }

.junjun-rate-box { border-radius: var(--jj-r-ctl); background: #f7f7f5; border: 1px dashed #cfd3d8; }
.junjun-rate-header-text { font-size: var(--jj-fs-sm) !important; color: var(--jj-muted); font-weight: 500; }
#junjun-rate-display { font-size: var(--jj-fs-base); font-weight: 700; font-variant-numeric: tabular-nums; }

/* El resultado es el momento clave: cifra grande y única protagonista */
.junjun-result-compact { border: 2px solid var(--jj-ink); border-radius: var(--jj-r-card); background: var(--jj-yellow-soft); box-shadow: 4px 4px 0 var(--jj-ink); }
.junjun-result-inner { align-items: center; }
.junjun-result-sublabel { font-weight: 700; color: var(--jj-ink) !important; text-transform: none; }
.junjun-input-compact-receive {
    font-size: clamp(28px, 9vw, var(--jj-fs-2xl)) !important; font-weight: 700 !important; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums; color: var(--jj-ink); background: transparent !important; border: 0 !important; min-height: 0 !important; padding: 0 !important; width: 100%;
}
.junjun-dest-currency-code { font-size: var(--jj-fs-md); font-weight: 700; color: var(--jj-ink); }
.junjun-dest-flag { font-size: 28px; line-height: 1; }
.jj-bump .junjun-input-compact-receive { animation: jj-bump .45s cubic-bezier(.2,.9,.3,1.3); }
@keyframes jj-bump { 0% { transform: translateY(5px); opacity: .35; } 100% { transform: none; opacity: 1; } }

/* ============ 8. FIDELIZACIÓN Y SELLOS ============ */
.junjun-card-header h2 { font-weight: 700; letter-spacing: -.02em; }
/* Corrección: una regla antigua dejaba el título en #111 sobre la cabecera negra (#151515) */
#junjun-loyalty-app .junjun-card-header h2 { color: #fff; }
#junjun-loyalty-app .junjun-card-header p { color: #e5e7eb; font-size: var(--jj-fs-md); }
#junjun-loyalty-app .junjun-rewards-strip { background: #fafaf8; border: 1px solid var(--jj-line); border-radius: var(--jj-r-ctl); }
#junjun-loyalty-app .junjun-reward-item { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:12px; text-align:left; padding:8px 10px; font-size: var(--jj-fs-sm); }
#junjun-loyalty-app .junjun-reward-item + .junjun-reward-item { border-top: 1px solid var(--jj-line); }
#junjun-loyalty-app .junjun-reward-step { display:inline-block; flex:none; font-size: var(--jj-fs-md); font-weight: 700; color: var(--jj-ink); }
#junjun-loyalty-app .junjun-reward-item { overflow-wrap: normal !important; word-break: normal; }
#junjun-loyalty-app .junjun-reward-prize { display:block; min-width:0; font-size: var(--jj-fs-sm); line-height: 1.4; color: #374151; text-align:right; }
#junjun-loyalty-app .junjun-reward-prize .jj-ico { display:inline-flex; vertical-align:-4px; margin: 0 5px 0 0; color: #8a6500; }
#junjun-loyalty-app .junjun-reward-prize .jj-ico .jj-i { width:18px; height:18px; }

#junjun-loyalty-app .junjun-stamp-card { background: #fff; border: 1px solid var(--jj-line); border-radius: var(--jj-r-card); box-shadow: var(--jj-sh-1); padding: 16px 12px; }
.junjun-cycle-badge { background: var(--jj-ink); color: var(--jj-yellow); border-radius: 999px; font-size: var(--jj-fs-xs); font-weight: 700; padding: 4px 10px; }

#junjun-loyalty-app .junjun-stamps-grid, .junjun-suite-container #junjun-stamps-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
#junjun-loyalty-app .junjun-stamp-slot {
    position: relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    min-height: 74px; padding: 14px 2px 8px; border-radius: 14px;
    background: #fafafa; border: 1.5px dashed #c9cdd3; color: #8a929c; overflow: hidden; transition: transform .2s, background-color .2s, border-color .2s;
}
#junjun-loyalty-app .junjun-stamp-number { position:absolute; top:5px; left:7px; font-size: 11px; font-weight: 700; color: #8a929c; line-height:1; }
#junjun-loyalty-app .junjun-stamp-icon { font-size: 24px; line-height: 1; color: #b4bac2; display:flex; }
#junjun-loyalty-app .junjun-stamp-icon .jj-i { width: 26px; height: 26px; }
#junjun-loyalty-app .junjun-stamp-code { font-size: var(--jj-fs-xs); font-weight: 700; letter-spacing: .04em; color: #a0a7b0; font-variant-numeric: tabular-nums; }
/* El texto de estado solo se muestra cuando el sello está completado */
#junjun-loyalty-app .junjun-stamp-slot:not(.filled) .junjun-stamp-status { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#junjun-loyalty-app .junjun-stamp-status { font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; }
/* Completado: amarillo sólido con check */
#junjun-loyalty-app .junjun-stamp-slot.filled { background: var(--jj-yellow); border: 1.5px solid var(--jj-ink); color: var(--jj-ink); box-shadow: 2px 2px 0 var(--jj-ink); }
#junjun-loyalty-app .junjun-stamp-slot.filled .junjun-stamp-icon, #junjun-loyalty-app .junjun-stamp-slot.filled .junjun-stamp-code, #junjun-loyalty-app .junjun-stamp-slot.filled .junjun-stamp-number { color: var(--jj-ink); }
#junjun-loyalty-app .junjun-stamp-slot.filled .junjun-stamp-status { color: #4a3a00; }
/* Siguiente sello: borde sólido y pulso suave para indicar «este es el próximo» */
#junjun-loyalty-app .junjun-stamps-grid > .filled + .junjun-stamp-slot:not(.filled),
#junjun-loyalty-app .junjun-stamps-grid > .junjun-stamp-slot:first-child:not(.filled) { border-style: solid; border-color: var(--jj-ink); background: var(--jj-yellow-soft); color: var(--jj-ink); animation: jj-next 2.4s ease-in-out infinite; }
#junjun-loyalty-app .junjun-stamps-grid > .filled + .junjun-stamp-slot:not(.filled) .junjun-stamp-icon,
#junjun-loyalty-app .junjun-stamps-grid > .junjun-stamp-slot:first-child:not(.filled) .junjun-stamp-icon { color: var(--jj-ink); }
@keyframes jj-next { 0%,100% { box-shadow: 0 0 0 0 rgba(255,214,10,.0); } 50% { box-shadow: 0 0 0 5px rgba(255,214,10,.55); } }

.junjun-stamp-progress-bar-wrap { height: 10px; border-radius: 999px; background: #eceff1; overflow: hidden; }
.junjun-stamp-progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--jj-yellow-deep), var(--jj-yellow)); box-shadow: inset 0 -2px 0 rgba(17,17,17,.12); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.junjun-stamp-count-text { color: var(--jj-ink); }

.junjun-input-key { text-align: center; font-weight: 700; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.junjun-confetti { color: var(--jj-ink) !important; background: var(--jj-yellow); border-radius: 999px; display:inline-flex; align-items:center; gap:4px; padding: 6px 14px; font-size: var(--jj-fs-md); font-weight: 700; }
.junjun-coupon-code { font-variant-numeric: tabular-nums; letter-spacing: .08em; }

/* ============ 9. CARRUSEL DE ALIADOS: sobrio, en escala de grises ============ */
.junjun-banner-section { opacity: .98; }
.junjun-banner-title { display:inline-flex; align-items:center; font-size: var(--jj-fs-sm); font-weight: 700; color: var(--jj-ink); }
.junjun-banner-img, .junjun-banner-badge { filter: grayscale(1); opacity: .62; transition: filter .25s ease, opacity .25s ease; }
.junjun-banner-card:hover .junjun-banner-img, .junjun-banner-card:focus-within .junjun-banner-img, .junjun-banner-card:active .junjun-banner-img,
.junjun-banner-card:hover .junjun-banner-badge, .junjun-banner-card:active .junjun-banner-badge { filter: none; opacity: 1; }
.junjun-banner-label { font-size: var(--jj-fs-xs) !important; color: var(--jj-muted); }

/* ============ 10. ESTADOS VACÍOS, AVISOS Y MODALES ============ */
.junjun-history-empty { text-align: center; color: var(--jj-muted); padding: 14px 8px; }
.junjun-history-empty::before { content:""; display:block; width:40px; height:40px; margin:0 auto 8px; border-radius:12px; background: var(--jj-yellow-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5V8z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E") center/22px no-repeat; }
.junjun-loyalty-history > summary { font-weight: 700; font-size: var(--jj-fs-md); cursor: pointer; }
.junjun-inline-alert, .junjun-referral-feedback { border-radius: 12px; }
.junjun-install-modal-card, .junjun-terms-modal-panel { border-radius: 22px; box-shadow: var(--jj-sh-2); }
.junjun-install-step { align-items: center; gap: 12px; }
.junjun-install-step p { font-size: var(--jj-fs-md); line-height: 1.5; margin: 2px 0 0; }
.junjun-smart-banner { border-radius: var(--jj-r-card); box-shadow: var(--jj-sh-1); }
.junjun-smart-banner-text strong { font-size: var(--jj-fs-md); }
.junjun-smart-banner-text span { font-size: var(--jj-fs-sm); }
.junjun-welcome-box { border-radius: 22px; box-shadow: var(--jj-sh-2); }

/* Foco visible coherente */
.junjun-suite-container :focus-visible, .junjun-card :focus-visible, .junjun-welcome-wrapper :focus-visible { outline: 3px solid var(--jj-ink); outline-offset: 2px; border-radius: 10px; }

/* ============ 11. MOVIMIENTO ============ */
@media (prefers-reduced-motion: reduce) {
    .jj-bump .junjun-input-compact-receive, #junjun-loyalty-app .junjun-stamp-slot { animation: none !important; }
    .junjun-hub-card, .junjun-btn, .jj-hub-chevron, .junjun-stamp-progress-bar { transition: none !important; }
}

@media (max-width: 360px) {
    .jj-hub-ico { width: 44px; height: 44px; border-radius: 13px; }
    .junjun-suite-container .junjun-hub-buttons-grid .junjun-hub-card { gap: 10px; padding: 14px 12px; }
    #junjun-loyalty-app .junjun-stamps-grid { gap: 6px; }
}