/* Kukaramakara — Mejor Juntos · Cuantium-Wibi™ */

#mj-intro, #mj-intro *, #mj-modal, #mj-modal *, #mj-fab, #mj-fab *,
.mj-seal, .mj-seal *, .mj-toast, .mj-toast *{
  font-family:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-style:normal;
}

:root{
  --mj-bg:#F7EAF6; --mj-pri:#EC2C8F; --mj-sec:#7B2CBF; --mj-dark:#2B1B2E;
  --mj-shadow:0 18px 50px rgba(43,27,46,.22);
}

.mj-hidden{display:none !important}

/* ============================ INTRO ============================= */
#mj-intro{
  position:fixed; inset:0; z-index:2147483000;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--mj-bg);
  --t:1; /* factor de velocidad; 1 = normal, 1.5 = 50% más lento */
}
#mj-intro .mj-curtain{
  position:absolute; top:0; bottom:0; width:52%;
  background:linear-gradient(160deg,var(--mj-sec) 0%,var(--mj-pri) 100%);
  transition:transform calc(1.35s * var(--t)) cubic-bezier(.65,0,.2,1);
  z-index:3;
}
#mj-intro .mj-curtain.l{left:0;  transform:translateX(0)}
#mj-intro .mj-curtain.r{right:0; transform:translateX(0)}
#mj-intro.mj-open .mj-curtain.l{transform:translateX(-102%)}
#mj-intro.mj-open .mj-curtain.r{transform:translateX(102%)}
#mj-intro.mj-open{background:transparent; pointer-events:none}
#mj-intro.mj-open .mj-stage{opacity:0; transition:opacity calc(.55s * var(--t)) ease}

#mj-intro .mj-stage, #mj-intro .mj-stage *{color:#fff}
#mj-intro .mj-stage{
  position:relative; z-index:5; text-align:center; color:#fff !important;
  padding:24px; max-width:560px;
}
#mj-intro .mj-logo{max-width:250px; width:62vw; margin:0 auto 30px; display:block;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.28));
  animation:mj-logo-in calc(1.15s * var(--t)) calc(.25s * var(--t)) cubic-bezier(.16,1,.3,1) both}
#mj-intro .mj-wordmark{font-size:clamp(22px,6vw,36px); font-weight:900; letter-spacing:.05em;
  margin:0 0 30px; text-transform:uppercase;
  animation:mj-logo-in calc(1.15s * var(--t)) calc(.25s * var(--t)) cubic-bezier(.16,1,.3,1) both}

#mj-intro .mj-pair{display:flex; align-items:center; justify-content:center; margin-bottom:26px}
#mj-intro .mj-garment{width:104px; height:104px; flex:0 0 auto}
#mj-intro .mj-garment.a{animation:mj-join-l calc(1.5s * var(--t)) calc(1.1s * var(--t)) cubic-bezier(.34,1.3,.5,1) both}
#mj-intro .mj-garment.b{animation:mj-join-r calc(1.5s * var(--t)) calc(1.1s * var(--t)) cubic-bezier(.34,1.3,.5,1) both}
#mj-intro .mj-spark{width:52px; height:52px; align-self:center; opacity:0;
  animation:mj-spark calc(.95s * var(--t)) calc(2.45s * var(--t)) cubic-bezier(.2,1.5,.4,1) both}

#mj-intro .mj-tag{
  display:block; color:#fff; line-height:.88;
  animation:mj-tag-in calc(1.05s * var(--t)) calc(3s * var(--t)) cubic-bezier(.2,1.4,.4,1) both;
}
#mj-intro .mj-tag .k{
  display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--mj-pri);
  font-size:clamp(11px,3vw,14px); font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 18px; border-radius:999px; margin-bottom:14px;
}
#mj-intro .mj-tag .k svg{width:14px; height:14px}
#mj-intro .mj-tag .l1{display:block; font-weight:900; text-transform:uppercase;
  color:#fff !important; font-size:clamp(48px,15vw,86px); letter-spacing:-.03em;
  text-shadow:0 10px 30px rgba(80,10,60,.35)}
#mj-intro .mj-tag .l2{display:block; font-weight:900; text-transform:uppercase;
  color:#FFC8E6 !important; font-size:clamp(30px,9.5vw,54px); letter-spacing:-.012em;
  text-shadow:0 8px 24px rgba(80,10,60,.3)}
