:root{
  --blue:#0570e3;
  --blue2:#05a4ff;
  --blue3:#0068d7;
  --ink:#233044;
  --muted:#718095;
  --line:#e4edf7;
  --soft:#f7fbff;
  --card:#ffffff;
  --shadow:0 18px 42px rgba(0,70,150,.13);
  --radius:24px;
  --header-h:70px;
}

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

html{
  scroll-behavior:smooth;
}

body{
  min-height:100dvh;
  font-family:Arial, Helvetica, sans-serif;
  background:linear-gradient(180deg,#edf6ff 0%,#f7fbff 45%,#ffffff 100%);
  color:var(--ink);
  overflow-x:hidden;
}

.preloader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  transition:opacity .32s ease, visibility .32s ease;
}

.preloader img{
  width:58px;
  max-width:18vw;
  height:auto;
  animation:logoBreath 1.15s ease-in-out infinite;
}

.preloader.hide{
  opacity:0;
  visibility:hidden;
}

@keyframes logoBreath{
  0%,100%{opacity:.35;}
  50%{opacity:1;}
}

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--header-h);
  z-index:100;
  background:linear-gradient(90deg,#0067d8 0%,#0579ea 52%,#19b7ff 100%);
  box-shadow:none;
  border-bottom:0;
}

.topbar-inner{
  height:100%;
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:118px;
  gap:2px;
}

.brand-note{
  display:block;
  max-width:142px;
  color:rgba(255,255,255,.78);
  font-size:7.5px;
  line-height:1.08;
  font-weight:700;
  letter-spacing:.005em;
  text-shadow:0 1px 2px rgba(0,50,120,.20);
  white-space:normal;
}

.quini-logo{
  width:102px;
  height:auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.18));
}

.jackpot-pill{
  width:214px;
  height:42px;
  border-radius:999px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(0,56,120,.13);
  border:1px solid rgba(255,255,255,.68);
}

.jackpot-pill iframe{
  width:110%;
  height:100%;
  margin-left:-5%;
  border:0;
  display:block;
  background:#fff;
  transform:translateY(1px) scale(.92);
  transform-origin:center;
}

.app-shell{
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding:calc(var(--header-h) + 28px) 14px 26px;
}

.main-card{
  width:100%;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(210,228,245,.8);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}

.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:17px;
}

.step-pill{
  height:42px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:#8b97a8;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  box-shadow:none;
}

.step-pill.active{
  background:#edf8ff;
  border-color:#cbe8fb;
  color:var(--blue);
  box-shadow:none;
}

.step-pill.locked{
  opacity:.58;
  pointer-events:none;
}

.step-panel{
  display:none;
}

.step-panel.active{
  display:block;
  animation:fadeIn .25s ease forwards;
}

@keyframes fadeIn{
  from{opacity:0; transform:translateY(5px);}
  to{opacity:1; transform:translateY(0);}
}

.step-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.step-head h1{
  font-size:20px;
  line-height:1.08;
  color:var(--ink);
  font-weight:500;
  letter-spacing:-.02em;
  margin-bottom:5px;
}

.step-head p{
  font-size:14px;
  color:var(--muted);
  line-height:1.34;
}

.small-badge{
  flex:0 0 auto;
  border-radius:999px;
  background:#f5f8fc;
  color:#7c8797;
  font-size:12px;
  font-weight:900;
  padding:8px 10px;
  white-space:nowrap;
}

.modalities{
  display:grid;
  gap:9px;
}

.mod-card{
  min-height:62px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:10px 11px;
  display:grid;
  grid-template-columns:34px 1fr auto;
  gap:9px;
  align-items:center;
  transition:.18s ease;
}

.mod-card.selected{
  border-color:#bae0f8;
  background:#f3faff;
  box-shadow:0 7px 18px rgba(5,112,227,.08);
}

.radio-dot{
  width:25px;
  height:25px;
  border-radius:50%;
  border:3px solid #d5e6f4;
  background:#fff;
  cursor:pointer;
  position:relative;
}

.mod-card.selected .radio-dot{
  border-color:var(--blue);
}

.mod-card.selected .radio-dot::after{
  content:"";
  position:absolute;
  inset:5px;
  background:var(--blue);
  border-radius:50%;
}

.mod-main{
  min-width:0;
}

.mod-title-row{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}

.mod-title-row strong{
  font-size:18px;
  font-weight:950;
  color:#263246;
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.info-btn{
  width:28px;
  height:28px;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  color:var(--blue);
  font-size:15px;
  font-style:italic;
  font-weight:950;
  cursor:pointer;
  flex:0 0 auto;
  box-shadow:none;
}

.qty-mini{
  min-width:112px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  padding:4px 5px 4px 9px;
  border:1px solid #edf2f7;
  border-radius:14px;
  background:#fbfdff;
}

.qty-mini span{
  font-size:12px;
  font-weight:900;
  color:#7c8797;
}

.qty-mini select{
  width:46px;
  height:32px;
  border:0;
  outline:0;
  background:#fff;
  color:#2c384b;
  font-size:18px;
  font-weight:950;
  text-align:center;
  border-radius:10px;
  padding-left:8px;
  box-shadow:inset 0 0 0 1px #edf2f7;
}

.qty-mini select:disabled{
  color:#c4cad3;
  opacity:.75;
}

.divider{
  height:1px;
  background:#edf2f7;
  margin:14px 0 13px;
}

.duration-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.duration-head h2{
  font-size:17px;
  font-weight:950;
  color:var(--ink);
}

.duration-head span{
  font-size:12px;
  font-weight:900;
  color:#7c8797;
}

.duration-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:12px;
}

.duration-btn{
  height:41px;
  border-radius:15px;
  border:1px solid var(--line);
  background:#fff;
  color:#4a5668;
  font-size:13.5px;
  font-weight:950;
  cursor:pointer;
}


.duration-btn span{
  display:block;
  margin-top:1px;
  font-size:9.5px;
  line-height:1;
  font-weight:850;
  color:#6ba8d5;
}

.duration-btn.active span{
  color:#0570e3;
}

.duration-btn.active{
  background:linear-gradient(180deg,#149cff 0%,#0570e3 100%);
  border-color:#0b86ee;
  color:#fff;
  box-shadow:0 9px 20px rgba(5,112,227,.22);
}

.cost-box{
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--line);
  border-radius:17px;
  background:#fbfdff;
  padding:11px 12px;
  margin-bottom:13px;
}

.cost-label{
  display:none;
}

