:root {
      --blue: #2222CC;
      --blue-dark: #1111AA;
      --blue-faint: #EEF0FF;
      --blue-mid: #C8CCFF;
      --white: #FFF;
      --off: #F7F8FF;
      --text: #0D0D6B;
      --muted: #5555AA;
      --red: #E53E3E;
      --green: #25D366;
      --yellow: #FFD93D;
      --gold: #F4A500;
      --orange: #FF6B35;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--white);
      color: var(--text);
      font-family: 'Nunito', sans-serif;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      margin: 0;
    }

    .pb {
      background-color: var(--off);
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='2' fill='%232222CC' opacity='.05'/%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%232222CC' opacity='.05'/%3E%3Ccircle cx='52' cy='8' r='2' fill='%232222CC' opacity='.05'/%3E%3C/svg%3E");
    }

    /* NAV */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      background: var(--blue);
      height: 64px;
      border-bottom: 3px solid var(--text);
      transition: top 0.15s ease-out;
    }

    .nav-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      padding: 0 40px;
    }

    .pay-opt-icon {
      font-size: 1.25rem;
      width: 34px;
      height: 34px;
      min-width: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 34px;
      background: #fff;
      border: 2px solid var(--blue-mid);
      border-radius: 10px;
      overflow: hidden;
      vertical-align: middle;
    }

    .nav-logo {
      font-family: 'Fredoka One', cursive;
      font-size: 1.8rem;
      color: #fff;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .nav-links {
      display: flex;
      gap: 20px;
      list-style: none;
      align-items: center;
    }

    .nav-links a {
      font-weight: 800;
      font-size: .82rem;
      text-decoration: none;
      color: rgba(255, 255, 255, .8);
      text-transform: uppercase;
      letter-spacing: .8px;
      transition: color .2s;
    }

    .nav-links a:hover {
      color: #fff;
    }

    .nav-right {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .ig-btn {
      display: flex;
      align-items: center;
      gap: 7px;
      background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
      color: #fff;
      border: 2.5px solid var(--text);
      border-radius: 100px;
      padding: 7px 14px;
      font-family: 'Nunito', sans-serif;
      font-weight: 900;
      font-size: .78rem;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 3px 3px 0 var(--text);
    }

    .user-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .15);
      color: #fff;
      border: 2px solid rgba(255, 255, 255, .4);
      border-radius: 100px;
      padding: 7px 16px;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      font-size: .82rem;
      cursor: pointer;
    }

    .user-btn:hover {
      background: rgba(255, 255, 255, .25);
    }

    .user-avatar {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(255, 255, 255, .5);
    }

    .cart-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      color: var(--blue);
      border: none;
      border-radius: 100px;
      padding: 8px 18px;
      font-family: 'Nunito', sans-serif;
      font-weight: 900;
      font-size: .88rem;
      cursor: pointer;
      box-shadow: 3px 3px 0 var(--text);
      position: relative;
      white-space: nowrap;
    }

    .cart-btn:hover {
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0 var(--text);
    }

    .cc {
      position: absolute;
      top: -8px;
      right: -8px;
      background: var(--text);
      color: #fff;
      border-radius: 50%;
      width: 22px;
      height: 22px;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: .72rem;
      font-weight: 900;
    }

    .cc.show {
      display: flex;
    }

    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 38px;
      height: 38px;
      border: 2px solid rgba(255, 255, 255, .4);
      border-radius: 10px;
      background: rgba(255, 255, 255, .1);
      cursor: pointer;
      padding: 7px;
    }

    .hamburger span {
      display: block;
      height: 2px;
      background: #fff;
      border-radius: 2px;
      transition: all .3s;
    }

    .hamburger.open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .hamburger.open span:nth-child(2) {
      opacity: 0;
    }

    .hamburger.open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    .mobile-menu {
      position: fixed;
      top: 64px;
      left: 0;
      right: 0;
      background: var(--blue);
      border-bottom: 3px solid var(--text);
      z-index: 199;
      transform: translateY(-110%);
      transition: transform .3s cubic-bezier(.4, 0, .2, 1), top 0.15s ease-out;
      padding: 16px 20px 20px;
    }

    .mobile-menu.open {
      transform: translateY(0);
    }

    .mobile-menu a,
    .mobile-menu button.mm-link {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 14px;
      text-decoration: none;
      color: #fff;
      font-weight: 800;
      font-size: .95rem;
      transition: background .2s;
      width: 100%;
      text-align: left;
      background: transparent;
      border: none;
      cursor: pointer;
      font-family: 'Nunito', sans-serif;
    }

    .mobile-menu a:hover,
    .mobile-menu button.mm-link:hover {
      background: rgba(255, 255, 255, .12);
    }

    .mm-div {
      height: 2px;
      background: rgba(255, 255, 255, .1);
      margin: 8px 0;
    }

    .mm-cart-badge {
      background: var(--text);
      color: #fff;
      border-radius: 100px;
      padding: 2px 8px;
      font-size: .72rem;
      font-weight: 900;
      margin-left: auto;
    }

    /* HERO */
    .hero {
      min-height: 100vh;
      background: var(--blue);
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      padding: 80px 0 0;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(255, 255, 255, .025) 30px, rgba(255, 255, 255, .025) 60px);
      pointer-events: none;
    }

    .hero-left {
      padding: 60px 60px 80px 80px;
      z-index: 2;
    }

    .htag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .12);
      border: 2px solid rgba(255, 255, 255, .3);
      color: #fff;
      border-radius: 100px;
      padding: 7px 18px;
      font-weight: 800;
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 24px;
      animation: fsl .6s ease .1s both;
    }

    @keyframes fsl {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    .hero h1 {
      font-family: 'Fredoka One', cursive;
      font-size: clamp(3rem, 6vw, 5.2rem);
      color: #fff;
      line-height: 1;
      margin-bottom: 20px;
      animation: fsl .6s ease .2s both;
    }

    .hero h1 span {
      color: var(--blue-mid);
      display: block;
    }

    .hero-sub {
      color: rgba(255, 255, 255, .75);
      font-size: 1.05rem;
      font-weight: 600;
      line-height: 1.6;
      max-width: 400px;
      margin-bottom: 40px;
      animation: fsl .6s ease .3s both;
    }

    .hcta {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      animation: fsl .6s ease .4s both;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: 'Nunito', sans-serif;
      font-weight: 900;
      font-size: .92rem;
      padding: 13px 26px;
      border-radius: 100px;
      text-decoration: none;
      cursor: pointer;
      border: 3px solid rgba(255, 255, 255, .9);
      transition: transform .15s, box-shadow .15s;
      box-shadow: 4px 4px 0 rgba(255, 255, 255, .3);
    }

    .btn:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 rgba(255, 255, 255, .3);
    }

    .btn-w {
      background: #fff;
      color: var(--blue);
    }

    .btn-g {
      background: transparent;
      color: #fff;
    }

    .hero-right {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      z-index: 2;
    }

    .hero-right img {
      width: 100%;
      max-width: 480px;
      animation: fc 4s ease-in-out infinite;
      filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .3));
    }

    @keyframes fc {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-16px);
      }
    }

    .ww {
      width: 100%;
      overflow: hidden;
      line-height: 0;
      background: var(--blue);
    }

    .strip {
      background: var(--blue);
      display: flex;
      border-top: 3px solid var(--text);
      border-bottom: 3px solid var(--text);
    }

    .si {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 18px 30px;
      border-right: 3px solid rgba(255, 255, 255, .15);
      flex: 1;
      justify-content: center;
    }

    .si:last-child {
      border-right: none;
    }

    .si h4 {
      font-family: 'Fredoka One', cursive;
      font-size: .95rem;
      color: #fff;
    }

    .si p {
      font-size: .78rem;
      color: rgba(255, 255, 255, .65);
      font-weight: 600;
    }

    /* PROMO BANNER */
    .promo-banner {
      display: none;
      background: linear-gradient(135deg, #FF6B35, #ff4500);
      border-top: 3px solid var(--text);
      border-bottom: 3px solid var(--text);
      padding: 14px 40px;
      position: relative;
    }

    .promo-banner.show {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }

    .promo-text {
      color: #fff;
      font-weight: 800;
      font-size: .95rem;
      text-align: center;
    }

    .promo-close {
      position: absolute;
      right: 20px;
      background: none;
      border: none;
      color: #fff;
      cursor: pointer;
      font-size: 1.2rem;
      opacity: .7;
    }

    .promo-close:hover {
      opacity: 1;
    }

    /* LOYALTY */
    .loyalty-banner {
      background: linear-gradient(135deg, var(--blue), var(--blue-dark));
      border-top: 3px solid var(--text);
      border-bottom: 3px solid var(--text);
      padding: 28px 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }

    .lb-left h3 {
      font-family: 'Fredoka One', cursive;
      font-size: 1.5rem;
      color: #fff;
      margin-bottom: 6px;
    }

    .lb-left p {
      color: rgba(255, 255, 255, .75);
      font-size: .9rem;
      font-weight: 600;
    }

    .lb-right {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }

    .lb-stat {
      text-align: center;
      background: rgba(255, 255, 255, .1);
      border: 2px solid rgba(255, 255, 255, .2);
      border-radius: 14px;
      padding: 12px 18px;
    }

    .lb-stat .num {
      font-family: 'Fredoka One', cursive;
      font-size: 1.7rem;
      color: var(--yellow);
    }

    .lb-stat .lbl {
      font-size: .7rem;
      color: rgba(255, 255, 255, .7);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .login-prompt-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--yellow);
      color: var(--text);
      border: 2.5px solid var(--text);
      border-radius: 100px;
      padding: 12px 22px;
      font-family: 'Nunito', sans-serif;
      font-weight: 900;
      font-size: .88rem;
      cursor: pointer;
      box-shadow: 4px 4px 0 var(--text);
    }

    .login-prompt-btn:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 var(--text);
    }

    /* CATALOG */
    .cs {
      background: var(--off);
      padding: 70px 60px 90px;
      flex: 1 0 auto;
    }

    .sh {
      text-align: center;
      margin-bottom: 48px;
    }

    .sh h2 {
      font-family: 'Fredoka One', cursive;
      font-size: clamp(2rem, 4vw, 3rem);
      color: var(--blue);
      margin-bottom: 10px;
    }

    .sh p {
      color: var(--muted);
      font-size: 1rem;
      font-weight: 600;
    }

    .sdiv {
      width: 60px;
      height: 4px;
      border-radius: 2px;
      background: var(--blue);
      margin: 14px auto 0;
    }

    .ct {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 40px;
    }

    .ctab {
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      font-size: .82rem;
      padding: 8px 20px;
      border-radius: 100px;
      border: 2.5px solid var(--blue);
      cursor: pointer;
      background: transparent;
      color: var(--blue);
      transition: all .2s;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .ctab.active,
    .ctab:hover {
      background: var(--blue);
      color: #fff;
    }

    .pg {
      display: flex;
      flex-direction: column;
      gap: 40px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .store-category h2 {
      font-family: 'Fredoka', 'Fredoka One', cursive;
      font-size: 1.8rem;
      color: #111;
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }

    .store-category-description {
      font-family: 'Outfit', sans-serif;
      font-size: 0.95rem;
      color: #666;
      margin-top: -10px;
      margin-bottom: 16px;
    }

    .store-product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 22px;
    }

    .pcard {
      background: #fff;
      border: 3px solid var(--text);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 5px 5px 0 var(--blue);
      transition: transform .2s, box-shadow .2s;
    }

    .pcard:hover {
      transform: translate(-3px, -3px);
      box-shadow: 8px 8px 0 var(--blue);
    }

    .pcard.hidden {
      display: none;
    }

    /* ── BUSCADOR ── */
    .search-wrap {
      position: sticky;
      top: 64px;
      z-index: 90;
      background: var(--bg);
      padding: 10px 0 8px;
      margin-bottom: 2px;
      transition: top 0.15s ease-out;
    }
    .search-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #fff;
      border: 2.5px solid var(--blue-mid);
      border-radius: 100px;
      padding: 0 16px;
      transition: border-color .2s, box-shadow .2s;
    }
    .search-bar:focus-within {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(79,140,247,.15);
    }
    .search-bar svg { flex-shrink: 0; color: var(--muted); transition: color .2s; }
    .search-bar:focus-within svg { color: var(--blue); }
    .search-inp {
      flex: 1;
      border: none;
      outline: none;
      font-family: 'Nunito', sans-serif;
      font-size: .9rem;
      font-weight: 700;
      color: var(--text);
      background: transparent;
      padding: 11px 0;
    }
    .search-inp::placeholder { color: var(--muted); font-weight: 600; }
    .search-clear {
      background: var(--blue-mid);
      border: none;
      border-radius: 50%;
      width: 22px; height: 22px;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text);
      font-size: .75rem;
      font-weight: 900;
      flex-shrink: 0;
      transition: background .15s;
    }
    .search-clear.show { display: flex; }
    .search-clear:hover { background: var(--blue); color: #fff; }
    .search-meta {
      font-size: .72rem;
      font-weight: 700;
      color: var(--muted);
      text-align: center;
      margin-top: 5px;
      min-height: 16px;
    }
    .search-meta span { color: var(--blue); }
    /* Resaltado de texto buscado */
    .search-hl { background: #ffe066; border-radius: 3px; padding: 0 1px; }
    /* Estado vacío del buscador */
    .search-empty {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 20px;
      text-align: center;
      gap: 10px;
    }
    .search-empty.show { display: flex; }
    .search-empty-icon { font-size: 3.5rem; animation: bounce .8s ease infinite alternate; }
    @keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }
    .search-empty h3 { font-family: 'Fredoka One', cursive; font-size: 1.2rem; color: var(--text); margin: 0; }
    .search-empty p { font-size: .82rem; color: var(--muted); font-weight: 600; margin: 0; }

    .pimg {
      width: 100%;
      aspect-ratio: 1;
      background: var(--blue-faint);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4.5rem;
      position: relative;
      overflow: hidden;
      border-bottom: 3px solid var(--text);
    }

    .pimg-p {
      position: absolute;
      inset: 0;
      opacity: .04;
      background-image: repeating-linear-gradient(0deg, var(--blue), var(--blue) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(90deg, var(--blue), var(--blue) 1px, transparent 1px, transparent 12px);
    }

    .pbadge {
      position: absolute;
      top: 12px;
      left: 12px;
      background: var(--blue);
      color: #fff;
      font-weight: 900;
      font-size: .65rem;
      letter-spacing: .5px;
      padding: 4px 10px;
      border-radius: 100px;
      text-transform: uppercase;
      border: 2px solid var(--text);
      z-index: 2;
    }

    .sale-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      background: var(--red);
      color: #fff;
      font-weight: 900;
      font-size: .65rem;
      padding: 4px 10px;
      border-radius: 100px;
      border: 2px solid var(--text);
      z-index: 2;
    }
    .pbadges-right {
      position: absolute;
      top: 12px;
      right: 12px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
      z-index: 2;
    }
    .pbadges-right .sale-badge {
      position: static;
      margin: 0;
    }
    .pseal {
      min-width: 36px;
      height: 36px;
      border-radius: 18px;
      padding: 0 6px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #fff;
      font-family: 'Fredoka One', cursive;
      font-weight: normal;
      border: 1.5px solid #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);
      line-height: 1.05;
      user-select: none;
    }
    .soldout-card { opacity:.72; filter:grayscale(30%); }
    .soldout-card .pname, .soldout-card .pprice { color:#888 !important; }

    .pinfo {
      padding: 18px 20px 20px;
    }

    .pname {
      font-family: 'Fredoka One', cursive;
      font-size: 1.25rem;
      color: var(--text);
      margin-bottom: 5px;
      line-height: 1.1;
    }

    .pdesc {
      font-size: .82rem;
      color: var(--muted);
      font-weight: 600;
      line-height: 1.4;
      margin-bottom: 10px;
    }

    .pfoot {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .pprice-wrap {
      display: flex;
      flex-direction: column;
    }

    .pprice {
      font-family: 'Fredoka One', cursive;
      font-size: 1.5rem;
      color: var(--blue);
    }

    .pprice-old {
      font-family: 'Fredoka One', cursive;
      font-size: .95rem;
      color: var(--muted);
      text-decoration: line-through;
    }

    .pprice.sale {
      color: var(--red);
    }

    .psaving {
      display: inline-block;
      font-size: .65rem;
      font-weight: 800;
      font-family: 'Outfit', sans-serif;
      color: var(--red);
      background: #fff0f0;
      border: 1.5px solid var(--red);
      border-radius: 100px;
      padding: 1px 7px;
      margin-top: 2px;
      letter-spacing: .2px;
    }

    .add-btn {
      display: flex;
      align-items: center;
      gap: 7px;
      background: #111 !important;
      color: #fff !important;
      border: none !important;
      border-radius: 100px !important;
      padding: 9px 18px;
      cursor: pointer;
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: .82rem;
      transition: background .15s;
    }

    .add-btn:hover {
      background: #333;
    }

    .qc {
      display: none;
      align-items: center;
      gap: 8px;
    }

    .qc.show {
      display: flex;
    }

    .qb {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1.5px solid #e0e0e0;
      background: #f5f5f5;
      color: #111;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Outfit', sans-serif;
      transition: all .15s;
    }

    .qb:hover {
      background: #111;
      color: #fff;
      border-color: #111;
    }

    .qn {
      font-weight: 900;
      font-size: .95rem;
      min-width: 18px;
      text-align: center;
    }
    /* Ocultar flechas del input numérico en todos los navegadores */
    .qn::-webkit-outer-spin-button,
    .qn::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .qn[type=number] {
      -moz-appearance: textfield;
    }


    /* SPIN WHEEL SECTION */
    .spin-section {
      background: linear-gradient(135deg, #1a1a8a, #2222CC);
      border-top: 3px solid var(--text);
      border-bottom: 3px solid var(--text);
      padding: 50px 60px;
      text-align: center;
    }

    .spin-section h2 {
      font-family: 'Fredoka One', cursive;
      font-size: 2.2rem;
      color: #fff;
      margin-bottom: 8px;
    }

    .spin-section p {
      color: rgba(255, 255, 255, .75);
      font-size: .95rem;
      font-weight: 600;
      margin-bottom: 28px;
    }

    .spin-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .wheel-wrap {
      position: relative;
      width: 280px;
      height: 280px;
    }

    #spinCanvas {
      border-radius: 50%;
      box-shadow: 0 0 0 6px rgba(255, 255, 255, .3), 0 0 0 8px rgba(255, 255, 255, .1);
    }

    .wheel-pointer {
      position: absolute;
      top: -18px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 2rem;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
    }

    .spin-btn {
      background: var(--yellow);
      color: var(--text);
      border: 3px solid var(--text);
      border-radius: 100px;
      padding: 14px 36px;
      font-family: 'Nunito', sans-serif;
      font-weight: 900;
      font-size: 1.05rem;
      cursor: pointer;
      box-shadow: 4px 4px 0 var(--text);
    }

    .spin-btn:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 var(--text);
    }

    .spin-btn:disabled {
      opacity: .5;
      cursor: not-allowed;
      transform: none;
      box-shadow: 4px 4px 0 var(--text);
    }

    .spin-lock-msg {
      color: rgba(255, 255, 255, .7);
      font-size: .88rem;
      font-weight: 700;
      margin-top: 8px;
    }

    /* ═══ CART – Estilo minimalista My Bag ═══ */

    /* Overlay */
    .co {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(2px);
      z-index: 300;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
    }
    .co.open {
      opacity: 1;
      pointer-events: all;
    }

    /* Panel lateral */
    .cs2 {
      position: fixed;
      top: 0; right: 0; bottom: 0;
      width: 440px;
      max-width: 100vw;
      background: #fff;
      z-index: 301;
      display: flex;
      flex-direction: column;
      border-radius: 20px 0 0 20px;
      box-shadow: -8px 0 40px rgba(0,0,0,.12);
      transform: translateX(100%);
      transition: transform .35s cubic-bezier(.4,0,.2,1);
      font-family: 'Outfit', sans-serif;
      overflow: hidden;
    }
    .cs2.open { transform: translateX(0); }

    /* Header My Bag */
    .ch {
      background: #fff;
      padding: 22px 24px 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f0f0f0;
    }
    .ch h3 {
      font-family: 'Fredoka', 'Fredoka One', cursive;
      font-size: 2rem;
      font-weight: 700;
      color: #111;
      letter-spacing: -0.03em;
    }
    .cclose {
      background: none;
      border: none;
      color: #111;
      font-size: 1.4rem;
      cursor: pointer;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background .15s;
    }
    .cclose:hover { background: #f5f5f5; }

    /* Steps */
    .checkout-steps {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px 12px;
      background: #fff;
      border-bottom: 1px solid #f0f0f0;
    }
    .step-indicator {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      flex: 1;
      position: relative;
    }
    .step-num {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid #ddd;
      background: #fff;
      color: #aaa;
      font-weight: 700;
      font-size: 0.68rem;
      font-family: 'Outfit', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      z-index: 2;
    }
    .step-text {
      font-size: 0.58rem;
      font-weight: 600;
      font-family: 'Outfit', sans-serif;
      color: #bbb;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      transition: all 0.2s;
    }
    .step-line {
      flex: 1;
      height: 2px;
      background: #eee;
      margin: 0 -10px;
      position: relative;
      top: -10px;
      z-index: 1;
    }
    .step-indicator.active .step-num {
      border-color: #111;
      background: #111;
      color: #fff;
    }
    .step-indicator.active .step-text { color: #111; }
    .step-indicator.completed .step-num {
      border-color: #111;
      background: #111;
      color: #fff;
    }
    .step-indicator.completed .step-text { color: #555; }

    /* Step contents */
    .step-contents-container {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: #fafafa;
    }
    .step-content { display: none; width: 100%; }
    .step-content.active {
      display: block;
      animation: fadeInStep 0.2s ease-out;
    }
    @keyframes fadeInStep {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Checkout box */
    .checkout-box {
      background: #fff;
      border: 1px solid #ebebeb;
      border-radius: 16px;
      padding: 14px;
      margin-bottom: 10px;
      box-sizing: border-box;
    }
    .checkout-box:last-child { margin-bottom: 0; }
    .section-lbl {
      display: block;
      font-weight: 700;
      font-size: 0.78rem;
      font-family: 'Outfit', sans-serif;
      color: #111;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 10px;
    }
    .frow { display: flex; flex-direction: column; gap: 4px; }
    .frow label {
      display: block;
      font-weight: 600;
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #888;
      font-family: 'Outfit', sans-serif;
    }
    .frow input {
      width: 100%;
      padding: 10px 14px;
      border: 1.5px solid #e5e5e5;
      border-radius: 12px;
      font-family: 'Outfit', sans-serif;
      font-weight: 500;
      font-size: 0.88rem;
      color: #111;
      background: #fff;
      outline: none;
      box-sizing: border-box;
      transition: border-color 0.2s;
    }
    .frow input:focus { border-color: #111; }

    /* Cart items */
    .citems {
      flex: 1;
      overflow-y: auto;
      padding: 12px 16px;
    }
    .cempty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      gap: 14px;
      color: #bbb;
      font-family: 'Outfit', sans-serif;
    }
    .ci {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
    }
    .ci:last-child { border-bottom: none; }
    .ci-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      background: #f7f7f7;
      border: 1px solid #ebebeb;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      flex-shrink: 0;
      overflow: hidden;
    }
    .ci-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
    .ci-info { flex: 1; min-width: 0; }
    .ci-name { font-weight: 700; font-size: .88rem; font-family: 'Outfit', sans-serif; color: #111; }
    .ci-sub { font-size: .72rem; color: #999; font-weight: 500; font-family: 'Outfit', sans-serif; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ci-qty { display: flex; align-items: center; gap: 6px; }
    .ci-tot { font-family: 'Outfit', sans-serif; font-size: .95rem; font-weight: 700; color: #111; min-width: 46px; text-align: right; }

    /* Footer */
    .cf {
      border-top: 1px solid #f0f0f0;
      background: #fff;
      flex-shrink: 0;
    }
    .cf-toggle-btn {
      width: 100%;
      background: none;
      border: none;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 9px 20px;
      cursor: pointer;
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      font-size: .78rem;
      color: #555;
      transition: background .15s;
    }
    .cf-toggle-btn:hover { background: #fafafa; }
    .cf-toggle-btn .cf-chevron { display: inline-block; transition: transform .25s; font-size: .85rem; }
    .cf-toggle-btn.open .cf-chevron { transform: rotate(180deg); }
    .cf-expandable { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.4,0,.2,1); padding: 0 20px; }
    .cf-expandable.open { max-height: 600px; padding: 12px 20px 4px; }
    .cf-fixed { padding: 10px 20px 16px; }

    /* Totals */
    .ctrow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
    .ctrow .lbl { font-weight: 500; font-size: .85rem; font-family: 'Outfit', sans-serif; color: #666; }
    .ctrow .val { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .92rem; color: #111; }
    .ctrow.big .val { font-family: 'Fredoka', 'Fredoka One', cursive; font-size: 1.6rem; font-weight: 700; color: #111; }
    .sep { height: 1px; background: #f0f0f0; border: none; margin: 8px 0; }

    /* Delivery toggle */
    .dlv-toggle {
      display: flex;
      background: #f5f5f5;
      border-radius: 100px;
      overflow: hidden;
      padding: 3px;
      margin-bottom: 12px;
    }
    .dlv-opt {
      flex: 1;
      padding: 8px;
      text-align: center;
      cursor: pointer;
      font-weight: 600;
      font-size: .82rem;
      font-family: 'Outfit', sans-serif;
      transition: all .2s;
      color: #888;
      border-radius: 100px;
    }
    .dlv-opt.active { background: #111; color: #fff; }

    /* Payment options */
    .pay-opt-card {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #fff;
      border: 1.5px solid #e5e5e5;
      border-radius: 14px;
      padding: 12px 14px;
      cursor: pointer;
      transition: all 0.2s;
      user-select: none;
      box-sizing: border-box;
    }
    .pay-opt-card:hover { border-color: #111; background: #fafafa; }
    .pay-opt-card.active { border-color: #111; border-width: 2px; background: #f7f7f7; }
    .pay-opt-icon {
      font-size: 1.25rem;
      width: 36px;
      height: 36px;
      min-width: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f0f0f0;
      border-radius: 10px;
      line-height: 36px;
    }
    .pay-opt-info { flex: 1; }
    .pay-opt-name { font-weight: 700; font-size: 0.85rem; font-family: 'Outfit', sans-serif; color: #111; }
    .pay-opt-desc { font-size: 0.7rem; color: #999; font-weight: 500; font-family: 'Outfit', sans-serif; margin-top: 1px; }
    .payment-details-box { background: #fafafa; border: 1px solid #ebebeb; border-radius: 12px; padding: 12px; margin-top: 10px; box-sizing: border-box; }

    /* Step buttons */
    .step-actions { display: flex; gap: 8px; margin-top: 10px; box-sizing: border-box; }
    .step-btn {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 0.9rem;
      padding: 13px 20px;
      border-radius: 100px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .step-btn.back-btn { background: #fff; color: #111; border: 1.5px solid #ddd; }
    .step-btn.back-btn:hover { border-color: #111; background: #fafafa; }
    .step-btn.next-btn { background: #111; color: #fff; border: none; }
    .step-btn.next-btn:hover { background: #333; }

    /* Address */
    .addr-selector { margin-bottom: 10px; }
    .addr-card {
      display: flex; align-items: center; gap: 8px;
      background: #fafafa; border: 1.5px solid #e5e5e5; border-radius: 12px;
      padding: 10px 12px; margin-bottom: 6px; cursor: pointer; transition: all .2s;
    }
    .addr-card:hover, .addr-card.selected { border-color: #111; background: #f5f5f5; }
    .addr-card.selected { border-width: 2px; }
    .addr-card-info { flex: 1; min-width: 0; }
    .addr-card-nick { font-weight: 700; font-size: .85rem; color: #111; font-family: 'Outfit', sans-serif; }
    .addr-card-detail { font-size: .72rem; color: #999; font-weight: 500; font-family: 'Outfit', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .addr-add-btn {
      display: flex; align-items: center; gap: 8px;
      background: transparent; border: 1.5px dashed #ddd; border-radius: 12px;
      padding: 10px 14px; cursor: pointer; font-family: 'Outfit', sans-serif;
      font-weight: 600; font-size: .82rem; color: #555; width: 100%; transition: all .2s;
    }
    .addr-add-btn:hover { border-color: #111; color: #111; background: #fafafa; }

    /* Date input */
    .date-input {
      width: 100%; padding: 10px 14px; border: 1.5px solid #e5e5e5; border-radius: 12px;
      font-family: 'Outfit', sans-serif; font-weight: 500; font-size: .88rem; color: #111;
      outline: none; margin-bottom: 10px; box-sizing: border-box; cursor: pointer; background: #fff;
    }
    .date-input:focus { border-color: #111; }

    /* Cupon */
    .disc-row { display: flex; gap: 8px; margin-bottom: 8px; }
    .disc-input {
      flex: 1; padding: 10px 14px; border: 1.5px solid #e5e5e5; border-radius: 100px;
      font-family: 'Outfit', sans-serif; font-weight: 500; font-size: .85rem; color: #111; outline: none; background: #fff;
    }
    .disc-input:focus { border-color: #111; }
    .disc-btn {
      background: #111; color: #fff; border: none; border-radius: 100px;
      padding: 10px 16px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .82rem; cursor: pointer; transition: background .15s;
    }
    .disc-btn:hover { background: #333; }
    .disc-applied { font-size: .78rem; font-weight: 600; font-family: 'Outfit', sans-serif; margin-bottom: 6px; display: none; }

    /* Points */
    .pts-row {
      display: flex; align-items: center; justify-content: space-between;
      background: #FFFBF0; border: 1.5px solid #FFE0A0; border-radius: 12px;
      padding: 10px 14px; margin-bottom: 10px;
    }
    .pts-row span { font-size: .82rem; font-weight: 600; font-family: 'Outfit', sans-serif; color: #7B5200; }
    .pts-toggle { width: 36px; height: 20px; border-radius: 10px; border: 1.5px solid #ddd; cursor: pointer; position: relative; background: #ddd; transition: background .2s; flex-shrink: 0; }
    .pts-toggle.on { background: #111; border-color: #111; }
    .pts-toggle::after { content: ''; position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%; top: 1px; left: 1px; transition: transform .2s; }
    .pts-toggle.on::after { transform: translateX(16px); }

    /* Rewards */
    .reward-row {
      display: flex; align-items: center; justify-content: space-between;
      background: #fafafa; border: 1.5px solid #e5e5e5; border-radius: 12px;
      padding: 10px 14px; margin-bottom: 10px;
    }
    .reward-row span { font-size: .82rem; font-weight: 600; font-family: 'Outfit', sans-serif; color: #111; }
    .reward-toggle { width: 36px; height: 20px; border-radius: 10px; border: 1.5px solid #ddd; cursor: pointer; position: relative; background: #ddd; transition: background .2s; flex-shrink: 0; }
    .reward-toggle.on { background: #111; border-color: #111; }
    .reward-toggle::after { content: ''; position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%; top: 1px; left: 1px; transition: transform .2s; }
    .reward-toggle.on::after { transform: translateX(16px); }

    /* WhatsApp button */
    .wa-btn {
      width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
      background: #25D366; color: #fff; border: none; border-radius: 100px; padding: 14px;
      cursor: pointer; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .95rem; transition: background .15s;
    }
    .wa-btn:hover { background: #1fb856; }
    .wa-btn:disabled { opacity: .5; cursor: not-allowed; }

    /* PROFILE PANEL */
    .profile-panel {
      position: fixed;
      top: 64px;
      right: 0;
      bottom: 0;
      width: 400px;
      max-width: 100vw;
      background: #fff;
      z-index: 299;

      /* ESTO ES LO QUE HACE QUE SE DIVIDA EN CABECERA, CUERPO Y PIE */
      display: flex !important;
      flex-direction: column !important;

      border-left: 3px solid var(--text);
      transform: translateX(100%);
      transition: transform .35s cubic-bezier(.4, 0, .2, 1), top 0.15s ease-out;
    }

    .profile-panel.open {
      transform: translateX(0);
    }

    .pp-header {
      background: var(--blue);
      padding: 22px;
      text-align: center;
      border-bottom: 3px solid var(--text);
    }

    .pp-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: 3px solid rgba(255, 255, 255, .5);
      margin: 0 auto 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      background: rgba(255, 255, 255, .2);
      overflow: hidden;
    }

    .pp-avatar img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }

    .pp-name {
      font-family: 'Fredoka One', cursive;
      font-size: 1.2rem;
      color: #fff;
    }

    .pp-email {
      font-size: .78rem;
      color: rgba(255, 255, 255, .7);
      font-weight: 600;
      margin-top: 2px;
    }

    .pp-body {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      padding-bottom: 100px !important;
    }

    .loyalty-card {
      background: linear-gradient(135deg, var(--blue), var(--blue-dark));
      border-radius: 20px;
      padding: 22px;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
    }

    .loyalty-card::before {
      content: '🍪';
      position: absolute;
      right: -10px;
      top: -10px;
      font-size: 6rem;
      opacity: .08;
    }

    .lc-title {
      font-family: 'Fredoka One', cursive;
      font-size: .85rem;
      color: rgba(255, 255, 255, .7);
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .lc-points {
      font-family: 'Fredoka One', cursive;
      font-size: 2.8rem;
      color: var(--yellow);
      line-height: 1;
    }

    .lc-pts-lbl {
      font-size: .75rem;
      color: rgba(255, 255, 255, .6);
      font-weight: 700;
      margin-bottom: 12px;
    }

    .lc-progress-bg {
      background: rgba(255, 255, 255, .2);
      border-radius: 100px;
      height: 8px;
      margin-bottom: 6px;
    }

    .lc-progress-fill {
      background: var(--yellow);
      border-radius: 100px;
      height: 8px;
      transition: width .5s ease;
    }

    .lc-progress-lbl {
      font-size: .7rem;
      color: rgba(255, 255, 255, .6);
      font-weight: 700;
      display: flex;
      justify-content: space-between;
    }

    .lc-tier {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, .15);
      border: 1.5px solid rgba(255, 255, 255, .3);
      border-radius: 100px;
      padding: 5px 12px;
      font-size: .75rem;
      font-weight: 900;
      color: #fff;
      margin-top: 10px;
    }

    .qr-wrap {
      background: #FFFFFF !important;
      /* Cuadro blanco de fondo */
      padding: 10px;
      border-radius: 15px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      display: inline-block;
    }

    /* Rewards */
    .rewards-section {
      background: var(--off);
      border: 2px solid var(--blue-mid);
      border-radius: 14px;
      padding: 14px;
      margin-bottom: 16px;
    }

    .rewards-section h3 {
      font-family: 'Fredoka One', cursive;
      font-size: 1rem;
      color: var(--blue);
      margin-bottom: 10px;
    }

    .reward-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px;
      background: #fff;
      border: 2px solid var(--blue-mid);
      border-radius: 10px;
      margin-bottom: 7px;
    }

    .reward-icon {
      font-size: 1.4rem;
      flex-shrink: 0;
    }

    .reward-info {
      flex: 1;
    }

    .reward-name {
      font-weight: 800;
      font-size: .85rem;
    }

    .reward-req {
      font-size: .72rem;
      color: var(--muted);
      font-weight: 600;
    }

    .reward-locked {
      opacity: .45;
      filter: grayscale(.8);
    }

    /* Loyalty Levels Page */
    .loyalty-modal .mbox { max-width: 560px; }
    .levels-grid { display: flex; flex-direction: column; gap: 12px; }
    .level-card {
      border-radius: 14px;
      border: 2.5px solid var(--blue-mid);
      background: #fff;
      overflow: hidden;
      transition: transform .15s;
    }
    .level-card:hover { transform: translateY(-2px); }
    .level-card-hdr {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 16px;
      font-family: 'Fredoka One', cursive;
    }
    .level-card-hdr .lc-emoji { font-size: 1.6rem; }
    .level-card-hdr .lc-title { font-size: 1rem; color: #fff; flex: 1; }
    .level-card-hdr .lc-pts { font-size: .72rem; font-weight: 800; color: rgba(255,255,255,.85); background: rgba(0,0,0,.18); border-radius: 100px; padding: 3px 9px; }
    .level-card-body { padding: 10px 14px 12px; }
    .lc-reward-row { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; color: var(--text); padding: 5px 0; border-bottom: 1px dashed var(--blue-mid); }
    .lc-reward-row:last-child { border-bottom: none; }
    .lc-reward-row .lc-ri { font-size: 1.1rem; flex-shrink: 0; }
    .lc-no-rewards { font-size: .78rem; color: var(--muted); font-weight: 600; text-align: center; padding: 8px 0; }
    .current-level-badge { font-size: .65rem; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; background: #25D366; color: #fff; border-radius: 100px; padding: 2px 8px; margin-left: 6px; }

    .pp-section h3 {
      font-family: 'Fredoka One', cursive;
      font-size: 1.05rem;
      color: var(--blue);
      margin-bottom: 10px;
    }

    /* Order items in profile */
    .order-item {
      background: var(--off);
      border: 2px solid var(--blue-mid);
      border-radius: 14px;
      padding: 13px;
      margin-bottom: 10px;
    }

    .oi-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }

    .oi-id {
      font-size: .72rem;
      font-weight: 800;
      color: var(--muted);
      text-transform: uppercase;
    }

    .oi-total {
      font-family: 'Fredoka One', cursive;
      font-size: 1rem;
      color: var(--blue);
    }

    .oi-date {
      font-size: .72rem;
      color: var(--muted);
      font-weight: 600;
      margin-bottom: 4px;
    }

    .oi-items {
      font-size: .78rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
    }

    .oi-status {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 100px;
      font-size: .68rem;
      font-weight: 900;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .s-pending {
      background: #FFF3CD;
      color: #856404;
      border: 1.5px solid #FFCA2C;
    }

    .s-confirmed {
      background: #D1ECF1;
      color: #0C5460;
      border: 1.5px solid #BEE5EB;
    }

    .s-ready {
      background: #FFF0E0;
      color: #7B3000;
      border: 1.5px solid #FF8C00;
    }

    .s-onway {
      background: #E8D5F5;
      color: #5B0F8A;
      border: 1.5px solid #9B59B6;
    }

    .s-delivered {
      background: #D4EDDA;
      color: #155724;
      border: 1.5px solid #C3E6CB;
    }

    .reorder-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--blue-faint);
      border: 2px solid var(--blue-mid);
      color: var(--blue);
      border-radius: 100px;
      padding: 6px 14px;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      font-size: .78rem;
      cursor: pointer;
      transition: all .15s;
    }

    .reorder-btn:hover {
      background: var(--blue);
      color: #fff;
      border-color: var(--blue);
    }

    .pp-logout {
      width: 100%;
      background: #fff;
      color: var(--red);
      border: 2.5px solid var(--red);
      border-radius: 14px;
      padding: 12px;
      font-family: 'Nunito', sans-serif;
      font-weight: 900;
      font-size: .9rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .pp-logout:hover {
      background: var(--red);
      color: #fff;
    }

    /* Botón de cerrar para el panel de perfil */
    .pp-close {
      position: absolute;
      top: 15px;
      right: 15px;
      background: rgba(255, 255, 255, 0.15);
      /* Blanco semitransparente */
      border: 2px solid rgba(255, 255, 255, 0.4);
      color: #fff;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 0.9rem;
      transition: all 0.2s;
      z-index: 10;
    }

    .pp-close:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: scale(1.1);
    }

    /* Asegurar que el header del perfil permita posicionar el botón */
    .pp-header {
      position: relative;
    }

    /* MODALS */
    .mo {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 40, .65);
      z-index: 99999;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .mo.open {
      opacity: 1 !important;
      pointer-events: all !important;
      visibility: visible !important;
      display: flex !important;
    }

    .mbox {
      background: #fff;
      border: 3px solid var(--text);
      border-radius: 28px;
      padding: 30px;
      box-shadow: 8px 8px 0 var(--blue);
      max-width: 500px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      transform: scale(.94);
      transition: transform .25s;
    }

    .mo.open .mbox {
      transform: scale(1);
    }



    /* Variants */
    .vm-img {
      width: 100%;
      height: 140px;
      background: var(--blue-faint);
      border: 2.5px solid var(--blue-mid);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4.5rem;
      margin-bottom: 16px;
      overflow: hidden;
    }

    .vm-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .var-section {
      margin-bottom: 16px;
    }

    .var-section h4 {
      font-family: 'Fredoka One', cursive;
      font-size: 1rem;
      color: var(--text);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .var-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .var-chip {
      padding: 7px 14px;
      border: 2.5px solid var(--blue-mid);
      border-radius: 100px;
      font-weight: 800;
      font-size: .8rem;
      cursor: pointer;
      background: #fff;
      color: var(--text);
      transition: all .15s;
    }

    .var-chip:hover,
    .var-chip.sel {
      background: var(--blue);
      color: #fff;
      border-color: var(--blue);
    }

    .var-chip.sel-multi {
      background: var(--blue-faint);
      border-color: var(--blue);
      color: var(--blue);
    }

    .var-section.error h4 {
      color: var(--red);
    }

    .var-section.error .var-chips {
      padding: 8px;
      border-radius: 12px;
      border: 2px dashed var(--red);
      background: #fff5f5;
      animation: shake .3s ease;
    }

    @keyframes shake {

      0%,
      100% {
        transform: translateX(0);
      }

      25% {
        transform: translateX(-6px);
      }

      75% {
        transform: translateX(6px);
      }
    }

    .var-req {
      font-size: .65rem;
      font-weight: 900;
      color: var(--red);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-left: 4px;
      display: none;
    }

    .var-section.error .var-req {
      display: inline;
    }

    /* Box builder */
    .box-builder {
      background: var(--off);
      border: 2px solid var(--blue-mid);
      border-radius: 14px;
      padding: 14px;
      margin-bottom: 14px;
    }

    .box-progress {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      background: #fff;
      border: 2px solid var(--blue-mid);
      border-radius: 10px;
      padding: 8px 12px;
    }

    .box-progress-text {
      font-weight: 800;
      font-size: .85rem;
      color: var(--text);
    }

    .box-progress-count {
      font-family: 'Fredoka One', cursive;
      font-size: 1.2rem;
      color: var(--blue);
    }

    .box-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px dashed var(--blue-mid);
    }

    .box-item:last-child {
      border-bottom: none;
    }

    .box-item-name {
      font-weight: 700;
      font-size: .85rem;
      flex: 1;
    }

    .box-item-ctrl {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .box-qb {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 2px solid var(--text);
      background: #fff;
      font-size: .9rem;
      font-weight: 900;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .box-qb:hover {
      background: var(--blue);
      color: #fff;
      border-color: var(--blue);
    }

    .box-qb:disabled {
      opacity: .3;
      cursor: not-allowed;
    }

    .box-qn {
      font-weight: 900;
      font-size: .9rem;
      min-width: 16px;
      text-align: center;
    }

    .vm-qty {
      display: flex;
      align-items: center;
      gap: 12px;
      justify-content: center;
      margin: 10px 0;
    }

    .vq-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 2.5px solid var(--text);
      background: #fff;
      font-size: 1.2rem;
      font-weight: 900;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .vq-btn:hover {
      background: var(--blue);
      color: #fff;
      border-color: var(--blue);
    }

    .vq-num {
      font-family: 'Fredoka One', cursive;
      font-size: 1.8rem;
      color: var(--blue);
      min-width: 48px;
      text-align: center;
      border: none;
      background: transparent;
      outline: none;
      -moz-appearance: textfield;
    }
    .vq-num::-webkit-outer-spin-button,
    .vq-num::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .vm-total {
      background: var(--blue-faint);
      border: 2px solid var(--blue-mid);
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
    }

    .vm-total span {
      font-weight: 800;
      font-size: .88rem;
      color: var(--muted);
    }

    .vm-total strong {
      font-family: 'Fredoka One', cursive;
      font-size: 1.4rem;
      color: var(--blue);
    }

    .vm-add {
      width: 100%;
      background: var(--blue);
      color: #fff;
      border: 2.5px solid var(--text);
      border-radius: 14px;
      padding: 13px;
      font-family: 'Nunito', sans-serif;
      font-weight: 900;
      font-size: .95rem;
      cursor: pointer;
      box-shadow: 3px 3px 0 var(--text);
    }

    .vm-add:hover {
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0 var(--text);
    }

    .vm-add:disabled {
      opacity: .45;
      cursor: not-allowed;
      transform: none !important;
      box-shadow: 3px 3px 0 var(--text) !important;
    }

    /* Map */
    .map-container {
      width: 100%;
      height: 200px;
      border: 2.5px solid var(--blue-mid);
      border-radius: 14px;
      overflow: hidden;
      margin-bottom: 12px;
      position: relative;
      background: var(--blue-faint);
    }

    .map-ph {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--muted);
    }

    .map-ph p {
      font-weight: 700;
      font-size: .82rem;
    }

    #mapFrame {
      width: 100%;
      height: 100%;
      border: none;
      display: none;
    }

    /* Spin result modal */
    .spin-result {
      text-align: center;
    }

    .spin-result-icon {
      font-size: 5rem;
      margin-bottom: 12px;
    }

    .spin-result h2 {
      font-family: 'Fredoka One', cursive;
      font-size: 1.8rem;
      color: var(--blue);
      margin-bottom: 8px;
    }

    .spin-result p {
      color: var(--muted);
      font-weight: 600;
      font-size: .95rem;
    }

    .spin-code {
      background: var(--yellow);
      border: 3px solid var(--text);
      border-radius: 14px;
      padding: 12px 20px;
      font-family: 'Fredoka One', cursive;
      font-size: 1.5rem;
      color: var(--text);
      display: inline-block;
      margin: 14px 0;
      letter-spacing: 2px;
    }

    /* FOOTER */
    footer {
      background: var(--text);
      padding: 44px 60px 26px;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 44px;
      width: 100%;
      flex-shrink: 0;
    }

    .fb h3 {
      font-family: 'Fredoka One', cursive;
      font-size: 1.7rem;
      color: var(--blue-mid);
      margin-bottom: 7px;
    }

    .fb p {
      font-size: .82rem;
      color: rgba(255, 255, 255, .5);
      line-height: 1.6;
      max-width: 240px;
    }

    footer h4 {
      font-family: 'Fredoka One', cursive;
      font-size: .95rem;
      color: var(--blue-mid);
      margin-bottom: 10px;
    }

    footer ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    footer ul a {
      color: rgba(255, 255, 255, .55);
      text-decoration: none;
      font-size: .82rem;
      font-weight: 700;
    }

    footer ul a:hover {
      color: #fff;
    }

    .fbot {
      background: var(--text);
      border-top: 1px solid rgba(255, 255, 255, .1);
      padding: 14px 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      flex-shrink: 0;
    }

    .fbot p {
      font-size: .75rem;
      color: rgba(255, 255, 255, .35);
    }

    .toast {
      position: fixed;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%) translateY(80px);
      background: var(--text);
      color: #fff;
      border-radius: 100px;
      padding: 11px 22px;
      font-weight: 800;
      font-size: .86rem;
      z-index: 999;
      transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
      pointer-events: none;
      white-space: nowrap;
      border: 2px solid rgba(255, 255, 255, .2);
    }

    .toast.show {
      transform: translateX(-50%) translateY(0);
    }

    .fb-loading {
      position: fixed;
      inset: 0;
      background: var(--blue);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      transition: opacity .5s;
    }

    .fb-loading.done {
      opacity: 0;
      pointer-events: none;
    }

    .fb-loading h2 {
      font-family: 'Fredoka One', cursive;
      font-size: 2rem;
      color: #fff;
    }

    .fb-spin {
      width: 40px;
      height: 40px;
      border: 4px solid rgba(255, 255, 255, .3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin .8s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* Edit profile tabs */
    .ep-tab {
      flex: 1;
      padding: 10px;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      font-size: .85rem;
      border: none;
      cursor: pointer;
      background: #fff;
      color: var(--muted);
      border-bottom: 3px solid transparent;
      transition: all .2s;
    }

    .ep-tab.active {
      color: var(--blue);
      border-bottom-color: var(--blue);
    }

    @media(max-width:900px) {
      .nav-links {
        display: none;
      }

      .ig-btn {
        display: none;
      }

      .hamburger {
        display: flex;
      }
    }

    @media(max-width:640px) {
      .nav-inner {
        padding: 0 16px;
      }

      .nav-logo {
        font-size: 1.35rem;
        gap: 6px;
      }

      .user-btn span {
        display: none;
      }

      .cart-btn span:not(.cc) {
        display: none;
      }

      .hero {
        grid-template-columns: 1fr;
        padding: 80px 20px 0;
        text-align: center;
      }

      .hero-left {
        padding: 36px 0 28px;
      }

      .hero-right img {
        max-width: 240px;
      }

      .hcta {
        justify-content: center;
      }

      .hero-sub {
        margin: 0 auto 32px;
      }

      .cs {
        padding: 50px 16px 70px;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
      }

      .pg {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 14px;
      }

      .cs2,
      .profile-panel {
        width: 100vw;
      }

      .strip {
        flex-direction: column;
      }

      .si {
        border-right: none;
        border-bottom: 2px solid rgba(255, 255, 255, .1);
      }

      .loyalty-banner,
      .spin-section {
        padding: 20px;
      }

      .spin-container {
        flex-direction: column;
      }

      footer {
        grid-template-columns: 1fr;
        padding: 36px 20px 22px;
        gap: 24px;
      }

      .fbot {
        flex-direction: column;
        gap: 6px;
        padding: 12px 20px;
        text-align: center;
      }
    }

    /* --- AJUSTES DE CATÁLOGO PARA MÓVIL --- */
    @media (max-width: 640px) {
      /* Grid horizontal scroll en móvil */
      .pg {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
      }
      .store-category {
        width: 100% !important;
        min-width: 0 !important;
      }
      .store-category h2 { font-size: 1.5rem; margin-bottom: 12px; }
      .store-product-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        gap: 14px !important;
        padding-bottom: 16px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100% !important;
        min-width: 0 !important;
        /* Para que el scroll empiece desde el borde pero se vea bien */
        padding-right: 16px !important;
      }
      .store-product-grid::-webkit-scrollbar { display: none; }

      .pcard {
        min-width: 220px !important;
        max-width: 220px !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start;
      }

      .pfoot {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
      }

      .pprice-wrap {
        align-items: flex-start !important;
        text-align: left;
      }

      .add-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px !important;
      }

      .qc {
        justify-content: center !important;
        width: 100% !important;
      }
    }

    /* --- REORGANIZACIÓN TARJETA PERFIL (Nivel -> Barra -> Puntos -> Botón) --- */
    .loyalty-card {
      display: flex !important;
      flex-direction: column !important;
      padding: 20px !important;
    }

    /* Forzamos el orden jerárquico correcto */
    #lcTierBadge {
      order: 1 !important;
      margin-bottom: 12px !important;
      align-self: flex-start;
    }

    .lc-progress-bg {
      order: 2 !important;
    }

    .lc-progress-lbl {
      order: 3 !important;
      margin-bottom: 20px !important;
    }

    .lc-points {
      order: 4 !important;
      text-align: center !important;
      margin-top: 10px !important;
    }

    .lc-pts-lbl {
      order: 5 !important;
      text-align: center !important;
      margin-bottom: 15px !important;
    }

    /* Temu floating widget style */
    .temu-widget {
      position: fixed;
      bottom: 85px;
      right: 20px;
      width: 65px;
      height: 65px;
      background: radial-gradient(circle, #ff6b35 0%, #ff4d00 100%);
      border-radius: 50%;
      box-shadow: 0 4px 20px rgba(255, 77, 0, 0.4), inset 0 2px 6px rgba(255,255,255,0.4);
      z-index: 998;
      cursor: pointer;
      display: none; /* Controlled dynamically */
      align-items: center;
      justify-content: center;
      border: 3px solid #fff;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      animation: temuPulse 2s infinite;
    }
    .temu-widget:hover {
      transform: scale(1.12);
      box-shadow: 0 6px 24px rgba(255, 77, 0, 0.6);
    }
    .temu-widget-inner {
      font-size: 2.2rem;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: temuRotate 12s linear infinite;
    }
    @keyframes temuPulse {
      0% { box-shadow: 0 0 0 0 rgba(255, 77, 0, 0.7), 0 4px 20px rgba(255, 77, 0, 0.4); }
      70% { box-shadow: 0 0 0 12px rgba(255, 77, 0, 0), 0 4px 20px rgba(255, 77, 0, 0.4); }
      100% { box-shadow: 0 0 0 0 rgba(255, 77, 0, 0), 0 4px 20px rgba(255, 77, 0, 0.4); }
    }
     @keyframes wobble {
       0%, 100% { transform: rotate(0deg); }
       15% { transform: rotate(-10deg) scale(1.05); }
       30% { transform: rotate(10deg) scale(1.05); }
       45% { transform: rotate(-5deg) scale(1.02); }
       60% { transform: rotate(5deg) scale(1.02); }
       75% { transform: rotate(-2deg); }
     }