#mj-intro .mj-tag .k{color:var(--mj-pri) !important}
#mj-intro .mj-tag .k svg{flex:0 0 auto}
#mj-intro .mj-wordmark{color:#fff !important}
#mj-intro .mj-skip{
  position:absolute; right:18px; bottom:18px; z-index:6;
  background:rgba(255,255,255,.16) !important; color:#fff !important; border:0 !important;
  font-size:12px !important; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 16px !important; border-radius:999px !important; cursor:pointer;
  opacity:0; animation:mj-fade-in .5s calc(1.4s * var(--t)) ease both}
#mj-intro .mj-skip:hover{background:rgba(255,255,255,.3) !important}

/* corazones */
.mj-heart{position:absolute; bottom:-40px; z-index:4; opacity:0; pointer-events:none;
  animation:mj-rise linear forwards}
.mj-heart svg{display:block}

@keyframes mj-rise{
  0%{opacity:0; transform:translateY(0) scale(.6) rotate(0)}
  10%{opacity:.95}
  100%{opacity:0; transform:translateY(-112vh) scale(1.15) rotate(28deg)}
}
@keyframes mj-fade-in{from{opacity:0} to{opacity:1}}
@keyframes mj-logo-in{
  0%{opacity:0; transform:scale(.78) translateY(22px); filter:blur(6px)}
  60%{opacity:1; filter:blur(0)}
  100%{opacity:1; transform:none; filter:blur(0)}
}
@keyframes mj-tag-in{
  0%{opacity:0; transform:scale(.6) translateY(16px)}
  70%{opacity:1; transform:scale(1.06)}
  100%{opacity:1; transform:none}
}
@keyframes mj-pop{from{opacity:0; transform:scale(.72) translateY(14px)} to{opacity:1; transform:none}}
@keyframes mj-join-l{
  0%{transform:translateX(-190px) rotate(-16deg); opacity:0}
  55%{opacity:1}
  100%{transform:translateX(16px); opacity:1}
}
@keyframes mj-join-r{
  0%{transform:translateX(190px) rotate(16deg); opacity:0}
  55%{opacity:1}
  100%{transform:translateX(-16px); opacity:1}
}
@keyframes mj-spark{0%{opacity:0; transform:scale(.15) rotate(-40deg)}60%{opacity:1; transform:scale(1.5) rotate(10deg)}100%{opacity:1; transform:scale(1) rotate(0)}}

/* ==================== SELLO EN FICHA DE PRODUCTO ==================== */
.mj-seal{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(120deg,var(--mj-sec),var(--mj-pri));
  color:#fff !important; font-weight:800 !important; font-size:13px !important; letter-spacing:.03em;
  padding:8px 15px !important; border-radius:999px !important; margin:0 0 14px !important;
  text-shadow:0 1px 2px rgba(43,27,46,.25);
  box-shadow:0 8px 22px rgba(236,44,143,.28);
  animation:mj-tag-in calc(1.1s * var(--t)) calc(.55s * var(--t)) cubic-bezier(.2,1.5,.4,1) both;
}
.mj-seal, .mj-seal *{color:#fff !important}
.mj-seal span{color:#fff !important}
.mj-seal svg{width:17px !important; height:17px !important; flex:0 0 auto; animation:mj-beat 2.4s ease-in-out infinite}
@keyframes mj-beat{0%,100%{transform:scale(1)}18%{transform:scale(1.22)}36%{transform:scale(1)}54%{transform:scale(1.14)}}

/* ==================== AGREGAR AL CARRITO ==================== */
.mj-fly{position:fixed; z-index:2147482000; pointer-events:none; width:40px; height:40px;
  transition:transform 1.25s cubic-bezier(.45,-.2,.35,1), opacity 1.25s ease}
.mj-burst{position:fixed; z-index:2147482000; pointer-events:none; width:18px; height:18px; opacity:0;
  animation:mj-burst 1.15s ease-out forwards}
@keyframes mj-burst{0%{opacity:1; transform:translate(0,0) scale(.4)}100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(1.2)}}

.mj-toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(30px);
  z-index:2147482500; background:var(--mj-dark); color:#fff;
  padding:13px 20px; border-radius:14px; font-weight:700; font-size:14px;
  display:flex; align-items:center; gap:10px; box-shadow:var(--mj-shadow);
  opacity:0; transition:opacity .3s ease, transform .3s ease;
  max-width:min(430px,92vw); width:max-content; line-height:1.35;
}
.mj-toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
.mj-toast b{color:#FFC8E6}
.mj-toast svg{width:20px !important; flex:0 0 auto}

/* ============================ MODAL JUEGO ============================ */
#mj-modal{position:fixed; inset:0; z-index:2147482800; display:flex;
  align-items:center; justify-content:center; padding:16px;
  background:rgba(43,27,46,.62); opacity:0; transition:opacity .5s ease}