.cost-box p{
  font-size:13px;
  line-height:1.28;
  color:#7a8796;
  font-weight:400;
}

.cost-box strong{
  color:var(--blue);
  font-size:25px;
  line-height:1;
  font-weight:950;
  white-space:nowrap;
}

.primary-btn,
.secondary-btn{
  height:50px;
  border-radius:18px;
  border:0;
  font-size:16px;
  font-weight:950;
  cursor:pointer;
}

.primary-btn{
  width:100%;
  background:linear-gradient(180deg,#119aff 0%,#0570e3 100%);
  color:#fff;
  box-shadow:none;
}

.primary-btn:disabled{
  opacity:.42;
  box-shadow:none;
  cursor:not-allowed;
}

.secondary-btn{
  width:100%;
  background:#fff;
  color:#5d6979;
  border:1px solid var(--line);
}

.number-head{
  margin-bottom:11px;
}

.numbers-grid{
  display:grid;
  grid-template-columns:repeat(6, 42px);
  justify-content:space-between;
  gap:8px 5px;
  margin-bottom:12px;
}

.number-btn{
  width:38px;
  height:38px;
  border-radius:50%;
  border:1.5px solid #cfe0ee;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  color:#263246;
  font-size:13px;
  font-weight:950;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  box-shadow:0 3px 8px rgba(0,60,130,.045);
  transition:.18s ease;
  -webkit-tap-highlight-color:transparent;
}

.number-btn.selected{
  color:#fff;
  border-color:#0570e3;
  background:linear-gradient(180deg,#11a0ff 0%,#0570e3 100%);
  box-shadow:0 7px 16px rgba(5,112,227,.27);
  transform:scale(1.035);
}

.number-btn.faded{
  opacity:.50;
  filter:grayscale(.12);
}

.number-btn::after{
  content:"";
  position:absolute;
  top:-55%;
  left:-95%;
  width:55%;
  height:210%;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 72%, transparent 100%);
  transform:rotate(22deg);
  opacity:0;
  pointer-events:none;
}

.number-btn.shine::after{
  animation:softDiagonalShine .58s ease-out;
}

@keyframes softDiagonalShine{
  0%{left:-95%; opacity:0;}
  18%{opacity:.75;}
  100%{left:145%; opacity:0;}
}

.shake{
  animation:shake .24s ease;
}

@keyframes shake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  50%{transform:translateX(4px)}
  75%{transform:translateX(-3px)}
  100%{transform:translateX(0)}
}

.current-numbers{
  min-height:43px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#f8fbff;
  padding:10px 12px;
  margin-bottom:10px;
}

.current-numbers span{
  color:#7a8796;
  font-size:13px;
  font-weight:500;
}

.current-numbers strong{
  font-size:14px;
  color:#2c384b;
  font-weight:950;
  letter-spacing:.02em;
}

.completed-wrap{
  display:grid;
  gap:8px;
  margin-bottom:10px;
}

.completed-card,
.final-play{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:10px;
}

.completed-card strong,
.final-play strong{
  display:block;
  font-size:13px;
  font-weight:500;
  color:#2d394d;
  margin-bottom:3px;
}

.completed-card span,
.final-play span{
  display:block;
  font-size:12px;
  line-height:1.28;
  color:#667386;
  font-weight:500;
}

.edit-btn{
  border:1px solid #d9ecfb;
  background:#f2f9ff;
  color:var(--blue);
  border-radius:12px;
  padding:8px 10px;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  flex:0 0 auto;
}

.action-row{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:9px;
}

.final-summary{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fbfdff;
  padding:12px;
  margin-bottom:15px;
}

.final-summary-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:9px;
}

.final-summary-top span{
  font-size:14px;
  font-weight:500;
  color:#2f3b4f;
}

.final-summary-top strong{
  color:var(--blue);
  font-size:22px;
  font-weight:500;
}

#finalPlaysList{
  display:grid;
  gap:8px;
}

.field{
  margin-bottom:11px;
}

.field label{
  display:block;
  font-size:13px;
  font-weight:950;
  color:#354155;
  margin-bottom:6px;
}

.field label em{
  font-style:normal;
  color:#8c97a6;
  font-weight:500;
}

.field input,
.field select{
  width:100%;
  height:46px;
  border-radius:14px;
  border:1px solid #dfe8f1;
  background:#fff;
  color:#263246;
  padding:0 13px;
  font-size:15px;
  outline:0;
}

.field input:focus,
.field select:focus{
  border-color:#84c8ff;
  box-shadow:0 0 0 3px rgba(5,112,227,.10);
}

.field.error input,
.field.error select{
  border-color:#d93025;
  box-shadow:0 0 0 3px rgba(217,48,37,.08);
}

.error-msg{
  display:none;
  margin-top:5px;
  font-size:11.5px;
  color:#d93025;
  font-weight:800;
}

.field.error .error-msg{
  display:block;
}

.help-text{
  display:block;
  margin-top:6px;
  color:#8c97a6;
  font-size:12px;
  font-weight:500;
}

.privacy{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:#667386;
  line-height:1.35;
  margin:12px 0 4px;
}

.privacy input{
  width:18px;
  height:18px;
  flex:0 0 auto;
  margin-top:0;
}

.checkbox-error{
  display:block;
  min-height:16px;
  color:#d93025;
  font-size:11.5px;
  font-weight:850;
  margin:0 0 6px 28px;
}

.payment-box{
  display:none;
  margin-top:14px;
  border:1px solid #dcecff;
  border-radius:18px;
  background:#f8fbff;
  padding:13px;
}

.payment-box.show{
  display:block;
  animation:fadeIn .25s ease forwards;
}

.payment-box h2{
  font-size:18px;
  font-weight:700;
  text-align:center;
  margin-bottom:5px;
  color:var(--ink);
}

.payment-box > p{
  text-align:center;
  color:#667386;
  font-size:13px;
  line-height:1.35;
  margin-bottom:10px;
}

.payment-total{
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:10px;
  text-align:center;
  margin-bottom:9px;
}

.payment-total span{
  display:block;
  color:#7a8796;
  font-size:12px;
  font-weight:500;
  margin-bottom:3px;
}

.payment-total strong{
  color:var(--blue);
  font-size:24px;
  font-weight:700;
}

.payment-row{
  display:grid;
  grid-template-columns:43px 1fr auto;
  gap:7px;
  align-items:center;
  border:1px solid var(--line);
  background:#fff;
  border-radius:13px;
  padding:9px;
  margin-bottom:8px;
}