#mj-modal.on{opacity:1}

#mj-modal .mj-heart{z-index:0}
#mj-modal .mj-box{
  position:relative; z-index:2; text-align:center; width:100%; max-width:480px; max-height:92vh; overflow:auto;
  background:var(--mj-bg); border-radius:24px; box-shadow:var(--mj-shadow);
  padding:26px 22px 24px; text-align:center;
  transform:translateY(28px) scale(.95); transition:transform .6s cubic-bezier(.2,1.3,.4,1);
  -webkit-overflow-scrolling:touch;
}
#mj-modal.on .mj-box{transform:none}

#mj-modal .mj-x{
  position:absolute; top:10px; right:12px; z-index:3;
  width:34px !important; height:34px !important; min-width:0 !important; border-radius:50% !important;
  border:0 !important; padding:0 !important; margin:0 !important;
  background:rgba(43,27,46,.08) !important; color:var(--mj-dark) !important;
  font-size:19px !important; line-height:1 !important; cursor:pointer; transition:background .2s}
#mj-modal .mj-x:hover{background:rgba(43,27,46,.18) !important}

#mj-modal .mj-kicker{display:inline-block; background:var(--mj-pri); color:#fff;
  font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px; margin-bottom:12px}
#mj-modal h3{font-size:clamp(21px,5.4vw,27px); line-height:1.06; font-weight:900;
  color:var(--mj-sec); margin:0 0 8px; text-transform:uppercase; letter-spacing:-.01em}

/* lockup "MEJOR / JUNTOS" igual a la pieza */
.mj-lock{margin:2px 0 12px; line-height:.86}
.mj-lock .l1{
  display:block; font-weight:900; text-transform:uppercase; color:var(--mj-pri);
  font-size:clamp(46px,13.5vw,74px); letter-spacing:-.028em;
  text-shadow:0 6px 22px rgba(236,44,143,.22);
}
.mj-lock .l2{
  display:block; font-weight:900; text-transform:uppercase; color:var(--mj-sec);
  font-size:clamp(30px,8.6vw,48px); letter-spacing:-.012em; margin-top:2px;
}
.mj-pill{
  display:inline-flex; align-items:center; gap:8px; background:var(--mj-pri); color:#fff;
  font-size:clamp(11px,3vw,13px); font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 16px; border-radius:999px; margin-bottom:10px;
}
.mj-pill svg{width:13px; height:13px}
#mj-modal p.mj-sub{color:var(--mj-dark); opacity:.8; font-size:14.5px; line-height:1.45; margin:0 0 18px}

.mj-box .mj-btn{
  display:inline-block; width:100% !important; border:0 !important; cursor:pointer; margin:0 0 4px !important;
  background:linear-gradient(120deg,var(--mj-sec),var(--mj-pri)) !important; color:#fff !important;
  font-weight:900; font-size:16px !important; letter-spacing:.02em; text-transform:uppercase;
  padding:15px 20px !important; border-radius:999px !important; height:auto !important; line-height:1.25 !important;
  box-shadow:0 10px 26px rgba(236,44,143,.34) !important;
  transition:transform .18s ease, box-shadow .18s ease}
.mj-box .mj-btn:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(236,44,143,.42) !important}
.mj-box .mj-btn:disabled{opacity:.6; cursor:default; transform:none}
.mj-box .mj-btn.ghost{background:none !important; color:var(--mj-sec) !important; box-shadow:none !important;
  text-decoration:underline; font-size:13px !important; padding:10px !important; text-transform:none; font-weight:700}

/* tablero */
.mj-board{margin:6px 0 4px}
.mj-row{display:flex; justify-content:center; gap:10px; margin-bottom:10px}
.mj-card{
  transition:transform .35s cubic-bezier(.2,1.3,.4,1), border-color .3s, box-shadow .35s, opacity .4s;
  flex:1 1 0; max-width:120px; aspect-ratio:1/1.08; border:2px solid transparent; border-radius:18px !important;
  background:#fff !important; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(43,27,46,.10);
  padding:8px}