.payment-row span{
  font-size:12px;
  color:#7a8796;
  font-weight:500;
}

.payment-row strong{
  color:#2c384b;
  font-size:12.5px;
  font-weight:950;
  word-break:break-all;
}

.copy-btn{
  border:0;
  background:#edf7ff;
  color:var(--blue);
  border-radius:10px;
  padding:7px 8px;
  font-size:11.5px;
  font-weight:500;
  cursor:pointer;
}

.payment-optional{
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid #e6eff9;
}

.file-field input{
  height:auto;
  padding:10px;
  font-size:13px;
}

.submit-final{
  margin-top:4px;
}

.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(13,33,56,.36);
  padding:16px;
}

.info-sheet{
  width:100%;
  max-width:440px;
  background:#fff;
  border-radius:22px;
  padding:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  position:relative;
}

.modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#f3f6fa;
  color:#5d6979;
  font-size:22px;
  cursor:pointer;
}

.info-sheet h2{
  font-size:20px;
  font-weight:950;
  color:var(--ink);
  margin-bottom:7px;
}

.info-sheet p{
  color:#667386;
  line-height:1.38;
  font-size:14px;
  margin-bottom:11px;
}

.info-cost{
  border-radius:14px;
  background:#f4f9ff;
  border:1px solid #dcecff;
  padding:11px;
  color:#2c384b;
  font-size:14px;
  font-weight:900;
}



.modal-backdrop[hidden]{
  display:none !important;
}

.mini-info-btn{
  width:34px;
  height:34px;
  border:1px solid #d7ecfb;
  border-radius:50%;
  background:#f2f9ff;
  color:var(--blue);
  font-size:16px;
  font-style:italic;
  font-weight:950;
  cursor:pointer;
  flex:0 0 auto;
  box-shadow:none;
}

.duration-info{
  width:30px;
  height:30px;
  font-size:15px;
}

@media(max-width:390px){
  :root{--header-h:66px;}

  .app-shell{
    padding:calc(var(--header-h) + 26px) 12px 22px;
  }

  .main-card{
    padding:14px;
    border-radius:22px;
  }

  .brand-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:118px;
  gap:2px;
}

.brand-note{
  display:block;
  max-width:142px;
  color:rgba(255,255,255,.78);
  font-size:7.5px;
  line-height:1.08;
  font-weight:700;
  letter-spacing:.005em;
  text-shadow:0 1px 2px rgba(0,50,120,.20);
  white-space:normal;
}

.quini-logo{
    width:96px;
  }

  .jackpot-pill{
    width:184px;
    height:38px;
  }

  .steps{
    gap:7px;
  }

  .step-pill{
    height:39px;
    font-size:13px;
  }

  .step-head h1{
    font-size:21px;
  }

  .step-head p{
    font-size:13px;
  }

  .mod-card{
    grid-template-columns:31px 1fr auto;
    gap:7px;
    min-height:60px;
    padding:9px;
  }

  .mod-title-row strong{
    font-size:16.5px;
  }

  .info-btn{
    width:26px;
    height:26px;
  }

  .qty-mini{
    min-width:100px;
    height:39px;
    gap:5px;
  }

  .qty-mini span{
    font-size:11.5px;
  }

  .qty-mini select{
    width:41px;
    height:30px;
    font-size:16px;
  }

  .duration-grid{
    gap:7px;
  }

  .duration-btn{
    height:39px;
    font-size:13px;
  }

  .numbers-grid{
    grid-template-columns:repeat(6, 39px);
    gap:7px 4px;
  }

  .number-btn{
    width:39px;
    height:39px;
    font-size:12.5px;
  }
}


@media(max-width:360px){
  .topbar-inner{padding:0 12px;gap:10px;}
  .brand-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:118px;
  gap:2px;
}

.brand-note{
  display:block;
  max-width:142px;
  color:rgba(255,255,255,.78);
  font-size:7.5px;
  line-height:1.08;
  font-weight:700;
  letter-spacing:.005em;
  text-shadow:0 1px 2px rgba(0,50,120,.20);
  white-space:normal;
}

.quini-logo{width:84px;}
  .brand-note{font-size:6.8px;max-width:120px;}
  .jackpot-pill{width:170px;height:37px;}
}

/* Pestaña retractil de información del header */
.header-help-tab{
  position:absolute;
  left:50%;
  bottom:-17px;
  transform:translateX(-50%);
  height:28px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.75);
  border-top:0;
  border-radius:0 0 16px 16px;
  background:rgba(255,255,255,.92);
  color:#0570e3;
  font-size:12px;
  font-weight:950;
  letter-spacing:-.01em;
  box-shadow:0 8px 18px rgba(0,60,130,.13);
  cursor:pointer;
  z-index:102;
  -webkit-tap-highlight-color:transparent;
}

.header-help-tab::after{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-right:2px solid #0570e3;
  border-bottom:2px solid #0570e3;
  transform:rotate(45deg) translateY(-2px);
  margin-left:8px;
}

.header-help-tab[aria-expanded="true"]::after{
  transform:rotate(225deg) translateY(-1px);
}

.rules-panel{
  position:fixed;
  inset:0;
  z-index:150;
  background:rgba(8,30,55,.22);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:calc(var(--header-h) + 24px) 14px 16px;
}

.rules-panel[hidden]{
  display:none !important;
}

.rules-card{
  width:100%;
  max-width:560px;
  max-height:calc(100dvh - var(--header-h) - 44px);
  overflow:auto;
  background:#ffffff;
  border:1px solid #dcecff;
  border-radius:22px;
  box-shadow:0 22px 58px rgba(0,40,95,.24);
  padding:17px 18px 18px;
  position:relative;
}

.rules-close{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  border:0;
  border-radius:50%;
  background:#f3f8ff;
  color:#5b6a7d;
  font-size:21px;
  font-weight:800;
  cursor:pointer;
}

.rules-card h2{
  font-size:19px;
  font-weight:950;
  color:#233044;
  margin:2px 34px 9px 0;
}

.rules-card h3{
  font-size:14px;
  font-weight:950;
  color:#0570e3;
  margin:13px 0 4px;
}

.rules-card p{
  font-size:13.5px;
  line-height:1.42;
  color:#627287;
  margin:0;
}

.number-notice{
  display:none;
  margin:-4px 0 10px;
  padding:8px 10px;
  border-radius:12px;
  background:#fff7ec;
  border:1px solid #ffe2b8;
  color:#9a5a00;
  font-size:12px;
  line-height:1.32;
  font-weight:850;
}