.mj-card svg{width:100%; height:100%}
.mj-card:hover{transform:translateY(-5px)}
.mj-card.sel{animation:mj-card-pulse 1.1s ease-in-out infinite}
@keyframes mj-card-pulse{0%,100%{box-shadow:0 10px 24px rgba(236,44,143,.3)}50%{box-shadow:0 10px 34px rgba(236,44,143,.62)}}
.mj-card.sel{border-color:var(--mj-pri); box-shadow:0 10px 24px rgba(236,44,143,.3); transform:translateY(-4px)}
.mj-card.dim{opacity:.38; pointer-events:none}
.mj-card.done{pointer-events:none}
.mj-step{font-size:13px; font-weight:800; color:var(--mj-sec); letter-spacing:.04em;
  text-transform:uppercase; margin:0 0 12px}

/* resultado */
.mj-prize{
  font-size:clamp(38px,11vw,54px); font-weight:900; color:var(--mj-pri); line-height:1;
  margin:6px 0 4px; animation:mj-tag-in .9s cubic-bezier(.2,1.5,.4,1) both}
.mj-prize small{display:block; font-size:14px; font-weight:800; color:var(--mj-sec);
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px}

/* formulario */
.mj-form{text-align:left; margin-top:14px}
.mj-form .mj-2{display:flex; gap:9px}
.mj-form .mj-2 > *{flex:1 1 0; min-width:0}
.mj-form input[type=text],.mj-form input[type=email],.mj-form input[type=tel]{
  width:100% !important; box-sizing:border-box; border:1.5px solid rgba(123,44,191,.22) !important;
  background:#fff !important; border-radius:12px !important; padding:12px 14px !important;
  font-size:15px !important; color:var(--mj-dark) !important; margin:0 0 9px !important;
  transition:border-color .2s; height:auto !important; min-height:0 !important; box-shadow:none !important}
.mj-form input:focus{outline:0; border-color:var(--mj-pri) !important}
.mj-consent{display:flex; gap:9px; align-items:flex-start; font-size:11.5px; line-height:1.4;
  color:var(--mj-dark); opacity:.85; margin:4px 0 14px}
.mj-consent input{margin-top:2px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--mj-pri)}
.mj-consent a{color:var(--mj-sec); text-decoration:underline}
.mj-err{background:#FFE3EF; color:#B00050; border-radius:10px; padding:9px 12px;
  font-size:13px; font-weight:700; margin-bottom:10px}

.mj-code{display:inline-block; background:#fff; border:2px dashed var(--mj-pri); color:var(--mj-sec);
  font-weight:900; letter-spacing:.08em; padding:10px 18px; border-radius:12px; margin:10px 0 4px; font-size:15px}
.mj-fine{font-size:11px; color:var(--mj-dark); opacity:.65; line-height:1.45; margin-top:14px}
.mj-credit{font-size:10px; opacity:.5; margin-top:14px; color:var(--mj-dark)}
.mj-credit a{color:inherit; text-decoration:none}

/* burbuja flotante para reabrir el juego */
#mj-fab{
  position:fixed; right:16px; bottom:88px; z-index:2147482400; cursor:pointer;
  border:0 !important; width:60px !important; height:60px !important; min-width:0 !important;
  border-radius:50% !important; padding:0 !important; margin:0 !important; line-height:1 !important;
  background:linear-gradient(120deg,var(--mj-sec),var(--mj-pri)) !important;
  box-shadow:0 12px 28px rgba(236,44,143,.42) !important;
  display:flex !important; align-items:center; justify-content:center;
  animation:mj-float 2.6s ease-in-out infinite}
#mj-fab:hover{background:linear-gradient(120deg,var(--mj-pri),var(--mj-sec)) !important}
#mj-fab svg{width:28px !important; height:28px !important}
#mj-fab span{position:absolute; top:-7px; right:-6px; background:#fff !important; color:var(--mj-pri) !important;
  font-size:9px !important; font-weight:900; padding:3px 7px !important; border-radius:999px !important;
  text-transform:uppercase; box-shadow:0 3px 8px rgba(0,0,0,.18); letter-spacing:.04em;
  line-height:1.2 !important; margin:0 !important}
@keyframes mj-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

@media (max-width:480px){
  #mj-modal .mj-box{padding:22px 16px 20px; border-radius:20px}
  .mj-card{max-width:none}
  #mj-fab{width:54px; height:54px; bottom:80px; right:12px}
}

@media (prefers-reduced-motion:reduce){
  #mj-intro,#mj-intro *,.mj-heart,.mj-seal,.mj-seal svg,#mj-fab,.mj-prize{animation:none !important}
  #mj-modal,.mj-box,.mj-toast{transition:none !important}
}

/* espera del premio */
.mj-dots{display:flex; gap:8px; justify-content:center; margin:26px 0 10px}
.mj-dots i{width:11px; height:11px; border-radius:50%; background:var(--mj-pri); display:block;
  animation:mj-dot 1.15s ease-in-out infinite}
.mj-dots i:nth-child(2){animation-delay:.18s; background:var(--mj-sec)}
.mj-dots i:nth-child(3){animation-delay:.36s}
@keyframes mj-dot{0%,100%{transform:scale(.55); opacity:.35}50%{transform:scale(1.15); opacity:1}}

/* ============== REVELADO EN LA FICHA DE PRODUCTO ============== */
.mj-reveal{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:5; --t:1}
.mj-reveal .mj-shine{
  position:absolute; top:-60%; left:-70%; width:55%; height:220%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 100%);
  transform:rotate(14deg);
  animation:mj-shine calc(1.5s * var(--t)) calc(.25s * var(--t)) cubic-bezier(.5,0,.3,1) both}
@keyframes mj-shine{from{left:-70%} to{left:130%}}
.mj-pop-heart{position:absolute; opacity:0; animation:mj-pop-heart ease-out forwards}
.mj-pop-heart svg{width:100%; height:100%; filter:drop-shadow(0 3px 8px rgba(43,27,46,.25))}
@keyframes mj-pop-heart{
  0%{opacity:0; transform:scale(.2) translateY(10px)}
  25%{opacity:1; transform:scale(1.1) translateY(-6px)}
  100%{opacity:0; transform:scale(.85) translateY(-70px)}
}

/* el sello entra con más presencia */
.mj-seal{--t:1}

/* ==================== MEMORIA DE PAREJAS ==================== */
.mj-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:9px;
  max-width:330px; margin:14px auto 10px;
}
.mj-cell{position:relative; aspect-ratio:1/1; border-radius:16px}
.mj-center{
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 45%, #fff 0%, var(--mj-bg) 100%);
  border:2px dashed rgba(236,44,143,.35);
}
.mj-center svg{width:46%; height:46%; animation:mj-beat 2.4s ease-in-out infinite}