.number-notice.show{
  display:block;
}

@media(max-width:390px){
  .header-help-tab{
    height:26px;
    bottom:-16px;
    font-size:11.5px;
    padding:0 13px;
  }

  .rules-panel{
    padding:calc(var(--header-h) + 22px) 12px 14px;
  }

  .rules-card{
    border-radius:20px;
    padding:16px;
  }
}


/* v9 refinements */
.preloader img{
  width:42px !important;
  max-width:12vw !important;
  transform:none !important;
  animation:logoBreathOpacity 1.05s ease-in-out infinite !important;
}

@keyframes logoBreathOpacity{
  0%,100%{opacity:.28;}
  50%{opacity:1;}
}

.topbar{
  position:fixed !important;
  background:linear-gradient(90deg,#0064d6 0%,#057ce9 58%,#23bcff 100%) !important;
}

.header-help-tab{
  position:absolute !important;
  left:10px !important;
  bottom:-22px !important;
  width:44px !important;
  height:22px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 0 14px 14px !important;
  background:linear-gradient(90deg,#0064d6 0%,#087fe9 100%) !important;
  color:#ffffff !important;
  font-size:15px !important;
  font-weight:900 !important;
  line-height:22px !important;
  text-align:center !important;
  box-shadow:0 7px 14px rgba(0,70,150,.18) !important;
  z-index:102 !important;
  overflow:hidden !important;
}

.header-help-tab span{
  display:block;
  transform:translateY(-1px);
  transition:transform .2s ease;
}

.header-help-tab[aria-expanded="true"] span{
  transform:translateY(0) rotate(180deg);
}

.header-help-tab::after{
  content:none !important;
}

.rules-panel{
  position:fixed !important;
  top:var(--header-h) !important;
  left:0 !important;
  right:0 !important;
  z-index:95 !important;
  padding:26px 14px 14px !important;
}

.file-picker{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:46px;
  border:1px solid #dfe8f1;
  border-radius:14px;
  background:#fff;
  padding:7px 9px;
}

.file-picker input[type="file"]{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.file-trigger{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  height:31px;
  padding:0 11px;
  margin:0 !important;
  border-radius:10px;
  background:#edf7ff;
  border:1px solid #cfe8fb;
  color:var(--blue) !important;
  font-size:12px !important;
  font-weight:950 !important;
  white-space:nowrap;
  cursor:pointer;
}

#fileName{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#667386;
  font-size:12.5px;
  font-weight:500;
}

.privacy,.checkbox-error{
  display:none !important;
}

.ball-particle{
  position:fixed;
  left:0;
  top:0;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(5,150,255,.86);
  pointer-events:none;
  z-index:180;
  box-shadow:0 0 7px rgba(5,150,255,.38);
  animation:particleBurst .78s cubic-bezier(.16,.84,.32,1) forwards;
}

@keyframes particleBurst{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.4);}
  14%{opacity:1;}
  100%{opacity:0; transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.15);}
}

.success-card{
  width:100%;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(210,228,245,.8);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px 16px;
  text-align:center;
}

.success-card[hidden]{display:none !important;}