.mj-tile{cursor:pointer; perspective:800px}
.mj-tile .mj-face{
  position:absolute; inset:0; border-radius:16px; display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:transform .55s cubic-bezier(.3,1.1,.4,1); padding:14%;
}
.mj-tile .mj-front{background:#fff !important; box-shadow:0 6px 16px rgba(43,27,46,.12); transform:rotateY(180deg)}
.mj-tile .mj-back{background:linear-gradient(135deg,var(--mj-sec),var(--mj-pri)) !important;
  box-shadow:0 6px 16px rgba(123,44,191,.28); transform:rotateY(0)}
.mj-tile .mj-back svg{width:42%; height:42%; opacity:.9}
.mj-tile .mj-front svg{width:100%; height:100%}
.mj-tile.up .mj-front{transform:rotateY(0)}
.mj-tile.up .mj-back{transform:rotateY(-180deg)}
.mj-tile.done .mj-front{box-shadow:0 0 0 3px var(--mj-pri), 0 10px 26px rgba(236,44,143,.4)}
.mj-tile.done{cursor:default; animation:mj-found .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes mj-found{0%{transform:scale(1)}45%{transform:scale(1.09)}100%{transform:scale(1)}}
.mj-tile:not(.up):not(.done):hover{transform:translateY(-3px)}
.mj-tile{transition:transform .25s}
.mj-score{font-size:12px; font-weight:800; color:var(--mj-sec); letter-spacing:.04em; text-transform:uppercase}

/* ============ CORTINA DE NAVEGACIÓN: CINTAS + 0→100 ============ */
#mj-wipe{
  position:fixed; inset:0; z-index:2147483600; pointer-events:none;
  background:linear-gradient(140deg,#3A0B52 0%,var(--mj-sec) 45%,var(--mj-pri) 100%);
  opacity:0; transition:opacity .22s ease;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
#mj-wipe.on{opacity:1}
#mj-wipe .mj-ribbon{
  position:absolute; left:-25%; width:150%; padding:9px 0; white-space:nowrap; overflow:hidden;
  background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
#mj-wipe .mj-ribbon span{
  display:inline-block; font-weight:900; font-size:15px; letter-spacing:.16em;
  color:var(--mj-pri); text-transform:uppercase;
  animation:mj-slide 9s linear infinite;
}
#mj-wipe .r1{top:32%; transform:rotate(-7deg)}
#mj-wipe .r2{top:56%; transform:rotate(5deg); background:var(--mj-pri)}
#mj-wipe .r2 span{color:#fff; animation-direction:reverse; animation-duration:11s}
@keyframes mj-slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
#mj-wipe .mj-load{
  position:relative; z-index:3; color:#fff; font-weight:900; line-height:1;
  display:flex; align-items:baseline; gap:2px; text-shadow:0 8px 24px rgba(0,0,0,.3);
}
#mj-wipe .mj-load b{font-size:clamp(56px,15vw,104px); letter-spacing:-.03em}
#mj-wipe .mj-load i{font-size:clamp(20px,5vw,34px); font-style:normal; opacity:.85}

/* ==================== RELOJ Y MARCADOR ==================== */
.mj-hud{display:flex; align-items:center; justify-content:center; gap:14px; margin:4px 0 10px}
.mj-clock{position:relative; width:52px; height:52px; flex:0 0 auto}
.mj-clock svg{width:52px; height:52px; transform:rotate(-90deg)}
.mj-clock circle{fill:none; stroke-width:5; stroke-linecap:round}
.mj-clock .bg{stroke:rgba(123,44,191,.16)}
.mj-clock .fg{stroke:var(--mj-pri); stroke-dasharray:119.4; stroke-dashoffset:0;
  animation:mj-tick linear forwards}
@keyframes mj-tick{to{stroke-dashoffset:119.4}}
.mj-clock b{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:900; color:var(--mj-sec)}
.mj-clock.warn .fg{stroke:#D81B60; animation-name:mj-tick}
.mj-clock.warn{animation:mj-shake .55s ease-in-out infinite}
.mj-clock.warn b{color:#D81B60}
@keyframes mj-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.mj-stats{font-size:13px; font-weight:800; color:var(--mj-dark); line-height:1.35; text-align:left}
.mj-stats b{color:var(--mj-pri); font-size:15px}
.mj-stats i{font-style:normal; opacity:.6; font-weight:700}

/* ============ RECORDATORIO EN CARRITO / CHECKOUT ============ */
#mj-remind{
  background:linear-gradient(135deg,var(--mj-bg) 0%,#FFF 100%);
  border:2px solid var(--mj-pri); border-radius:20px; padding:20px 20px 18px;
  margin:0 0 22px; box-shadow:0 14px 34px rgba(236,44,143,.18);
  font-family:'Montserrat', system-ui, sans-serif !important;
}
#mj-remind .mj-remind-head{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
  font-weight:900; text-transform:uppercase; letter-spacing:.08em; font-size:12px;
  color:var(--mj-pri) !important;
}
#mj-remind .mj-remind-head svg{width:22px; height:22px; flex:0 0 auto}
#mj-remind .mj-remind-head svg path{fill:var(--mj-pri)}
#mj-remind .mj-remind-txt{
  font-size:14px; line-height:1.5; color:var(--mj-dark) !important; margin:0 0 14px;
}
#mj-remind .mj-remind-txt b{color:var(--mj-sec) !important; font-weight:900}
#mj-remind .mj-btn{
  display:block; width:100% !important; border:0 !important; cursor:pointer;
  background:linear-gradient(120deg,var(--mj-sec),var(--mj-pri)) !important; color:#fff !important;
  font-weight:900; font-size:15px !important; text-transform:uppercase; letter-spacing:.02em;
  padding:14px 18px !important; border-radius:999px !important; height:auto !important;
  line-height:1.25 !important; margin:0 !important;
  box-shadow:0 10px 24px rgba(236,44,143,.3) !important;
}
#mj-remind .mj-remind-fine{font-size:11px; opacity:.65; margin-top:10px; text-align:center; color:var(--mj-dark)}