.success-mark{
  width:54px;
  height:54px;
  margin:0 auto 12px;
  border-radius:50%;
  background:linear-gradient(180deg,#17b96f,#0a9d59);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  font-weight:950;
  box-shadow:0 12px 26px rgba(23,185,111,.24);
}

.success-card h1{
  font-size:24px;
  color:var(--ink);
  font-weight:950;
  margin-bottom:6px;
}

.success-card > p{
  font-size:14px;
  color:#667386;
  line-height:1.35;
  margin-bottom:14px;
}

.received-summary{
  text-align:left;
  display:grid;
  gap:9px;
  margin:0 0 14px;
}

.received-block{
  border:1px solid var(--line);
  border-radius:15px;
  background:#fbfdff;
  padding:11px;
}

.received-block h3{
  font-size:13px;
  font-weight:950;
  color:#7a8796;
  margin-bottom:6px;
}

.received-block p{
  font-size:13px;
  color:#2c384b;
  font-weight:850;
  line-height:1.45;
  margin:2px 0;
}

@media(max-width:390px){
  .header-help-tab{left:8px !important; bottom:-20px !important; height:20px !important; line-height:20px !important;}
}

/* v12 refinements */
.brand-block{
  gap:0 !important;
  min-width:108px !important;
}

.brand-note{
  max-width:102px !important;
  margin-top:-4px !important;
  text-align:center !important;
  font-size:6.6px !important;
  line-height:1.04 !important;
  letter-spacing:0 !important;
}

.duration-btn.active{
  background:#f3faff !important;
  border-color:#bae0f8 !important;
  color:#0570e3 !important;
  box-shadow:0 7px 18px rgba(5,112,227,.08) !important;
}

.cost-box strong{
  font-size:19px !important;
}

.final-summary-top strong{
  display:none !important;
}

@media(max-width:390px){
  .brand-block{
    min-width:100px !important;
  }

  .brand-note{
    max-width:96px !important;
    font-size:6.25px !important;
    margin-top:-4px !important;
  }

 
.duration-btn:disabled,
.duration-btn.duration-disabled{
  opacity:.44 !important;
  cursor:not-allowed !important;
  background:#f5f7fa !important;
  color:#9aa8b6 !important;
  border-color:#e4ebf2 !important;
  box-shadow:none !important;
  transform:none !important;
}

.duration-btn:disabled span,
.duration-btn.duration-disabled span{
  color:#9aa8b6 !important;
}

 .cost-box strong{
    font-size:18px !important;
  }
}

@media(max-width:360px){
  .brand-block{
    min-width:90px !important;
  }

  .brand-note{
    max-width:84px !important;
    font-size:5.8px !important;
    margin-top:-3px !important;
  }
}


/* v15 footer */
.site-footer{
  width:100%;
  max-width:640px;
  margin:-14px auto 26px;
  padding:0 14px;
  text-align:center;
  font-size:11px;
  line-height:1.35;
  color:rgba(91,107,128,.68);
  font-weight:700;
}

@media(max-width:390px){
  .site-footer{
    margin:-10px auto 22px;
    font-size:10.5px;
  }
}

/* Adaptación Loto Plus */
.loto-brand{
  min-width:118px;
}
.loto-logo{
  width:96px;
}
.plus-section{
  margin:12px 0 10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fbfdff;
}
.plus-title{
  font-size:13px;
  font-weight:950;
  color:#354155;
  margin-bottom:9px;
}
.plus-grid{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:7px;
}
.plus-btn{
  font-size:14px;
  border-color:#d7e5f2;
}
.plus-btn.selected{
  background:#edf8ff;
  border-color:#94cdf7;
  color:#0570e3;
  box-shadow:0 7px 16px rgba(5,112,227,.12);
}

@media(max-width:390px){
  .loto-logo{width:88px;}
  .plus-grid{grid-template-columns:repeat(5,1fr);}
}


/* Loto Plus v2 fixes */
.rules-panel{
  overflow-x:hidden !important;
  padding-left:14px !important;
  padding-right:14px !important;
}

.rules-card{
  width:min(100%, calc(100vw - 28px)) !important;
  max-width:560px !important;
  box-sizing:border-box !important;
  overflow-x:hidden !important;
}

.rules-card h2,
.rules-card h3,
.rules-card p{
  overflow-wrap:anywhere;
  word-break:normal;
}

.plus-grid{
  grid-template-columns:repeat(5, 42px) !important;
  justify-content:space-between !important;
  gap:8px 6px !important;
  overflow:hidden !important;
}

.plus-btn{
  width:42px !important;
  height:42px !important;
}

@media(max-width:390px){
  .rules-panel{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .rules-card{
    width:min(100%, calc(100vw - 24px)) !important;
  }
  .plus-grid{
    grid-template-columns:repeat(5, 42px) !important;
    justify-content:space-between !important;
  }
}


/* Loto Plus v3 fixes */
.plus-section{
  overflow:hidden !important;
}

.plus-grid{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  gap:8px !important;
  justify-content:stretch !important;
  overflow:hidden !important;
}

.plus-grid .number-btn,
.plus-btn{
  width:100% !important;
  max-width:38px !important;
  height:auto !important;
  aspect-ratio:1/1 !important;
  justify-self:center !important;
}

.duration-grid{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

@media(max-width:390px){
  .plus-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
    gap:8px !important;
  }
  .plus-grid .number-btn,
  .plus-btn{
    max-width:40px !important;
  }
}

body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;} .topbar{background:linear-gradient(90deg,#056fdf 0%,#1198ff 58%,#8fd6ff 100%)!important;box-shadow:none!important;} .topbar-inner{min-height:64px!important;} .brand-block{gap:0!important;} .loto-logo{width:102px!important;} .brand-note{margin-top:-2px!important;font-size:7px!important;line-height:1.12!important;max-width:102px!important;color:rgba(255,255,255,.82)!important;} .jackpot-pill{width:164px!important;height:34px!important;padding:0 6px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:none!important;background:rgba(255,255,255,.16)!important;} .jackpot-pill iframe{width:128%!important;height:128%!important;transform:scale(.82)!important;transform-origin:center center!important;} .main-card,.rules-card,.success-card{box-shadow:0 10px 26px rgba(0,55,115,.08)!important;} .mod-card,.mod-card.selected,.duration-btn,.duration-btn.active,.cost-box,.current-numbers,.completed-card,.final-summary,.payment-box,.received-card,.field input,.field select{box-shadow:none!important;} .step-head h1,.duration-head h2,.mod-title-row strong,.completed-card strong,.final-play strong,.received-block h3,.final-summary-top strong,.cost-box strong,.primary-btn,.submit-final,.header-help-tab span{font-weight:700!important;letter-spacing:0!important;} .step-head p,.field label,.cost-box p,.qty-mini span,.duration-btn,.secondary-btn,.step-pill,.small-badge{font-weight:500!important;} .duration-btn span{font-size:10px!important;color:#8d99a9!important;font-weight:500!important;} .mod-subtle{display:block;font-size:10px;line-height:1.2;color:#92a0b1;margin-top:2px;font-weight:500;} .number-btn,.plus-grid .number-btn,.plus-btn{font-size:12px!important;font-weight:700!important;box-shadow:none!important;border-color:#d8e4ef!important;} .number-btn.selected,.plus-btn.selected{box-shadow:0 2px 8px rgba(5,112,227,.16)!important;color:#fff!important;background:linear-gradient(180deg,#11a0ff 0%,#0570e3 100%)!important;border-color:#0570e3!important;} .number-btn::after,.plus-btn::after{background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,0) 36%,rgba(255,255,255,.38) 50%,rgba(255,255,255,0) 66%,transparent 100%)!important;} .current-numbers{background:linear-gradient(180deg,#f6fffb 0%,#eefaf3 100%)!important;border-color:#d8eee2!important;} .current-numbers span{color:#618071!important;} .current-numbers strong{color:#1f7a4d!important;font-weight:700!important;} .completed-card span,.final-play span{display:inline-block;background:#f4fbf6;padding:4px 8px;border-radius:10px;color:#25784b!important;} .qty-mini,.cost-box{background:#fbfdff!important;} .plus-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important;} .plus-grid .number-btn,.plus-btn{width:100%!important;max-width:42px!important;aspect-ratio:1/1!important;height:auto!important;justify-self:center!important;} .hp-wrap{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;} @media(max-width:390px){.jackpot-pill{width:154px!important;height:33px!important}.loto-logo{width:98px!important}.brand-note{max-width:98px!important;font-size:6.8px!important}}


/* patch header centering + custom loto logo */
.topbar{background:linear-gradient(90deg,#056fdf 0%,#1198ff 58%,#8fd6ff 100%)!important;box-shadow:none!important;}
.topbar-inner{min-height:70px!important;padding:8px 16px 8px!important;gap:16px!important;align-items:center!important;justify-content:space-between!important;}
.brand-block{flex:0 0 92px!important;width:92px!important;gap:1px!important;align-items:flex-start!important;justify-content:center!important;}
.loto-logo{width:80px!important;display:block!important;}
.brand-note{margin-top:0!important;max-width:82px!important;font-size:6.8px!important;line-height:1.12!important;color:rgba(255,255,255,.86)!important;}
.jackpot-pill{flex:0 0 176px!important;width:176px!important;height:38px!important;margin-left:auto!important;padding:0 10px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:18px!important;background:rgba(255,255,255,.18)!important;box-shadow:none!important;}
.jackpot-pill iframe{width:138%!important;height:138%!important;display:block!important;transform:scale(.76)!important;transform-origin:center center!important;}
@media(max-width:390px){.topbar-inner{padding:8px 12px!important;gap:12px!important}.brand-block{flex-basis:86px!important;width:86px!important}.loto-logo{width:74px!important}.brand-note{max-width:78px!important;font-size:6.4px!important}.jackpot-pill{flex-basis:166px!important;width:166px!important;height:37px!important}.jackpot-pill iframe{transform:scale(.74)!important;}}


/* release fixes */
.mod-subtle{display:none!important;}
.mod-title-row{min-width:0!important;overflow:hidden!important;}
.loto-title-marquee{display:block;max-width:128px;overflow:hidden;white-space:nowrap;}
.loto-title-marquee strong{display:inline-block;white-space:nowrap;}
@keyframes lotoTitleMarquee{0%,18%{transform:translateX(0)}82%,100%{transform:translateX(calc(-100% + 118px))}}
@media(max-width:430px){
  .loto-title-marquee{max-width:118px;}
  .loto-title-marquee strong{animation:lotoTitleMarquee 5.4s ease-in-out infinite alternate;}
}
@media(max-width:370px){
  .loto-title-marquee{max-width:104px;}
  @keyframes lotoTitleMarquee{0%,18%{transform:translateX(0)}82%,100%{transform:translateX(calc(-100% + 98px))}}
}

/* v4 header jackpot centering */
.topbar-inner{
  min-height:72px !important;
  padding:8px 18px !important;
  gap:22px !important;
  align-items:center !important;
  justify-content:space-between !important;
}
.brand-block{
  flex:0 0 112px !important;
  width:112px !important;
  min-width:112px !important;
}
.jackpot-pill{
  flex:0 0 208px !important;
  width:208px !important;
  height:48px !important;
  margin-left:auto !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.jackpot-pill iframe{
  width:260px !important;
  height:60px !important;
  display:block !important;
  border:0 !important;
  transform:scale(.78) !important;
  transform-origin:center center !important;
}
@media(max-width:390px){
  .topbar-inner{padding:8px 14px !important;gap:18px !important;}
  .brand-block{flex-basis:108px !important;width:108px !important;min-width:108px !important;}
  .jackpot-pill{flex-basis:196px !important;width:196px !important;height:46px !important;}
  .jackpot-pill iframe{transform:scale(.74) !important;}
}

.loto-logo{width:76px !important;max-height:50px !important;object-fit:contain !important;}
.mod-subtle{display:none !important;}
.mod-title-row{min-width:0 !important;overflow:hidden !important;}
.mod-title-row .marquee-title{
  display:block !important;
  max-width:165px !important;
  min-width:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}
.mod-title-row .marquee-title span{
  display:inline-block !important;
  white-space:nowrap !important;
}
@media(max-width:480px){
  .mod-title-row .marquee-title span{
    padding-right:34px !important;
    animation:lotoMarquee 5.8s linear infinite;
  }
}
@keyframes lotoMarquee{
  0%,18%{transform:translateX(0);}
  82%,100%{transform:translateX(calc(-100% + 150px));}
}


/* ajuste final header / pozo */
.topbar .jackpot-pill{
  flex:0 0 212px !important;
  width:212px !important;
  height:44px !important;
  margin-left:auto !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:999px !important;
  background:#ffffff !important;
  box-shadow:none !important;
}
.topbar .jackpot-pill iframe{
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  display:block !important;
  background:#ffffff !important;
  transform:none !important;
  transform-origin:center center !important;
}
.current-numbers{
  background:linear-gradient(180deg,#f3fff8 0%,#eafaf1 100%) !important;
  border-color:#b9e8cb !important;
}
.current-numbers strong{
  color:#117847 !important;
  font-size:15px !important;
  font-weight:800 !important;
}
.completed-card span,
.final-play span{
  background:#eafaf1 !important;
  border:1px solid #c8efd9 !important;
  color:#117847 !important;
  font-weight:800 !important;
}
.auto-btn{
  width:100%;
  min-height:42px;
  margin:0 0 10px;
  border:1px solid #bfe5fb;
  border-radius:14px;
  background:linear-gradient(180deg,#f2fbff 0%,#e7f7ff 100%);
  color:#0570e3;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}
@media(max-width:390px){
  .topbar .jackpot-pill{
    flex-basis:202px !important;
    width:202px !important;
    height:43px !important;
  }
}
@media(max-width:360px){
  .topbar .jackpot-pill{
    flex-basis:194px !important;
    width:194px !important;
    height:42px !important;
  }
}


/* v6 header + auto */
.topbar .jackpot-pill{
  background:#ffffff !important;
  border-color:rgba(255,255,255,.96) !important;
  border-radius:999px !important;
  padding:0 !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:none !important;
}
.topbar .jackpot-pill iframe{
  width:100% !important;
  height:100% !important;
  border:0 !important;
  display:block !important;
  background:#ffffff !important;
  transform:translateY(1px) !important;
  transform-origin:center center !important;
}
button.auto-btn{
  width:100% !important;
  min-height:44px !important;
  margin:0 0 12px !important;
  border:1px solid #bfe5fb !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,#f2fbff 0%,#e7f7ff 100%) !important;
  color:#0570e3 !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  cursor:pointer !important;
  box-shadow:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  text-align:center !important;
}
button.auto-btn:active{
  transform:translateY(1px);
}
@media(max-width:390px){
  button.auto-btn{min-height:43px !important;font-size:13.5px !important;}
}


.topbar .topbar-inner{min-height:70px !important;padding:8px 12px !important;gap:12px !important;}
.topbar .brand-block{flex:0 0 94px !important;width:94px !important;}
.topbar .loto-logo{width:82px !important;}
.topbar .brand-note{max-width:86px !important;font-size:6.4px !important;line-height:1.12 !important;}
.topbar .jackpot-pill{flex:0 0 202px !important;width:202px !important;height:43px !important;}
@media(max-width:360px){
  .topbar .brand-block{flex-basis:88px !important;width:88px !important;}
  .topbar .loto-logo{width:76px !important;}
  .topbar .jackpot-pill{flex-basis:194px !important;width:194px !important;height:42px !important;}
}



/* v8 final pozo + random button */
.topbar .jackpot-pill{
  flex:0 0 186px !important;
  width:186px !important;
  height:39px !important;
  margin-left:auto !important;
  padding:0 9px !important;
  background:#ffffff !important;
  border:1px solid rgba(255,255,255,.96) !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  box-shadow:none !important;
}
.topbar .jackpot-pill iframe{
  width:100% !important;
  height:100% !important;
  border:0 !important;
  display:block !important;
  background:#ffffff !important;
  transform:scale(.82) translateY(0) !important;
  transform-origin:center center !important;
}
button.auto-btn{
  font-weight:400 !important;
  letter-spacing:0 !important;
}
@media(max-width:390px){
  .topbar .topbar-inner{min-height:68px !important;padding:8px 12px !important;gap:12px !important;}
  .topbar .brand-block{flex:0 0 94px !important;width:94px !important;}
  .topbar .loto-logo{width:82px !important;}
  .topbar .jackpot-pill{flex-basis:180px !important;width:180px !important;height:38px !important;padding:0 9px !important;}
  .topbar .jackpot-pill iframe{transform:scale(.80) translateY(0) !important;}
}
@media(max-width:360px){
  .topbar .brand-block{flex-basis:90px !important;width:90px !important;}
  .topbar .loto-logo{width:78px !important;}
  .topbar .jackpot-pill{flex-basis:172px !important;width:172px !important;height:37px !important;padding:0 9px !important;}
  .topbar .jackpot-pill iframe{transform:scale(.78) translateY(0) !important;}
}


/* v9 random button hard override */
#stepNumbers button.auto-btn,
form#quiniForm #stepNumbers button.auto-btn,
button#autoNumbersBtn.auto-btn{
  width:100% !important;
  min-height:44px !important;
  margin:0 0 12px !important;
  border:1px solid #bfe5fb !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,#f2fbff 0%,#e7f7ff 100%) !important;
  color:#0570e3 !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:1.15 !important;
  cursor:pointer !important;
  box-shadow:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  text-align:center !important;
  font-family:inherit !important;
}
#stepNumbers button.auto-btn:active,
button#autoNumbersBtn.auto-btn:active{transform:translateY(1px);}
@media(max-width:390px){#stepNumbers button.auto-btn,button#autoNumbersBtn.auto-btn{min-height:43px !important;font-size:13.5px !important;}}



.topbar .jackpot-pill{
  flex:0 0 186px !important;
  width:186px !important;
  height:39px !important;
  padding:0 9px !important;
  background:#ffffff !important;
  border:1px solid rgba(255,255,255,.96) !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  box-shadow:none !important;
}
.topbar .jackpot-pill iframe{
  width:100% !important;
  height:100% !important;
  border:0 !important;
  display:block !important;
  background:#ffffff !important;
  transform:scale(.74) translateY(0) !important;
  transform-origin:center center !important;
}
@media(max-width:390px){
  .topbar .jackpot-pill{flex-basis:180px !important;width:180px !important;height:38px !important;padding:0 9px !important;}
  .topbar .jackpot-pill iframe{transform:scale(.72) translateY(0) !important;}
}
@media(max-width:360px){
  .topbar .jackpot-pill{flex-basis:172px !important;width:172px !important;height:37px !important;padding:0 9px !important;}
  .topbar .jackpot-pill iframe{transform:scale(.70) translateY(0) !important;}
}

/* Ajustes específicos Loto Plus: pozo y logo */
.loto-logo{
  width:75px !important;
}

.loto-jackpot iframe{
  transform:translateY(1px) scale(.98);
}

@media(max-width:390px){
  .loto-logo{
    width:71px !important;
  }
}


.current-numbers span{
  font-weight:400 !important;
}

.topbar .loto-logo{
  width:66px !important;
  max-height:44px !important;
  object-fit:contain !important;
}

.topbar .loto-jackpot iframe{
  width:100% !important;
  height:100% !important;
  transform:scale(.82) translateY(0) !important;
  transform-origin:center center !important;
}

@media(max-width:390px){
  .topbar .loto-logo{
    width:66px !important;
    max-height:44px !important;
  }

  .topbar .loto-jackpot iframe{
    transform:scale(.80) translateY(0) !important;
  }
}

@media(max-width:360px){
  .topbar .loto-logo{
    width:62px !important;
    max-height:42px !important;
  }

  .topbar .loto-jackpot iframe{
    transform:scale(.78) translateY(0) !important;
  }
}


/* Zona Jugadas visual override */
:root{--zj-bg:#d9d1e6;--zj-ink:#201c29;--zj-line:#201c29;--zj-purple:#6d3cff;--zj-orange:#ff8a21;--zj-blue:#0570e3}
body{background:linear-gradient(180deg,#d9d1e6 0%,#f5f1fa 45%,#fff 100%)!important;color:#201c29!important;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;font-weight:400!important;}
.topbar{background:#d9d1e6!important;border-bottom:1px solid rgba(32,28,41,.28)!important;box-shadow:none!important}.topbar-inner{min-height:68px!important}.quini-logo{width:154px!important;height:auto!important;object-fit:contain!important}.brand-note{display:none!important}.mini-menu{display:flex;gap:8px;align-items:center}.mini-menu a{font-size:13px;color:#201c29;background:rgba(255,255,255,.44);border:1px solid rgba(32,28,41,.32);border-radius:999px;padding:8px 10px}.main-card,.rules-card,.success-card,.modal-backdrop .info-sheet,.payment-box,.received-card,.mod-card,.duration-btn,.field input,.field select,.current-numbers,.completed-card,.final-summary{box-shadow:none!important;border:1px solid rgba(32,28,41,.35)!important}.step-head h1,.duration-head h2,.mod-title-row strong,.payment-box h2,.success-card h1{font-weight:520!important;letter-spacing:0!important;color:#201c29!important}.step-head p,.field label,.duration-btn,.cost-box p,.qty-mini span{font-weight:400!important}.primary-btn,.submit-final{background:linear-gradient(90deg,#ff8a21,#0570e3)!important;border:0!important;border-radius:999px!important;font-weight:520!important;box-shadow:none!important}.secondary-btn,.auto-btn,#autoNumbersBtn{box-shadow:none!important;border-radius:999px!important;font-weight:500!important}.step-pill.active{background:#201c29!important;color:#fff!important}.step-pill{box-shadow:none!important;font-weight:500!important}.number-btn.selected{background:#0570e3!important}.number-btn{box-shadow:none!important;font-weight:520!important}.duration-btn.active,.mod-card.selected{border-color:#201c29!important;background:#fff!important}.payment-row strong,.payment-total strong{font-weight:500!important}.site-footer{color:#645c6e!important}.header-help-tab{box-shadow:none!important;background:#fff!important;color:#201c29!important;border:1px solid rgba(32,28,41,.35)!important}


/* Zona Jugadas v2: selección naranja y estilo liviano */
.number-btn.selected,.plus-btn.selected{background:linear-gradient(180deg,#ff9b35 0%,#ff7a18 100%)!important;border-color:#ff8a21!important;color:#fff!important;box-shadow:none!important;}
.number-btn.selected::after,.plus-btn.selected::after{opacity:.18!important;}
.primary-btn,.submit-final{background:linear-gradient(90deg,#ff8a21,#0570e3)!important;}
.step-head h1,.duration-head h2,.mod-title-row strong,.payment-box h2,.success-card h1{font-weight:500!important;letter-spacing:0!important;}
.duration-btn,.field label,.cost-box p,.qty-mini span{font-weight:400!important;}


/* ZJ v3 orange interaction + lighter summary */
:root{--zj-orange:#ff8a21;--zj-blue:#0570e3;--zj-purple:#6d3cff}
.info-btn,.mini-info-btn,.duration-info{
  border-color:rgba(255,138,33,.42)!important;
  background:rgba(255,138,33,.08)!important;
  color:#d86500!important;
  font-weight:700!important;
}
.radio-dot{border-color:rgba(255,138,33,.38)!important}
.mod-card.selected .radio-dot{border-color:var(--zj-orange)!important}
.mod-card.selected .radio-dot::after{background:linear-gradient(180deg,#ff9a36,#ff7a00)!important}
.duration-btn.active{
  background:linear-gradient(180deg,#ff9633 0%,#0570e3 100%)!important;
  border-color:rgba(255,138,33,.70)!important;
  box-shadow:none!important;
}
.duration-btn.active span{color:#fff!important}
.step-pill.active{
  background:linear-gradient(180deg,#fff6ee 0%,#fff 100%)!important;
  border-color:rgba(255,138,33,.55)!important;
  color:#d86500!important;
}
.auto-btn,
#stepNumbers button.auto-btn,
form#quiniForm #stepNumbers button.auto-btn,
button#autoNumbersBtn.auto-btn{
  background:linear-gradient(180deg,#fff7ef 0%,#ffe9d5 100%)!important;
  color:#d86500!important;
  border-color:rgba(255,138,33,.46)!important;
  font-weight:600!important;
  box-shadow:none!important;
}
.number-btn.selected,
.plus-grid .number-btn.selected,
.plus-btn.selected{
  color:#fff!important;
  border-color:#ff8a21!important;
  background:linear-gradient(180deg,#ff9d3d 0%,#ff7a00 100%)!important;
  box-shadow:none!important;
}
.cost-box strong{color:#d86500!important}
.primary-btn{background:linear-gradient(180deg,#ff9633 0%,#0570e3 100%)!important;box-shadow:none!important}
.received-summary,.received-block,.received-block h3,.received-block p{
  font-weight:400!important;
}
.received-block h3{color:#7a8796!important}
.received-block p strong{font-weight:500!important}
.success-card h1{font-weight:500!important}
.success-card > p{font-weight:400!important}
.site-footer{font-weight:400!important;line-height:1.45}
.site-footer span{display:block;margin-top:4px;color:#5f6d7b;font-size:11.5px}


/* Zona Jugadas v4 form refinements */
:root{
  --orange:#ff8a21;
  --purple:#6d3cff;
}
.topbar{
  background:linear-gradient(180deg,#d9d1e6 0%,#0f0c14 100%) !important;
  border-bottom:1px solid rgba(0,0,0,.42) !important;
}
.mini-menu a{
  color:#fff !important;
  border-color:rgba(255,255,255,.25) !important;
  background:rgba(255,255,255,.10) !important;
}
.brand-note{color:rgba(255,255,255,.82) !important;}
.primary-btn,
.submit-final,
#showPaymentBtn,
button.primary-btn{
  background:linear-gradient(180deg,#ff9b2a 0%,#0570e3 100%) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:none !important;
  font-weight:500 !important;
}
#stepNumbers button.auto-btn,
form#quiniForm #stepNumbers button.auto-btn,
button#autoNumbersBtn.auto-btn{
  background:linear-gradient(180deg,#ff9b2a 0%,#0570e3 100%) !important;
  color:#fff !important;
  border:0 !important;
  font-weight:500 !important;
  box-shadow:none !important;
}
.step-pill.active,
.duration-btn.active{
  background:linear-gradient(180deg,rgba(255,246,235,.95) 0%,rgba(255,138,33,.18) 100%) !important;
  border-color:rgba(255,138,33,.58) !important;
  color:#a94f00 !important;
  box-shadow:none !important;
}
.mod-card.selected{
  border-color:rgba(255,138,33,.65) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,247,236,.95) 100%) !important;
}
.info-btn,
.mini-info-btn,
.header-help-tab{
  background:rgba(255,138,33,.14) !important;
  border-color:rgba(255,138,33,.58) !important;
  color:#c76100 !important;
  box-shadow:none !important;
}
.number-btn.selected,
.plus-btn.selected{
  background:linear-gradient(180deg,#ffac42 0%,#ff7a00 100%) !important;
  border-color:#ff8a21 !important;
  color:#fff !important;
}
.success-card h1{
  font-weight:500 !important;
}
.success-card > p,
.received-summary,
.received-block h3,
.received-block p{
  font-weight:400 !important;
}
.received-block h3{
  color:#7a8796 !important;
}
.received-block p{
  color:#2c384b !important;
}

/* V5 ajustes Zona Jugadas */
.topbar{background:linear-gradient(180deg,#0570e3 0%,#000000 100%) !important;}
.primary-btn,.duration-btn.active,.option-btn.active,.number-btn.selected{
  background:linear-gradient(180deg,#ff8a21 0%,#0570e3 100%) !important;
  border-color:#ff8a21 !important;
  color:#fff !important;
  box-shadow:none !important;
}
#stepNumbers button.auto-btn,
form#quiniForm #stepNumbers button.auto-btn,
button#autoNumbersBtn.auto-btn,
.auto-btn{
  background:linear-gradient(180deg,#fff4ea 0%,#ffe2c2 100%) !important;
  border-color:rgba(255,138,33,.42) !important;
  color:#bd5b00 !important;
  font-weight:500 !important;
  box-shadow:none !important;
}
.info-btn,.mini-info-btn,.header-help-tab{
  border-color:rgba(255,138,33,.45) !important;
  color:#bd5b00 !important;
}
.payment-summary,.success-card,.order-summary,.success-summary{font-weight:400 !important;}