/* DMX mobile override final */
@media (max-width: 680px){
  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    background:#f6f8fc;
  }

  html[data-theme="dark"] body{
    background:#0b1220;
  }

  i[class^="fa-"], i[class*=" fa-"]{
    display:inline-block !important;
    line-height:1 !important;
    font-style:normal !important;
  }

  .container{
    width:100% !important;
    max-width:100% !important;
    padding:0 12px !important;
  }

  .topbar{
    position:sticky !important;
    top:0 !important;
    z-index:100 !important;
    margin:0 -12px 10px !important;
    padding:10px 12px !important;
    border-radius:0 0 22px 22px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    background:rgba(255,255,255,.96) !important;
    border:0 !important;
    border-bottom:1px solid rgba(16,24,40,.08) !important;
    box-shadow:0 8px 22px rgba(16,24,40,.08) !important;
    backdrop-filter:blur(14px);
  }

  html[data-theme="dark"] .topbar{
    background:rgba(15,23,42,.96) !important;
    border-bottom-color:rgba(255,255,255,.08) !important;
  }

  .brand{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    display:grid !important;
    place-items:center !important;
  }

  .brandLogoWide{display:none !important}
  .brandLogoSquare{
    display:block !important;
    width:38px !important;
    height:38px !important;
    max-width:38px !important;
  }

  .nav{
    flex:1 !important;
    min-width:0 !important;
    display:flex !important;
    justify-content:flex-end !important;
    gap:6px !important;
  }

  .nav a,
  #themeToggle,
  .toggle{
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
    border-radius:15px !important;
    display:grid !important;
    place-items:center !important;
    font-size:17px !important;
  }

  .navText,
  #themeToggle .navText{
    display:none !important;
  }

  .dmxApp{
    width:100% !important;
    margin-top:10px !important;
  }

  .dmxHero{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .dmxIntro,
  .dmxStats,
  .dmxPanel{
    border-radius:24px !important;
  }

  .dmxIntro{padding:22px 18px !important}
  .dmxTitle{
    font-size:38px !important;
    line-height:.96 !important;
    letter-spacing:-.055em !important;
  }

  .dmxLead{
    font-size:16px !important;
    line-height:1.35 !important;
  }

  .dmxActions,
  .dmxHomeTiles,
  .dmxMiniGrid{
    grid-template-columns:1fr !important;
    display:grid !important;
  }

  .dmxBtn{
    width:100%;
    min-height:54px;
    font-size:16px;
    border-radius:18px;
  }

  .dmxMapHead h1{
    font-size:34px !important;
    line-height:1 !important;
  }

  .dmxMission{
    grid-template-columns:58px 1fr !important;
    gap:11px !important;
    padding:13px !important;
    border-radius:22px !important;
  }

  .dmxNode{
    width:52px !important;
    height:52px !important;
    font-size:18px !important;
  }

  .dmxMission h2{
    font-size:20px !important;
    line-height:1.08 !important;
  }

  .dmxMission form,
  .dmxLockedBtn{
    grid-column:1/-1 !important;
    width:100% !important;
  }

  .dmxLessonTop{
    grid-template-columns:44px 1fr !important;
    gap:10px !important;
    margin-bottom:12px !important;
  }

  .dmxBack{
    width:44px !important;
    height:44px !important;
    border-radius:15px !important;
    font-size:16px !important;
  }

  .dmxLessonTitle h1{
    font-size:25px !important;
    line-height:1.02 !important;
    letter-spacing:-.04em !important;
  }

  .dmxLessonTitle p{
    font-size:13px !important;
    line-height:1.25 !important;
  }

  .dmxStageRail{
    display:flex !important;
    gap:7px !important;
    overflow-x:auto !important;
    padding:2px 0 14px !important;
    margin:0 0 6px !important;
    -webkit-overflow-scrolling:touch;
  }

  .dmxStageDot{
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    font-size:15px !important;
    border-bottom-width:5px !important;
  }

  .dmxQuestion,
  .dmxResult,
  .dmxGate{
    padding:18px !important;
    border-radius:24px !important;
    border-bottom-width:7px !important;
  }

  .dmxQuestionTop{
    display:grid !important;
    gap:6px !important;
    font-size:13px !important;
    line-height:1.25 !important;
  }

  .dmxQuestionMeter{
    height:14px !important;
    margin:14px 0 20px !important;
  }

  .dmxQuestionText{
    font-size:26px !important;
    line-height:1.12 !important;
    letter-spacing:-.035em !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
  }

  .dmxOptions{
    gap:10px !important;
    margin-top:20px !important;
  }

  .dmxOption{
    min-height:60px !important;
    grid-template-columns:38px 1fr !important;
    gap:10px !important;
    padding:12px !important;
    border-radius:18px !important;
    border-bottom-width:5px !important;
    font-size:16px !important;
    line-height:1.25 !important;
  }

  .dmxOptionBubble{
    width:34px !important;
    height:34px !important;
    font-size:15px !important;
  }

  .dmxFeedback{
    margin-top:14px !important;
    padding:14px !important;
    border-radius:20px !important;
  }

  .dmxFeedbackTitle{font-size:20px !important}
  .dmxFeedbackText{
    font-size:15px !important;
    line-height:1.4 !important;
  }

  .dmxQuestionFoot,
  .dmxResultActions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .dmxQuestionFoot .dmxBtn,
  .dmxResultActions .dmxBtn,
  .dmxWide{
    width:100% !important;
    min-height:54px !important;
  }
}

/* ===== DMX responsive v2: mobile app real ===== */
@media (max-width: 900px){
  .dmxLesson{
    max-width:100% !important;
  }

  .dmxStageRail{
    display:grid !important;
    grid-template-columns:repeat(10, minmax(0, 1fr)) !important;
    gap:6px !important;
    overflow:visible !important;
    padding:4px 0 14px !important;
    margin:0 0 10px !important;
  }

  .dmxStageRail form{
    width:100% !important;
    min-width:0 !important;
  }

  .dmxStageDot{
    width:100% !important;
    min-width:0 !important;
    max-width:58px !important;
    height:auto !important;
    aspect-ratio:1/1 !important;
    margin:0 auto !important;
    font-size:18px !important;
    border-bottom-width:5px !important;
  }

  .dmxQuestion{
    width:100% !important;
    padding:22px !important;
  }

  .dmxQuestionText{
    font-size:clamp(24px, 5vw, 34px) !important;
    line-height:1.08 !important;
    letter-spacing:-.04em !important;
  }

  .dmxOptions{
    gap:12px !important;
  }

  .dmxOption{
    min-height:62px !important;
    font-size:17px !important;
  }
}

@media (max-width: 680px){
  .dmxLessonTop{
    grid-template-columns:42px 1fr !important;
    gap:10px !important;
  }

  .dmxBack{
    width:42px !important;
    height:42px !important;
  }

  .dmxLessonTitle h1{
    font-size:24px !important;
  }

  .dmxLessonTitle p{
    font-size:12.5px !important;
  }

  .dmxStageRail{
    gap:4px !important;
    padding-bottom:12px !important;
  }

  .dmxStageDot{
    max-width:38px !important;
    font-size:13px !important;
    border-bottom-width:4px !important;
  }

  .dmxStageDot.current{
    outline:4px solid rgba(88,204,2,.20) !important;
  }

  .dmxQuestion{
    padding:16px !important;
    border-radius:22px !important;
  }

  .dmxQuestionTop{
    font-size:12.5px !important;
    gap:5px !important;
  }

  .dmxQuestionMeter{
    height:12px !important;
    margin:12px 0 18px !important;
  }

  .dmxQuestionText{
    font-size:22px !important;
    line-height:1.12 !important;
    letter-spacing:-.03em !important;
  }

  .dmxOptions{
    margin-top:18px !important;
    gap:9px !important;
  }

  .dmxOption{
    min-height:54px !important;
    grid-template-columns:34px 1fr !important;
    gap:9px !important;
    padding:10px 12px !important;
    border-radius:16px !important;
    border-bottom-width:4px !important;
    font-size:14.5px !important;
    line-height:1.22 !important;
  }

  .dmxOptionBubble{
    width:30px !important;
    height:30px !important;
    font-size:13px !important;
  }

  .dmxHint{
    font-size:14px !important;
    margin-top:12px !important;
  }

  .dmxFeedback{
    padding:12px !important;
    gap:10px !important;
  }

  .dmxFeedbackIcon{
    width:34px !important;
    height:34px !important;
    border-radius:12px !important;
    font-size:15px !important;
  }

  .dmxFeedbackTitle{
    font-size:18px !important;
  }

  .dmxFeedbackText{
    font-size:14px !important;
  }

  .dmxQuestionFoot .dmxBtn,
  .dmxResultActions .dmxBtn,
  .dmxWide{
    min-height:50px !important;
    font-size:15px !important;
  }
}

@media (max-width: 390px){
  .container{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .dmxStageRail{
    gap:3px !important;
  }

  .dmxStageDot{
    max-width:34px !important;
    font-size:12px !important;
  }

  .dmxQuestion{
    padding:14px !important;
  }

  .dmxQuestionText{
    font-size:20.5px !important;
  }

  .dmxOption{
    font-size:13.5px !important;
    min-height:50px !important;
  }
}

/* ===== DMX responsive v3: tablet/mobile real + feedback icon fix ===== */
.dmxFeedback.ok .dmxFeedbackIcon{
  background:#22c55e !important;
  color:#fff !important;
}

.dmxFeedback.bad .dmxFeedbackIcon{
  background:#f43f5e !important;
  color:#fff !important;
}

.dmxFeedbackIcon i{
  color:#fff !important;
  display:inline-block !important;
}

@media (max-width:800px){
  .container{
    max-width:100% !important;
    width:100% !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .dmxLesson{
    max-width:100% !important;
  }

  .dmxLessonTitle h1{
    font-size:34px !important;
    line-height:1 !important;
  }

  .dmxLessonTitle p{
    font-size:16px !important;
  }

  .dmxStageRail{
    display:grid !important;
    grid-template-columns:repeat(10, minmax(0,1fr)) !important;
    gap:7px !important;
    overflow:visible !important;
  }

  .dmxStageRail form{
    width:100% !important;
    min-width:0 !important;
  }

  .dmxStageDot{
    width:100% !important;
    min-width:0 !important;
    max-width:54px !important;
    height:auto !important;
    aspect-ratio:1/1 !important;
    margin:0 auto !important;
    font-size:17px !important;
    border-bottom-width:5px !important;
  }

  .dmxQuestion{
    padding:24px !important;
    border-radius:26px !important;
  }

  .dmxQuestionText{
    font-size:30px !important;
    line-height:1.1 !important;
    letter-spacing:-.035em !important;
  }

  .dmxOption{
    min-height:58px !important;
    font-size:16px !important;
    padding:12px 14px !important;
    border-radius:17px !important;
    border-bottom-width:5px !important;
  }

  .dmxFeedback{
    padding:14px !important;
    border-radius:20px !important;
  }

  .dmxFeedbackTitle{
    font-size:21px !important;
  }

  .dmxFeedbackText{
    font-size:16px !important;
    line-height:1.35 !important;
  }
}

@media (max-width:520px){
  .container{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .dmxLessonTitle h1{
    font-size:25px !important;
  }

  .dmxLessonTitle p{
    font-size:12.5px !important;
  }

  .dmxStageRail{
    gap:4px !important;
  }

  .dmxStageDot{
    max-width:35px !important;
    font-size:12px !important;
    border-bottom-width:4px !important;
  }

  .dmxQuestion{
    padding:14px !important;
  }

  .dmxQuestionText{
    font-size:21px !important;
  }

  .dmxOption{
    min-height:50px !important;
    grid-template-columns:32px 1fr !important;
    font-size:13.5px !important;
  }

  .dmxOptionBubble{
    width:29px !important;
    height:29px !important;
    font-size:12px !important;
  }
}

/* ===== DMX dark mode readable answer states ===== */
.dmxOption.correct,
html[data-theme="dark"] .dmxOption.correct{
  background:#ecfdf3 !important;
  border-color:#86efac !important;
  border-bottom-color:#22c55e !important;
  color:#052e16 !important;
}

.dmxOption.wrong,
html[data-theme="dark"] .dmxOption.wrong{
  background:#fff1f2 !important;
  border-color:#fda4af !important;
  border-bottom-color:#f43f5e !important;
  color:#881337 !important;
}

.dmxOption.correct span,
.dmxOption.wrong span{
  color:inherit !important;
}

.dmxOption.correct .dmxOptionBubble,
html[data-theme="dark"] .dmxOption.correct .dmxOptionBubble{
  background:#22c55e !important;
  color:#fff !important;
}

.dmxOption.wrong .dmxOptionBubble,
html[data-theme="dark"] .dmxOption.wrong .dmxOptionBubble{
  background:#f43f5e !important;
  color:#fff !important;
}

.dmxFeedback.ok,
html[data-theme="dark"] .dmxFeedback.ok{
  background:#ecfdf3 !important;
  border-color:#86efac !important;
  color:#14532d !important;
}

.dmxFeedback.bad,
html[data-theme="dark"] .dmxFeedback.bad{
  background:#fff1f2 !important;
  border-color:#fda4af !important;
  color:#9f1239 !important;
}

.dmxFeedback.ok .dmxFeedbackTitle,
.dmxFeedback.ok .dmxFeedbackText,
.dmxFeedback.bad .dmxFeedbackTitle,
.dmxFeedback.bad .dmxFeedbackText{
  color:inherit !important;
}

/* ===== UX: cursor pointer en elementos cliqueables ===== */
a[href],
button:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
input[type="reset"]:not(:disabled),
[role="button"],
[data-action],
[data-pick],
.btn:not(:disabled),
.authBtn:not(:disabled),
.dmxBtn:not(:disabled),
.dmxOption:not(.disabled),
.dmxStageDot:not(.locked),
.stageBtn:not(.locked),
.opt:not(.disabled){
  cursor:pointer !important;
}

button:disabled,
input:disabled,
[aria-disabled="true"],
.disabled,
.dmxLockedBtn,
.dmxOption.disabled,
.dmxStageDot.locked,
.stageBtn.locked,
.opt.disabled{
  cursor:not-allowed !important;
}


/* ===== DMX Pricing page ===== */
.dmxPricing{
  max-width:1180px;
}

.dmxPricingHead{
  text-align:center;
  max-width:820px;
  margin:12px auto 24px;
}

.dmxPricingHead .dmxBadge{
  margin:0 auto;
}

.dmxPricingHead h1{
  margin:18px 0 0;
  font-size:clamp(36px, 6vw, 72px);
  line-height:.96;
  letter-spacing:-.06em;
}

.dmxPricingHead p{
  margin:16px auto 0;
  max-width:660px;
  color:var(--dmx-muted);
  font-size:18px;
  font-weight:750;
}

.dmxPriceGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
}

.dmxPriceCard{
  position:relative;
  padding:26px;
  border-radius:30px;
  background:var(--dmx-card);
  border:2px solid var(--dmx-line);
  border-bottom:8px solid #d0d5dd;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.dmxPriceCard.featured{
  border-color:var(--dmx-green);
  border-bottom-color:var(--dmx-green2);
  transform:translateY(-8px);
}

.dmxPriceCard.premium{
  border-color:var(--dmx-blue);
  border-bottom-color:#0b83bd;
}

.dmxPopular{
  position:absolute;
  top:-15px;
  left:24px;
  padding:7px 12px;
  border-radius:999px;
  background:var(--dmx-green);
  color:#fff;
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.dmxPlanTop h2{
  margin:0;
  font-size:28px;
  letter-spacing:-.04em;
  text-transform:uppercase;
}

.dmxPrice{
  margin-top:8px;
  display:flex;
  align-items:flex-start;
  gap:2px;
  font-size:54px;
  line-height:.9;
  font-weight:1000;
  letter-spacing:-.06em;
}

.dmxPrice span{
  font-size:22px;
  margin-top:6px;
}

.dmxPrice small{
  align-self:flex-end;
  margin:0 0 4px 4px;
  color:var(--dmx-muted);
  font-size:17px;
  font-weight:900;
  letter-spacing:0;
}

.dmxPlanList{
  display:grid;
  gap:12px;
  padding:0;
  margin:0;
  list-style:none;
  color:var(--dmx-ink);
  font-weight:800;
}

.dmxPlanList li{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:10px;
  align-items:start;
  line-height:1.3;
}

.dmxPlanList .fa-check{
  color:var(--dmx-green);
}

.dmxPlanList .fa-xmark{
  color:var(--dmx-red);
}

.dmxPlanList .fa-circle-info{
  color:var(--dmx-orange);
}

.dmxPriceCard .dmxBtn{
  margin-top:auto;
}

html[data-theme="dark"] .dmxPriceCard{
  border-color:#263244;
  border-bottom-color:#111827;
}

html[data-theme="dark"] .dmxPriceCard.featured{
  border-color:var(--dmx-green);
  border-bottom-color:var(--dmx-green2);
}

html[data-theme="dark"] .dmxPriceCard.premium{
  border-color:var(--dmx-blue);
  border-bottom-color:#0b83bd;
}

@media(max-width:900px){
  .dmxPriceGrid{
    grid-template-columns:1fr;
  }

  .dmxPriceCard.featured{
    transform:none;
  }

  .dmxPricingHead{
    text-align:left;
  }

  .dmxPricingHead .dmxBadge{
    margin:0;
  }
}

@media(max-width:520px){
  .dmxPricingHead h1{
    font-size:34px;
  }

  .dmxPricingHead p{
    font-size:16px;
  }

  .dmxPriceCard{
    padding:20px;
    border-radius:24px;
  }

  .dmxPrice{
    font-size:46px;
  }

  .dmxPlanList{
    font-size:15px;
  }
}

/* ===== UX: ocultar accesos protegidos para invitados ===== */
body[data-auth="0"] a[href*="/estadisticas"],
body[data-auth="0"] button[data-protected="stats"],
body[data-auth="0"] [data-requires-auth="1"]{
  display:none !important;
}


/* ===== DMX Account panel ===== */
.dmxAccount{
  max-width:1180px;
}

.dmxAccountHead{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  margin:12px 0 22px;
}

.dmxAccountHead h1{
  margin:16px 0 0;
  font-size:clamp(34px, 5vw, 62px);
  line-height:.96;
  letter-spacing:-.055em;
}

.dmxAccountHead p{
  margin:12px 0 0;
  color:var(--dmx-muted);
  font-size:17px;
  font-weight:800;
}

.dmxAccountActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.dmxAccountGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.dmxAccountCard{
  background:var(--dmx-card);
  border:2px solid var(--dmx-line);
  border-bottom:7px solid #d0d5dd;
  border-radius:28px;
  padding:22px;
}

.dmxAccountCardTop{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}

.dmxAccountCardTop i{
  width:42px;
  height:42px;
  display:grid !important;
  place-items:center;
  border-radius:15px;
  background:rgba(88,204,2,.14);
  color:var(--dmx-green2);
  font-size:18px;
}

.dmxAccountCardTop h2{
  margin:0;
  font-size:24px;
  letter-spacing:-.04em;
}

.dmxAccountRows{
  display:grid;
  gap:10px;
}

.dmxAccountRows div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid var(--dmx-line);
}

.dmxAccountRows span{
  color:var(--dmx-muted);
  font-weight:800;
}

.dmxAccountRows strong{
  text-align:right;
}

.dmxAccountForm{
  display:grid;
  gap:12px;
}

.dmxAccountForm label{
  display:grid;
  gap:7px;
  color:var(--dmx-muted);
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.dmxPlanPill{
  display:inline-flex;
  width:max-content;
  padding:9px 13px;
  border-radius:999px;
  background:#eef2ff;
  color:#3730a3;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.dmxPlanPill.free{
  background:#f3f4f6;
  color:#374151;
}

.dmxPlanPill.pro{
  background:#ecfdf3;
  color:#166534;
}

.dmxPlanPill.premium{
  background:#e0f2fe;
  color:#075985;
}

.dmxAccountPlan p{
  color:var(--dmx-muted);
  font-weight:800;
  line-height:1.45;
}

.dmxAccountHelp{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  background:rgba(14,165,233,.10);
  color:var(--dmx-blue);
  font-weight:800;
}

.dmxNotice.ok{
  background:#ecfdf3 !important;
  color:#14532d !important;
  border-color:#86efac !important;
}

.dmxNotice.bad{
  background:#fff1f2 !important;
  color:#9f1239 !important;
  border-color:#fda4af !important;
}

html[data-theme="dark"] .dmxAccountCard{
  border-color:#263244;
  border-bottom-color:#111827;
}

@media(max-width:900px){
  .dmxAccountHead{
    display:grid;
  }

  .dmxAccountGrid{
    grid-template-columns:1fr;
  }
}

@media(max-width:520px){
  .dmxAccountCard{
    padding:18px;
    border-radius:22px;
  }

  .dmxAccountRows div{
    display:grid;
  }

  .dmxAccountRows strong{
    text-align:left;
  }
}


/* ===== DMX Admin panel ===== */
.dmxAdmin{ max-width:1180px; }
.dmxAdminHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin:12px 0 22px;
}
.dmxAdminHead h1{
  margin:16px 0 0;
  font-size:clamp(34px, 5vw, 62px);
  line-height:.96;
  letter-spacing:-.055em;
}
.dmxAdminHead p{
  margin:12px 0 0;
  color:var(--dmx-muted);
  font-size:17px;
  font-weight:800;
}
.dmxAdminGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
.dmxAdminMetric{
  font-size:46px;
  font-weight:1000;
  letter-spacing:-.06em;
}
.dmxAdminTable{
  display:grid;
  gap:14px;
}
.dmxAdminPlanRow{
  display:grid;
  grid-template-columns:1.2fr .7fr .8fr 1.2fr .4fr;
  gap:10px;
  align-items:end;
  padding:14px;
  border:1px solid var(--dmx-line);
  border-radius:18px;
}
.dmxCheck{
  display:flex !important;
  gap:8px !important;
  align-items:center !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  color:var(--dmx-ink) !important;
}
.dmxCheck input{ width:auto; }
.dmxAdminOptions{
  display:grid;
  gap:12px;
}
.dmxAdminOptions label{
  padding:12px;
  border:1px solid var(--dmx-line);
  border-radius:18px;
}
.dmxAdminQuestionList{
  display:grid;
  gap:10px;
}
.dmxAdminQuestionList a{
  display:grid;
  gap:6px;
  padding:14px;
  border:1px solid var(--dmx-line);
  border-radius:18px;
  color:var(--dmx-ink);
  text-decoration:none;
}
.dmxAdminQuestionList span{
  color:var(--dmx-muted);
  font-weight:700;
}
.dmxAdminQuestionList em{
  color:var(--dmx-green2);
  font-style:normal;
  font-weight:900;
}
textarea.authInput{
  min-height:auto;
  resize:vertical;
}
@media(max-width:900px){
  .dmxAdminHead{ display:grid; }
  .dmxAdminGrid{ grid-template-columns:1fr; }
  .dmxAdminPlanRow{ grid-template-columns:1fr; }
}

/* Ajuste precios: botones alineados y mejor margen móvil */
.dmxPriceCard{
  display:flex;
  flex-direction:column;
  height:100%;
  box-sizing:border-box;
}

.dmxPriceCard .dmxPlanList{
  flex:1 1 auto;
}

.dmxPriceCard > .dmxBtn,
.dmxPriceCard > .dmxPayOwn,
.dmxPriceCard > .dmxPayChoice{
  margin-top:auto;
}

.dmxPriceCard .dmxPayChoice .dmxPayOwn{
  width:100%;
}

@media(max-width:900px){
  .dmxPricing{
    width:calc(100% - 36px);
    margin-left:auto;
    margin-right:auto;
  }

  .dmxPriceGrid{
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
  }

  .dmxPriceCard{
    width:100%;
  }
}

@media(max-width:520px){
  .dmxPricing{
    width:calc(100% - 32px);
  }

  .dmxPriceCard{
    padding:22px;
    border-radius:26px;
  }
}

/* Margen real en móvil para cards de precios */
@media(max-width:900px){
  .dmxApp.dmxPricing{
    width:auto !important;
    max-width:none !important;
    margin-left:16px !important;
    margin-right:16px !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .dmxPricing .dmxPriceGrid{
    width:100% !important;
    max-width:640px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .dmxPricing .dmxPriceCard{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

@media(max-width:420px){
  .dmxApp.dmxPricing{
    margin-left:14px !important;
    margin-right:14px !important;
  }
}


/* Ajustes finales precios móvil/texto */
.dmxPricingHead{
  margin-bottom:34px;
}

@media(max-width:900px){
  .dmxApp.dmxPricing{
    margin-left:20px !important;
    margin-right:20px !important;
  }

  .dmxPricingHead{
    margin-bottom:36px !important;
  }
}

@media(max-width:420px){
  .dmxApp.dmxPricing{
    margin-left:18px !important;
    margin-right:18px !important;
  }
}


/* Switch mensual/anual en precios */
.dmxBillingSwitch{margin:22px auto 0;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:8px 12px;border:1px solid var(--dmx-line);border-radius:999px;background:#fff;box-shadow:0 12px 30px rgba(16,24,40,.07);font-size:14px;font-weight:900;color:#667085}
.dmxBillingSwitch span.active{color:#101828}
.dmxBillingSwitch b{margin-left:5px;padding:3px 7px;border-radius:999px;background:#ecfdf3;color:#027a48;font-size:11px}
.dmxIosSwitch{position:relative;width:54px;height:30px;display:inline-block;flex:0 0 auto}
.dmxIosSwitch input{display:none}
.dmxIosSwitch>span{position:absolute;inset:0;cursor:pointer;border-radius:999px;background:#d0d5dd;transition:.18s ease}
.dmxIosSwitch>span:before{content:"";position:absolute;width:24px;height:24px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(16,24,40,.25);transition:.18s ease}
.dmxIosSwitch input:checked+span{background:#1570ef}
.dmxIosSwitch input:checked+span:before{transform:translateX(24px)}
.dmxPrice b{font:inherit;letter-spacing:inherit}
.dmxAnnualNote{margin-top:10px;display:flex;align-items:center;gap:7px;color:#666666;font-size:11px;font-weight:800;line-height:1.25}
.dmxAnnualNote em{font-style:normal;color:#666666;opacity:.85}
.dmxAnnualInfo{width:18px;height:18px;border-radius:50%;border:1px solid #b8c0cc;background:#fff;color:#666666;font-size:11px;font-weight:1000;line-height:1;cursor:pointer}
.dmxBillingMonthly .dmxAnnualNote{display:none}
.dmxAnnualInfoModal{position:fixed;inset:0;z-index:9999;background:rgba(16,24,40,.45);display:flex;align-items:center;justify-content:center;padding:18px}
.dmxAnnualInfoModal[hidden]{display:none}
.dmxAnnualInfoBox{position:relative;width:min(440px,100%);padding:24px;border-radius:24px;background:#fff;box-shadow:0 24px 70px rgba(16,24,40,.25);color:#101828}
.dmxAnnualInfoBox h3{margin:0 0 12px;font-size:22px;letter-spacing:-.03em}
.dmxAnnualInfoBox p{margin:9px 0;color:#475467;font-size:14px;line-height:1.45}
.dmxAnnualInfoClose{position:absolute;right:14px;top:12px;border:0;background:transparent;color:#667085;font-size:26px;cursor:pointer}
@media(max-width:520px){.dmxBillingSwitch{display:flex;width:100%;max-width:360px;gap:8px;font-size:13px}.dmxBillingSwitch b{display:block;margin:3px 0 0}}


@media(max-width:900px){
  .dmxPayMethodMenu{
    padding:10px;
    border-radius:18px;
  }
  .dmxPayMethodMenu .dmxPayOwn{
    padding:14px 15px;
  }
}

\n
.dmxAdminPlanRow.dmxDodoVariantRow{
  grid-template-columns:1fr 1fr;
}
@media(max-width:900px){
  .dmxAdminPlanRow.dmxDodoVariantRow{
    grid-template-columns:1fr;
  }
}
\n\n
.dmxDodoPayButton{
  width:100%;
  border:0;
  border-radius:999px;
  padding:13px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  font-weight:900;
  color:#fff;
  background:#111827;
}
.dmxDodoPayButton:disabled{
  opacity:.65;
  cursor:wait;
}
\n
/* Fix global botones/enlaces: evita textos gigantes/desalineados */
.dmxBtn,
.dmxLockedBtn,
.dmxPayOwn,
.dmxMission button,
.dmxMission .dmxLockedBtn,
.dmxPriceCard .dmxBtn,
.dmxPriceCard .dmxPayOwn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  min-height:52px !important;
  padding:0 18px !important;
  font-size:16px !important;
  line-height:1.1 !important;
  font-weight:950 !important;
  text-align:center !important;
  text-decoration:none !important;
  white-space:normal !important;
  box-sizing:border-box !important;
}

.dmxMission .dmxLockedBtn{
  width:100% !important;
  max-width:100% !important;
}

.dmxLockedBtn i,
.dmxBtn i,
.dmxPayOwn i{
  font-size:1em !important;
  line-height:1 !important;
  flex:0 0 auto !important;
}

/* Precios móvil: tarjetas en carrusel horizontal tipo galería */
@media (max-width: 760px){
  .dmxPriceGrid,
  .dmxPricingGrid,
  .dmxPlansGrid{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:clamp(250px, 78vw, 340px) !important;
    grid-template-columns:none !important;
    gap:14px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
    padding:4px 18px 18px !important;
    margin-left:-18px !important;
    margin-right:-18px !important;
  }

  .dmxPriceGrid > *,
  .dmxPricingGrid > *,
  .dmxPlansGrid > *{
    scroll-snap-align:start !important;
    width:auto !important;
    max-width:none !important;
  }

  .dmxPriceGrid::-webkit-scrollbar,
  .dmxPricingGrid::-webkit-scrollbar,
  .dmxPlansGrid::-webkit-scrollbar{
    display:none !important;
  }

  .dmxPriceGrid,
  .dmxPricingGrid,
  .dmxPlansGrid{
    scrollbar-width:none !important;
  }
}

/* Fix carrusel precios móvil: evita marco/recortes blancos y deja espacio para etiquetas */
@media (max-width: 760px){
  .dmxPriceGrid,
  .dmxPricingGrid,
  .dmxPlansGrid{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding:34px 18px 22px !important;
    grid-auto-columns:calc(100vw - 74px) !important;
    scroll-padding-left:18px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    contain:none !important;
  }

  .dmxPriceGrid > *,
  .dmxPricingGrid > *,
  .dmxPlansGrid > *{
    min-width:0 !important;
    overflow:visible !important;
    scroll-snap-align:start !important;
  }

  .dmxPriceCard,
  .dmxPlanCard,
  .dmxPricingCard{
    overflow:visible !important;
  }
}

/* Precios móvil: quitar márgenes laterales que cortan el carrusel */
@media (max-width: 760px){
  .dmxPriceGrid,
  .dmxPricingGrid,
  .dmxPlansGrid{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding-left:0 !important;
    padding-right:0 !important;
    scroll-padding-left:0 !important;
    scroll-padding-right:0 !important;
    grid-auto-columns:calc(100vw - 34px) !important;
  }

  .dmxPriceGrid > *,
  .dmxPricingGrid > *,
  .dmxPlansGrid > *{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .dmxPriceGrid > *:first-child,
  .dmxPricingGrid > *:first-child,
  .dmxPlansGrid > *:first-child{
    margin-left:18px !important;
  }

  .dmxPriceGrid > *:last-child,
  .dmxPricingGrid > *:last-child,
  .dmxPlansGrid > *:last-child{
    margin-right:18px !important;
  }
}

/* Reset carrusel precios móvil: volver a versión simple sin márgenes laterales */
@media (max-width: 760px){
  .dmxApp.dmxPricing.dmxBillingYearly,
  .dmxApp.dmxPricing,
  .dmxPricing.dmxBillingYearly{
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    overflow-x:hidden !important;
  }

  .dmxApp.dmxPricing.dmxBillingYearly > *,
  .dmxApp.dmxPricing > *,
  .dmxPricing.dmxBillingYearly > *{
    max-width:none !important;
  }

  .dmxPriceGrid,
  .dmxPricingGrid,
  .dmxPlansGrid{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:clamp(250px, 78vw, 340px) !important;
    grid-template-columns:none !important;
    gap:14px !important;
    width:100vw !important;
    max-width:100vw !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:34px 0 18px 0 !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-left:0 !important;
    scroll-padding-right:0 !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    contain:none !important;
  }

  .dmxPriceGrid > *,
  .dmxPricingGrid > *,
  .dmxPlansGrid > *{
    scroll-snap-align:start !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    overflow:visible !important;
  }

  .dmxPriceGrid::-webkit-scrollbar,
  .dmxPricingGrid::-webkit-scrollbar,
  .dmxPlansGrid::-webkit-scrollbar{
    display:none !important;
  }

  .dmxPriceCard,
  .dmxPlanCard,
  .dmxPricingCard{
    overflow:visible !important;
  }
}

/* Precios móvil: quitar container lateral y corregir separación entre tarjetas */
@media (max-width: 760px){
  .dmxPricing .container,
  .dmxPricing .dmxContainer,
  .dmxApp.dmxPricing .container,
  .dmxApp.dmxPricing .dmxContainer{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow:visible !important;
  }

  .dmxPricing .dmxPriceGrid,
  .dmxPricing .dmxPricingGrid,
  .dmxPricing .dmxPlansGrid{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:34px 0 20px 0 !important;
    display:grid !important;
    grid-auto-flow:column !important;
    grid-template-columns:none !important;
    grid-auto-columns:minmax(282px, 82vw) !important;
    gap:18px !important;
    column-gap:18px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-left:0 !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .dmxPricing .dmxPriceGrid > *,
  .dmxPricing .dmxPricingGrid > *,
  .dmxPricing .dmxPlansGrid > *{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    scroll-snap-align:start !important;
    overflow:visible !important;
  }

  .dmxPricing .dmxPriceGrid::-webkit-scrollbar,
  .dmxPricing .dmxPricingGrid::-webkit-scrollbar,
  .dmxPricing .dmxPlansGrid::-webkit-scrollbar{
    display:none !important;
  }
}

/* Precios móvil: carrusel definitivo sin márgenes laterales y snap centrado */
@media (max-width: 760px){
  body:has(.dmxPricing){
    overflow-x:hidden !important;
  }

  .dmxPricing .container,
  .dmxPricing .dmxContainer,
  .dmxPricing .dmxWrap,
  .dmxPricing .dmxSection,
  .dmxApp.dmxPricing .container,
  .dmxApp.dmxPricing .dmxContainer{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow:visible !important;
  }

  .dmxPricing .dmxPriceGrid,
  .dmxPricing .dmxPricingGrid,
  .dmxPricing .dmxPlansGrid{
    position:relative !important;
    left:50% !important;
    width:100vw !important;
    max-width:100vw !important;
    margin-left:-50vw !important;
    margin-right:-50vw !important;

    display:grid !important;
    grid-auto-flow:column !important;
    grid-template-columns:none !important;
    grid-auto-columns:82vw !important;
    gap:18px !important;

    padding:34px 9vw 22px 9vw !important;
    overflow-x:auto !important;
    overflow-y:visible !important;

    scroll-snap-type:x mandatory !important;
    scroll-padding-left:9vw !important;
    scroll-padding-right:9vw !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .dmxPricing .dmxPriceGrid > *,
  .dmxPricing .dmxPricingGrid > *,
  .dmxPricing .dmxPlansGrid > *{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    scroll-snap-align:center !important;
    scroll-snap-stop:always !important;
    overflow:visible !important;
  }

  .dmxPricing .dmxPriceGrid::-webkit-scrollbar,
  .dmxPricing .dmxPricingGrid::-webkit-scrollbar,
  .dmxPricing .dmxPlansGrid::-webkit-scrollbar{
    display:none !important;
  }
}

/* Precios móvil: carrusel tipo DirecTV, tarjetas más angostas y snap correcto */
@media (max-width: 760px){
  .dmxPricing .container,
  .dmxPricing .dmxContainer,
  .dmxApp.dmxPricing .container,
  .dmxApp.dmxPricing .dmxContainer{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow:visible !important;
  }

  .dmxPricing .dmxPriceGrid,
  .dmxPricing .dmxPricingGrid,
  .dmxPricing .dmxPlansGrid{
    left:auto !important;
    width:100vw !important;
    max-width:100vw !important;
    margin-left:0 !important;
    margin-right:0 !important;

    display:grid !important;
    grid-auto-flow:column !important;
    grid-template-columns:none !important;
    grid-auto-columns:66vw !important;
    gap:8vw !important;

    padding:34px 17vw 22px 17vw !important;
    overflow-x:auto !important;
    overflow-y:visible !important;

    scroll-snap-type:x mandatory !important;
    scroll-padding-left:17vw !important;
    scroll-padding-right:17vw !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .dmxPricing .dmxPriceGrid > *,
  .dmxPricing .dmxPricingGrid > *,
  .dmxPricing .dmxPlansGrid > *{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    scroll-snap-align:center !important;
    scroll-snap-stop:always !important;
    overflow:visible !important;
  }

  .dmxPricing .dmxPriceGrid::-webkit-scrollbar,
  .dmxPricing .dmxPricingGrid::-webkit-scrollbar,
  .dmxPricing .dmxPlansGrid::-webkit-scrollbar{
    display:none !important;
  }
}


/* Precios móvil: puntos y flechas del carrusel */
.dmxPricing .dmxPriceCarouselShell{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
}

.dmxPricing .dmxPriceDots{
  display:none;
}

@media (max-width:760px){
  .dmxPricing .dmxPriceDots{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    margin:10px 0 4px !important;
    width:100% !important;
  }

  .dmxPricing .dmxPriceDot{
    width:9px !important;
    height:9px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:999px !important;
    background:#cbd5e1 !important;
    opacity:.9 !important;
    cursor:pointer !important;
    transition:width .18s ease, background .18s ease, opacity .18s ease !important;
  }

  .dmxPricing .dmxPriceDot.is-active{
    width:24px !important;
    background:var(--dmx-blue) !important;
    opacity:1 !important;
  }

  .dmxPricing .dmxPriceArrow{
    display:none !important;
  }
}

/* Flechas solo en PC con pantalla angosta, no en móviles táctiles */
@media (max-width:760px) and (hover:hover) and (pointer:fine){
  .dmxPricing .dmxPriceArrow{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:30 !important;
    width:46px !important;
    height:46px !important;
    border:0 !important;
    border-radius:999px !important;
    background:#ffffff !important;
    color:var(--dmx-blue) !important;
    box-shadow:0 12px 28px rgba(15,23,42,.22) !important;
    cursor:pointer !important;
  }

  .dmxPricing .dmxPriceArrowPrev{
    left:10px !important;
  }

  .dmxPricing .dmxPriceArrowNext{
    right:10px !important;
  }

  .dmxPricing .dmxPriceArrow.is-disabled{
    opacity:.35 !important;
    pointer-events:none !important;
  }
}

/* Precios móvil: restaura header/selector y deja ancho completo solo al carrusel */
@media (max-width: 760px){
  .dmxApp.dmxPricing,
  .dmxApp.dmxPricing.dmxBillingYearly,
  .dmxPricing.dmxBillingYearly{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow-x:hidden !important;
  }

  .dmxPricing .dmxSection,
  .dmxPricing .dmxWrap{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    overflow:visible !important;
  }

  .dmxPricing .container,
  .dmxPricing .dmxContainer{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:18px !important;
    padding-right:18px !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    overflow:visible !important;
  }

  .dmxPricing .dmxBilling,
  .dmxPricing .dmxBillingToggle,
  .dmxPricing .dmxBillingSwitch,
  .dmxPricing .dmxBillingTabs,
  .dmxPricing .dmxBillingBox{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .dmxPricing .dmxPriceCarouselShell{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding:0 !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    overflow:visible !important;
  }

  .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid,
  .dmxPricing .dmxPriceCarouselShell .dmxPricingGrid,
  .dmxPricing .dmxPriceCarouselShell .dmxPlansGrid{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;

    width:100vw !important;
    max-width:100vw !important;
    margin-left:0 !important;
    margin-right:0 !important;

    display:grid !important;
    grid-auto-flow:column !important;
    grid-template-columns:none !important;
    grid-auto-columns:66vw !important;
    gap:8vw !important;

    padding:34px 5vw 22px 5vw !important;
    overflow-x:auto !important;
    overflow-y:visible !important;

    scroll-snap-type:x mandatory !important;
    scroll-padding-left:5vw !important;
    scroll-padding-right:5vw !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid > *,
  .dmxPricing .dmxPriceCarouselShell .dmxPricingGrid > *,
  .dmxPricing .dmxPriceCarouselShell .dmxPlansGrid > *{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    scroll-snap-align:center !important;
    scroll-snap-stop:always !important;
    overflow:visible !important;
  }

  .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid::-webkit-scrollbar,
  .dmxPricing .dmxPriceCarouselShell .dmxPricingGrid::-webkit-scrollbar,
  .dmxPricing .dmxPriceCarouselShell .dmxPlansGrid::-webkit-scrollbar{
    display:none !important;
  }
}

/* Precios tablet: ordenar encabezado, textos y selector anual/mensual */
@media (min-width:761px) and (max-width:800px){
  .dmxPricing .container,
  .dmxPricing .dmxContainer{
    padding-left:32px !important;
    padding-right:32px !important;
  }

  .dmxPricing .dmxHero,
  .dmxPricing .dmxPricingHero,
  .dmxPricing .dmxSectionHead,
  .dmxPricing header:not(.dmxTopbar){
    max-width:760px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  .dmxPricing .dmxHero > *,
  .dmxPricing .dmxPricingHero > *,
  .dmxPricing .dmxSectionHead > *,
  .dmxPricing header:not(.dmxTopbar) > *{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .dmxPricing h1{
    display:block !important;
    max-width:760px !important;
    margin:26px auto 18px !important;
    text-align:center !important;
    text-wrap:balance !important;
  }

  .dmxPricing h1 + p,
  .dmxPricing .dmxHero p,
  .dmxPricing .dmxPricingHero p,
  .dmxPricing .dmxSectionHead p{
    max-width:720px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
    text-wrap:balance !important;
  }

  .dmxPricing .dmxEyebrow,
  .dmxPricing .dmxBadge,
  .dmxPricing .dmxPill{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .dmxPricing .dmxBilling,
  .dmxPricing .dmxBillingToggle,
  .dmxPricing .dmxBillingSwitch,
  .dmxPricing .dmxBillingTabs,
  .dmxPricing .dmxBillingBox{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* Precios: selector mensual/anual siempre centrado */
.dmxPricing .dmxBilling,
.dmxPricing .dmxBillingWrap,
.dmxPricing .dmxBillingRow,
.dmxPricing .dmxBillingControls{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

.dmxPricing .dmxBillingToggle,
.dmxPricing .dmxBillingSwitch,
.dmxPricing .dmxBillingTabs,
.dmxPricing .dmxBillingBox{
  width:fit-content !important;
  max-width:calc(100vw - 36px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  float:none !important;
}

@media (max-width:800px){
  .dmxPricing .dmxBilling,
  .dmxPricing .dmxBillingWrap,
  .dmxPricing .dmxBillingRow,
  .dmxPricing .dmxBillingControls{
    justify-content:center !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* Precios: selector mensual/anual centrado, NO estirado */
.dmxPricing .dmxBillingWrap,
.dmxPricing .dmxBillingRow,
.dmxPricing .dmxBillingControls{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

.dmxPricing .dmxBilling,
.dmxPricing .dmxBillingToggle,
.dmxPricing .dmxBillingSwitch,
.dmxPricing .dmxBillingTabs,
.dmxPricing .dmxBillingBox{
  width:max-content !important;
  max-width:calc(100vw - 36px) !important;
  min-width:0 !important;
  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  align-self:center !important;
  justify-self:center !important;
  flex:0 0 auto !important;
  float:none !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}

/* =========================================================
   PRECIOS RESPONSIVE FINAL
   0-1100px: encabezado centrado, selector centrado, carrusel estable
   ========================================================= */

@media (max-width:800px){

  body:has(.dmxPricing){
    overflow-x:hidden !important;
  }

  .dmxPricing,
  .dmxApp.dmxPricing,
  .dmxApp.dmxPricing.dmxBillingYearly,
  .dmxPricing.dmxBillingYearly{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Contenido superior normal, jamás full-bleed */
  .dmxPricing .container,
  .dmxPricing .dmxContainer,
  .dmxPricing .dmxSection,
  .dmxPricing .dmxWrap{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:clamp(18px,4vw,36px) !important;
    padding-right:clamp(18px,4vw,36px) !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    overflow:visible !important;
  }

  /* Hero siempre ordenado */
  .dmxPricing .dmxHero,
  .dmxPricing .dmxPricingHero,
  .dmxPricing .dmxSectionHead,
  .dmxPricing header:not(.dmxTopbar){
    width:100% !important;
    max-width:780px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  .dmxPricing h1{
    display:block !important;
    width:100% !important;
    max-width:780px !important;
    margin:26px auto 18px !important;
    text-align:center !important;
    text-wrap:balance !important;
  }

  .dmxPricing h1 + p,
  .dmxPricing .dmxHero p,
  .dmxPricing .dmxPricingHero p,
  .dmxPricing .dmxSectionHead p{
    display:block !important;
    width:100% !important;
    max-width:720px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
    text-wrap:balance !important;
  }

  .dmxPricing .dmxEyebrow,
  .dmxPricing .dmxBadge,
  .dmxPricing .dmxPill{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Selector mensual/anual: centrado, NO estirado */
  .dmxPricing .dmxBilling,
  .dmxPricing .dmxBillingWrap,
  .dmxPricing .dmxBillingRow,
  .dmxPricing .dmxBillingControls{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    text-align:center !important;
  }

  .dmxPricing .dmxBilling > *,
  .dmxPricing .dmxBillingWrap > *,
  .dmxPricing .dmxBillingRow > *,
  .dmxPricing .dmxBillingControls > *,
  .dmxPricing .dmxBillingToggle,
  .dmxPricing .dmxBillingSwitch,
  .dmxPricing .dmxBillingTabs,
  .dmxPricing .dmxBillingBox{
    width:max-content !important;
    max-width:calc(100vw - 36px) !important;
    min-width:0 !important;
    flex:0 0 auto !important;
    display:inline-flex !important;
    margin-left:auto !important;
    margin-right:auto !important;
    justify-self:center !important;
    align-self:center !important;
    float:none !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }

  /* Solo el carrusel es full-bleed */
  .dmxPricing .dmxPriceCarouselShell{
    --dmxPlanCardW:clamp(310px,42vw,430px);
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding:0 !important;
    overflow:visible !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }

  .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid,
  .dmxPricing .dmxPriceCarouselShell .dmxPricingGrid,
  .dmxPricing .dmxPriceCarouselShell .dmxPlansGrid,
  .dmxPricing .dmxPriceGrid,
  .dmxPricing .dmxPricingGrid,
  .dmxPricing .dmxPlansGrid{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-template-columns:none !important;
    grid-auto-columns:var(--dmxPlanCardW) !important;
    gap:clamp(24px,6vw,58px) !important;

    width:100vw !important;
    max-width:100vw !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-top:38px !important;
    padding-bottom:24px !important;
    padding-left:calc((100vw - var(--dmxPlanCardW)) / 2) !important;
    padding-right:calc((100vw - var(--dmxPlanCardW)) / 2) !important;

    overflow-x:auto !important;
    overflow-y:visible !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-left:calc((100vw - var(--dmxPlanCardW)) / 2) !important;
    scroll-padding-right:calc((100vw - var(--dmxPlanCardW)) / 2) !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;

    position:relative !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }

  .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid > *,
  .dmxPricing .dmxPriceCarouselShell .dmxPricingGrid > *,
  .dmxPricing .dmxPriceCarouselShell .dmxPlansGrid > *,
  .dmxPricing .dmxPriceGrid > *,
  .dmxPricing .dmxPricingGrid > *,
  .dmxPricing .dmxPlansGrid > *{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    scroll-snap-align:center !important;
    scroll-snap-stop:always !important;
    overflow:visible !important;
  }

  .dmxPricing .dmxPriceGrid::-webkit-scrollbar,
  .dmxPricing .dmxPricingGrid::-webkit-scrollbar,
  .dmxPricing .dmxPlansGrid::-webkit-scrollbar{
    display:none !important;
  }

  .dmxPricing .dmxPriceDots{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    margin:14px auto 6px !important;
  }
}

/* Móvil: tarjetas más tipo galería */
@media (max-width:760px){
  .dmxPricing .dmxPriceCarouselShell{
    --dmxPlanCardW:clamp(255px,66vw,340px);
  }
}

/* PC angosto/tablet con mouse: flechas visibles */
@media (max-width:800px) and (hover:hover) and (pointer:fine){
  .dmxPricing .dmxPriceArrow{
    display:flex !important;
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:60 !important;
  }

  .dmxPricing .dmxPriceArrowPrev{
    left:18px !important;
  }

  .dmxPricing .dmxPriceArrowNext{
    right:18px !important;
  }
}

/* Móviles táctiles: sin flechas */
@media (hover:none), (pointer:coarse){
  .dmxPricing .dmxPriceArrow{
    display:none !important;
  }
}


/* FIX final específico: selector mensual/anual centrado real, sin tocar tarjetas */
.dmxPricing .dmxPricingHead{
  text-align:center !important;
}

.dmxPricing .dmxBillingSwitchWrap{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin:22px auto 0 !important;
  padding:0 !important;
  text-align:center !important;
}

.dmxPricing .dmxBillingSwitchWrap > .dmxBillingSwitch{
  width:auto !important;
  max-width:calc(100vw - 36px) !important;
  min-width:0 !important;
  display:inline-flex !important;
  flex:0 0 auto !important;
  justify-content:center !important;
  align-items:center !important;
  margin:0 auto !important;
  float:none !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}

/* Precios: entre 801px y 900px mantener modo PC, no vertical ni carrusel */
@media (min-width:801px) and (max-width:900px){
  .dmxPricing .dmxPriceCarouselShell{
    width:100% !important;
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:0 !important;
    overflow:visible !important;
  }

  .dmxPricing .dmxPriceGrid,
  .dmxPricing .dmxPricingGrid,
  .dmxPricing .dmxPlansGrid{
    display:grid !important;
    grid-auto-flow:row !important;
    grid-auto-columns:initial !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:22px !important;
    width:100% !important;
    max-width:1180px !important;
    margin:32px auto 0 !important;
    padding:0 !important;
    overflow:visible !important;
    scroll-snap-type:none !important;
    scroll-padding-left:0 !important;
    scroll-padding-right:0 !important;
  }

  .dmxPricing .dmxPriceGrid > *,
  .dmxPricing .dmxPricingGrid > *,
  .dmxPricing .dmxPlansGrid > *{
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    scroll-snap-align:none !important;
  }

  .dmxPricing .dmxPriceDots,
  .dmxPricing .dmxPriceArrow{
    display:none !important;
  }
}

/* Switch mensual/anual: siempre compacto y sin saltos */
.dmxPricing .dmxBillingSwitchWrap{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
}

.dmxPricing .dmxBillingSwitch{
  width:auto !important;
  max-width:calc(100vw - 32px) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  white-space:nowrap !important;
}

.dmxPricing .dmxBillingSwitch span,
.dmxPricing .dmxBillingSwitch label,
.dmxPricing .dmxBillingSwitch b{
  white-space:nowrap !important;
  flex:0 0 auto !important;
}

.dmxPricing .dmxBillingSwitch b{
  display:inline-flex !important;
  align-items:center !important;
  margin-left:5px !important;
}

/* Precios 801-900px: mantener modo PC, pero escalar contenido para que no desborde */
@media (min-width:801px) and (max-width:900px){
  .dmxPricing .dmxPriceGrid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:18px !important;
    max-width:100% !important;
  }

  .dmxPricing .dmxPriceCard{
    padding:24px 22px !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  .dmxPricing .dmxPriceCard h2,
  .dmxPricing .dmxPriceCard h3{
    font-size:clamp(24px, 3.15vw, 31px) !important;
    line-height:1.05 !important;
    word-break:normal !important;
  }

  .dmxPricing .dmxPriceCard .dmxPrice,
  .dmxPricing .dmxPriceCard .dmxPriceAmount,
  .dmxPricing .dmxPriceCard .dmxPlanPrice,
  .dmxPricing .dmxPriceCard strong{
    max-width:100% !important;
  }

  .dmxPricing .dmxPriceCard .dmxPriceMain,
  .dmxPricing .dmxPriceCard .dmxAmount,
  .dmxPricing .dmxPriceCard .dmxPlanAmount,
  .dmxPricing .dmxPriceCard [class*="Amount"],
  .dmxPricing .dmxPriceCard [class*="Price"]{
    font-size:clamp(38px, 6vw, 56px) !important;
    line-height:.95 !important;
    white-space:nowrap !important;
  }

  .dmxPricing .dmxPriceCard .dmxCurrency,
  .dmxPricing .dmxPriceCard .dmxPeriod,
  .dmxPricing .dmxPriceCard small,
  .dmxPricing .dmxPriceCard .dmxAnnualNote{
    font-size:clamp(12px, 1.65vw, 15px) !important;
    line-height:1.2 !important;
  }

  .dmxPricing .dmxPriceCard li,
  .dmxPricing .dmxPriceCard p,
  .dmxPricing .dmxPriceCard .dmxFeature,
  .dmxPricing .dmxPriceCard .dmxPlanFeature{
    font-size:clamp(14px, 1.95vw, 18px) !important;
    line-height:1.24 !important;
  }

  .dmxPricing .dmxPriceCard .dmxBtn,
  .dmxPricing .dmxPriceCard button,
  .dmxPricing .dmxPriceCard a.dmxBtn{
    font-size:clamp(14px, 1.8vw, 17px) !important;
    min-height:48px !important;
    padding-left:14px !important;
    padding-right:14px !important;
    white-space:nowrap !important;
  }

  .dmxPricing .dmxPriceCard .dmxRibbon,
  .dmxPricing .dmxPriceCard .dmxPlanTag,
  .dmxPricing .dmxPriceCard .dmxPopular{
    font-size:clamp(12px, 1.6vw, 15px) !important;
    white-space:nowrap !important;
  }
}


/* Precios: etiquetas superiores visibles y premium azul */
.dmxPricing .dmxPriceCard,
.dmxPricing .dmxPlanCard,
.dmxPricing .dmxPricingCard{
  overflow:visible !important;
}

.dmxPricing .dmxPriceCard .dmxRibbon,
.dmxPricing .dmxPriceCard .dmxPlanTag,
.dmxPricing .dmxPriceCard .dmxPopular,
.dmxPricing .dmxPriceCard [class*="Ribbon"],
.dmxPricing .dmxPriceCard [class*="Tag"],
.dmxPricing .dmxPriceCard [class*="Popular"]{
  white-space:nowrap !important;
  overflow:visible !important;
  max-width:none !important;
  z-index:5 !important;
}

.dmxPricing .dmxPriceCard.premium .dmxRibbon,
.dmxPricing .dmxPriceCard.premium .dmxPlanTag,
.dmxPricing .dmxPriceCard.premium .dmxPopular,
.dmxPricing .dmxPriceCard.premium [class*="Ribbon"],
.dmxPricing .dmxPriceCard.premium [class*="Tag"],
.dmxPricing .dmxPriceCard.premium [class*="Popular"]{
  background:var(--dmx-blue) !important;
  color:#fff !important;
}

@media (min-width:801px) and (max-width:900px){
  .dmxPricing .dmxPriceGrid,
  .dmxPricing .dmxPricingGrid,
  .dmxPricing .dmxPlansGrid{
    padding-top:44px !important;
  }

  .dmxPricing .dmxPriceCard,
  .dmxPricing .dmxPlanCard,
  .dmxPricing .dmxPricingCard{
    padding-top:28px !important;
    overflow:visible !important;
  }

  .dmxPricing .dmxPriceCard .dmxRibbon,
  .dmxPricing .dmxPriceCard .dmxPlanTag,
  .dmxPricing .dmxPriceCard .dmxPopular,
  .dmxPricing .dmxPriceCard [class*="Ribbon"],
  .dmxPricing .dmxPriceCard [class*="Tag"],
  .dmxPricing .dmxPriceCard [class*="Popular"]{
    font-size:13px !important;
    line-height:1 !important;
    min-height:34px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

/* Precios móvil: reducir separación entre selector mensual/anual y tarjetas */
@media (max-width:800px){
  .dmxPricing .dmxBillingSwitchWrap{
    margin-top:20px !important;
    margin-bottom:0 !important;
  }

  .dmxPricing .dmxPriceCarouselShell{
    margin-top:18px !important;
  }

  .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid,
  .dmxPricing .dmxPriceCarouselShell .dmxPricingGrid,
  .dmxPricing .dmxPriceCarouselShell .dmxPlansGrid,
  .dmxPricing .dmxPriceGrid,
  .dmxPricing .dmxPricingGrid,
  .dmxPricing .dmxPlansGrid{
    margin-top:0 !important;
    padding-top:26px !important;
  }
}

/* Precios: corregir separación entre selector mensual/anual y tarjetas desde 900px hacia abajo */
@media (max-width:900px){
  .dmxPricing .dmxBillingSwitchWrap{
    margin-top:18px !important;
    margin-bottom:0 !important;
  }

  .dmxPricing .dmxPriceCarouselShell{
    margin-top:18px !important;
  }

  .dmxPricing .dmxPriceGrid,
  .dmxPricing .dmxPricingGrid,
  .dmxPricing .dmxPlansGrid{
    margin-top:0 !important;
  }
}

/* 801-900px: modo PC compacto, sin espacio excesivo */
@media (min-width:801px) and (max-width:900px){
  .dmxPricing .dmxPriceGrid,
  .dmxPricing .dmxPricingGrid,
  .dmxPricing .dmxPlansGrid{
    padding-top:34px !important;
  }
}

/* 0-800px: carrusel móvil compacto */
@media (max-width:800px){
  .dmxPricing .dmxPriceGrid,
  .dmxPricing .dmxPricingGrid,
  .dmxPricing .dmxPlansGrid{
    padding-top:24px !important;
  }
}

/* Precios <=900px: separación switch/tarjetas igualada a modo PC */
@media (max-width:900px){
  .dmxPricing .dmxPricingHead{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  .dmxPricing .dmxBillingSwitchWrap{
    margin-top:22px !important;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  .dmxPricing .dmxBillingSwitch{
    margin-bottom:0 !important;
  }

  .dmxPricing .dmxPricingHead + .dmxPriceCarouselShell,
  .dmxPricing .dmxPricingHead + .dmxPriceGrid,
  .dmxPricing .dmxPriceCarouselShell{
    margin-top:34px !important;
  }

  .dmxPricing .dmxPriceGrid,
  .dmxPricing .dmxPricingGrid,
  .dmxPricing .dmxPlansGrid,
  .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid,
  .dmxPricing .dmxPriceCarouselShell .dmxPricingGrid,
  .dmxPricing .dmxPriceCarouselShell .dmxPlansGrid{
    margin-top:0 !important;
    padding-top:30px !important;
  }
}

/* Móvil carrusel: mantener espacio compacto sin romper etiquetas */
@media (max-width:800px){
  .dmxPricing .dmxPricingHead + .dmxPriceCarouselShell,
  .dmxPricing .dmxPriceCarouselShell{
    margin-top:26px !important;
  }

  .dmxPricing .dmxPriceGrid,
  .dmxPricing .dmxPricingGrid,
  .dmxPricing .dmxPlansGrid,
  .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid,
  .dmxPricing .dmxPriceCarouselShell .dmxPricingGrid,
  .dmxPricing .dmxPriceCarouselShell .dmxPlansGrid{
    padding-top:28px !important;
  }
}

/* Precios <=900px: eliminar margen extra generado por dmxPriceCarouselShell */
@media (max-width:900px){
  .dmxPricing .dmxPricingHead + .dmxPriceCarouselShell,
  .dmxPricing .dmxPriceCarouselShell{
    margin-top:0 !important;
  }

  .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid,
  .dmxPricing .dmxPriceCarouselShell .dmxPricingGrid,
  .dmxPricing .dmxPriceCarouselShell .dmxPlansGrid{
    padding-top:26px !important;
  }
}

/* Precios: botón info anual siempre circular y estable */
.dmxPricing .dmxAnnualInfo,
.dmxPricing .dmxPriceCard .dmxAnnualInfo,
.dmxPricing .dmxPriceCard button.dmxAnnualInfo{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  min-height:28px !important;
  max-width:28px !important;
  max-height:28px !important;
  padding:0 !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 28px !important;
  border:1px solid #cbd5e1 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#667085 !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:900 !important;
  box-shadow:none !important;
  white-space:nowrap !important;
}

/* 801-900px: anula la regla genérica de botones dentro de tarjetas */
@media (min-width:801px) and (max-width:900px){
  .dmxPricing .dmxPriceCard button.dmxAnnualInfo{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;
    padding:0 !important;
    font-size:14px !important;
    border-radius:999px !important;
  }
}

/* Precios: info anual solo como ícono Font Awesome, sin borde extra */
.dmxPricing .dmxAnnualInfo,
.dmxPricing .dmxPriceCard .dmxAnnualInfo,
.dmxPricing .dmxPriceCard button.dmxAnnualInfo{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  min-height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
  padding:0 !important;
  margin:0 0 0 6px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 20px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#7b8798 !important;
  line-height:1 !important;
}

.dmxPricing .dmxAnnualInfo i{
  font-size:18px !important;
  line-height:1 !important;
  display:block !important;
}

/* Precios: subtítulo responsivo proporcional al H1 */
.dmxPricing .dmxPricingHead > p{
  font-size:clamp(18px, 2.05vw, 25px) !important;
  line-height:1.32 !important;
  max-width:860px !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media (max-width:800px){
  .dmxPricing .dmxPricingHead > p{
    font-size:clamp(17px, 3.35vw, 22px) !important;
    line-height:1.34 !important;
    max-width:92vw !important;
  }
}

@media (max-width:520px){
  .dmxPricing .dmxPricingHead > p{
    font-size:clamp(16px, 4.15vw, 19px) !important;
    line-height:1.36 !important;
  }
}




/* Precios: H1 y subtítulo fluidos, sin JS */
.dmxPricing .dmxPricingHead{
  max-width:min(1180px, calc(100vw - 36px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

.dmxPricing .dmxPricingHead > h1{
  font-size:clamp(24px, 5.55vw, 88px) !important;
  line-height:.98 !important;
  letter-spacing:-.055em !important;
  white-space:nowrap !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.dmxPricing .dmxPricingHead > p{
  font-size:clamp(15px, 2.05vw, 30px) !important;
  line-height:1.28 !important;
  max-width:min(1080px, calc(100vw - 36px)) !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media (max-width:520px){
  .dmxPricing .dmxPricingHead > h1{
    font-size:clamp(21px, 6.25vw, 28px) !important;
  }

  .dmxPricing .dmxPricingHead > p{
    font-size:clamp(13px, 3.55vw, 16px) !important;
    line-height:1.28 !important;
  }
}


/* Desarrollo: etapas con puntaje visible */
.dmxStageDot{
  position:relative !important;
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1px !important;
  line-height:1 !important;
  overflow:visible !important;
}

.dmxStageDot .dmxStageNum{
  display:block !important;
  font-weight:950 !important;
  font-size:1.05em !important;
  line-height:1 !important;
}

.dmxStageDot .dmxStageScore{
  display:block !important;
  margin-top:3px !important;
  font-size:.42em !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:.015em !important;
  opacity:.98 !important;
  white-space:nowrap !important;
}

.dmxStageDot .dmxStageCheck{
  position:absolute !important;
  top:-6px !important;
  right:-6px !important;
  width:21px !important;
  height:21px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
  color:var(--dmx-green) !important;
  box-shadow:0 6px 14px rgba(16,24,40,.18) !important;
  font-size:12px !important;
  line-height:1 !important;
}

.dmxStageDot.dmxStageScore10{
  background:var(--dmx-green) !important;
  color:#fff !important;
  border-bottom-color:var(--dmx-green2) !important;
}

.dmxStageDot.dmxStageScore9{
  background:var(--dmx-blue) !important;
  color:#fff !important;
  border-bottom-color:#0b83bd !important;
}

.dmxStageDot.dmxStageScore8{
  background:linear-gradient(180deg,#ffd95a 0%, #ffca28 100%) !important;
  color:#5c3b00 !important;
  border-bottom-color:#d79a00 !important;
}

.dmxStageDot.dmxStageScore7{
  background:#f97316 !important;
  color:#fff !important;
  border-bottom-color:#b45309 !important;
}

.dmxStageDot.dmxStageScoreLow{
  background:#ef4444 !important;
  color:#fff !important;
  border-bottom-color:#b91c1c !important;
}
/* Desarrollo: puntaje de etapas más legible */
.dmxStageDot{
  gap:3px !important;
}

.dmxStageDot .dmxStageNum{
  font-size:.95em !important;
}

.dmxStageDot .dmxStageScore{
  font-size:.58em !important;
  margin-top:2px !important;
  letter-spacing:.01em !important;
}

@media (max-width:760px){
  .dmxStageDot .dmxStageNum{
    font-size:.9em !important;
  }

  .dmxStageDot .dmxStageScore{
    font-size:.62em !important;
    margin-top:2px !important;
  }

  .dmxStageDot .dmxStageCheck{
    width:19px !important;
    height:19px !important;
    font-size:11px !important;
    top:-5px !important;
    right:-5px !important;
  }
}
/* Desarrollo: puntaje de etapas más legible */
.dmxStageDot{
  gap:3px !important;
}

.dmxStageDot .dmxStageNum{
  font-size:.95em !important;
}

.dmxStageDot .dmxStageScore{
  font-size:.58em !important;
  margin-top:2px !important;
  letter-spacing:.01em !important;
}

@media (max-width:760px){
  .dmxStageDot .dmxStageNum{
    font-size:.9em !important;
  }

  .dmxStageDot .dmxStageScore{
    font-size:.62em !important;
    margin-top:2px !important;
  }

  .dmxStageDot .dmxStageCheck{
    width:19px !important;
    height:19px !important;
    font-size:11px !important;
    top:-5px !important;
    right:-5px !important;
  }
}

/* =========================================================
   FIX GLOBAL: botones legibles en claro/oscuro y deshabilitados
   ========================================================= */

/* Botones deshabilitados: nunca texto blanco sobre fondo blanco */
button:disabled:not(.dmxPriceArrow):not(.dmxAnnualInfo),
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
.btn:disabled,
.btn.disabled,
.dmxBtn:disabled,
.dmxBtn.disabled,
.dmxPayOwn:disabled,
.dmxPayDisabled,
.dmxDodoPayButton:disabled,
.authBtn:disabled{
  opacity:1 !important;
  filter:none !important;
  background:#e2e8f0 !important;
  color:#475467 !important;
  border-color:#cbd5e1 !important;
  border-bottom-color:#b8c0cc !important;
  text-shadow:none !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
}

button:disabled:not(.dmxPriceArrow):not(.dmxAnnualInfo) *,
input[type="submit"]:disabled *,
input[type="button"]:disabled *,
input[type="reset"]:disabled *,
.btn:disabled *,
.btn.disabled *,
.dmxBtn:disabled *,
.dmxBtn.disabled *,
.dmxPayOwn:disabled *,
.dmxPayDisabled *,
.dmxDodoPayButton:disabled *,
.authBtn:disabled *{
  color:inherit !important;
  opacity:1 !important;
  filter:none !important;
}

/* Modo oscuro: disabled legible */
html[data-theme="dark"] button:disabled:not(.dmxPriceArrow):not(.dmxAnnualInfo),
html[data-theme="dark"] input[type="submit"]:disabled,
html[data-theme="dark"] input[type="button"]:disabled,
html[data-theme="dark"] input[type="reset"]:disabled,
html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] .btn.disabled,
html[data-theme="dark"] .dmxBtn:disabled,
html[data-theme="dark"] .dmxBtn.disabled,
html[data-theme="dark"] .dmxPayOwn:disabled,
html[data-theme="dark"] .dmxPayDisabled,
html[data-theme="dark"] .dmxDodoPayButton:disabled,
html[data-theme="dark"] .authBtn:disabled{
  background:rgba(148,163,184,.18) !important;
  color:#cbd5e1 !important;
  border:1px solid rgba(203,213,225,.24) !important;
  border-bottom:5px solid rgba(71,85,105,.75) !important;
  box-shadow:none !important;
}

/* Botones blancos/neutral en modo oscuro: texto oscuro siempre visible */
html[data-theme="dark"] a.btn:not(.primary):not(.danger):not(:disabled):not(.disabled),
html[data-theme="dark"] button.btn:not(.primary):not(.danger):not(:disabled):not(.disabled),
html[data-theme="dark"] a.dmxBtn:not(.dmxBtnPrimary):not(.dmxBtnBlue):not(.dmxBtnDanger):not(.dmxLockedBtn):not(:disabled):not(.disabled),
html[data-theme="dark"] button.dmxBtn:not(.dmxBtnPrimary):not(.dmxBtnBlue):not(.dmxBtnDanger):not(.dmxLockedBtn):not(:disabled):not(.disabled),
html[data-theme="dark"] .dmxPriceCard:not(.featured):not(.premium) .dmxBtn:not(:disabled):not(.disabled):not(.dmxPayDisabled){
  background:#ffffff !important;
  color:#101828 !important;
  border-color:#e5e7eb !important;
  text-shadow:none !important;
}

html[data-theme="dark"] a.btn:not(.primary):not(.danger):not(:disabled):not(.disabled) *,
html[data-theme="dark"] button.btn:not(.primary):not(.danger):not(:disabled):not(.disabled) *,
html[data-theme="dark"] a.dmxBtn:not(.dmxBtnPrimary):not(.dmxBtnBlue):not(.dmxBtnDanger):not(.dmxLockedBtn):not(:disabled):not(.disabled) *,
html[data-theme="dark"] button.dmxBtn:not(.dmxBtnPrimary):not(.dmxBtnBlue):not(.dmxBtnDanger):not(.dmxLockedBtn):not(:disabled):not(.disabled) *,
html[data-theme="dark"] .dmxPriceCard:not(.featured):not(.premium) .dmxBtn:not(:disabled):not(.disabled):not(.dmxPayDisabled) *{
  color:inherit !important;
  opacity:1 !important;
}

/* Botones principales verdes/azules: texto blanco garantizado */
.dmxBtnPrimary,
.dmxBtnBlue,
.dmxBtnEnter,
.dmxBtnReview,
.dmxPayOwnSubscribe,
.dmxDodoDirectButton,
.dmxStatsPlansBtn,
.dmxRestartPlansBtn,
button.dmxRestartPlansBtn,
.btn.primary.dmxRestartPlansBtn,
.dmxMission .dmxBtnEnter,
.dmxMission .dmxBtnReview{
  color:#fff !important;
  text-shadow:none !important;
}

.dmxBtnPrimary *,
.dmxBtnBlue *,
.dmxBtnEnter *,
.dmxBtnReview *,
.dmxPayOwnSubscribe *,
.dmxDodoDirectButton *,
.dmxStatsPlansBtn *,
.dmxRestartPlansBtn *,
button.dmxRestartPlansBtn *,
.btn.primary.dmxRestartPlansBtn *,
.dmxMission .dmxBtnEnter *,
.dmxMission .dmxBtnReview *{
  color:inherit !important;
  opacity:1 !important;
}

/* =========================================================
   FIX GLOBAL: botones legibles en claro/oscuro y deshabilitados
   ========================================================= */

/* Botones deshabilitados: nunca texto blanco sobre fondo blanco */
button:disabled:not(.dmxPriceArrow):not(.dmxAnnualInfo),
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
.btn:disabled,
.btn.disabled,
.dmxBtn:disabled,
.dmxBtn.disabled,
.dmxPayOwn:disabled,
.dmxPayDisabled,
.dmxDodoPayButton:disabled,
.authBtn:disabled{
  opacity:1 !important;
  filter:none !important;
  background:#e2e8f0 !important;
  color:#475467 !important;
  border-color:#cbd5e1 !important;
  border-bottom-color:#b8c0cc !important;
  text-shadow:none !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
}

button:disabled:not(.dmxPriceArrow):not(.dmxAnnualInfo) *,
input[type="submit"]:disabled *,
input[type="button"]:disabled *,
input[type="reset"]:disabled *,
.btn:disabled *,
.btn.disabled *,
.dmxBtn:disabled *,
.dmxBtn.disabled *,
.dmxPayOwn:disabled *,
.dmxPayDisabled *,
.dmxDodoPayButton:disabled *,
.authBtn:disabled *{
  color:inherit !important;
  opacity:1 !important;
  filter:none !important;
}

/* Modo oscuro: disabled legible */
html[data-theme="dark"] button:disabled:not(.dmxPriceArrow):not(.dmxAnnualInfo),
html[data-theme="dark"] input[type="submit"]:disabled,
html[data-theme="dark"] input[type="button"]:disabled,
html[data-theme="dark"] input[type="reset"]:disabled,
html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] .btn.disabled,
html[data-theme="dark"] .dmxBtn:disabled,
html[data-theme="dark"] .dmxBtn.disabled,
html[data-theme="dark"] .dmxPayOwn:disabled,
html[data-theme="dark"] .dmxPayDisabled,
html[data-theme="dark"] .dmxDodoPayButton:disabled,
html[data-theme="dark"] .authBtn:disabled{
  background:rgba(148,163,184,.18) !important;
  color:#cbd5e1 !important;
  border:1px solid rgba(203,213,225,.24) !important;
  border-bottom:5px solid rgba(71,85,105,.75) !important;
  box-shadow:none !important;
}

/* Botones blancos/neutral en modo oscuro: texto oscuro siempre visible */
html[data-theme="dark"] a.btn:not(.primary):not(.danger):not(:disabled):not(.disabled),
html[data-theme="dark"] button.btn:not(.primary):not(.danger):not(:disabled):not(.disabled),
html[data-theme="dark"] a.dmxBtn:not(.dmxBtnPrimary):not(.dmxBtnBlue):not(.dmxBtnDanger):not(.dmxLockedBtn):not(:disabled):not(.disabled),
html[data-theme="dark"] button.dmxBtn:not(.dmxBtnPrimary):not(.dmxBtnBlue):not(.dmxBtnDanger):not(.dmxLockedBtn):not(:disabled):not(.disabled),
html[data-theme="dark"] .dmxPriceCard:not(.featured):not(.premium) .dmxBtn:not(:disabled):not(.disabled):not(.dmxPayDisabled){
  background:#ffffff !important;
  color:#101828 !important;
  border-color:#e5e7eb !important;
  text-shadow:none !important;
}

html[data-theme="dark"] a.btn:not(.primary):not(.danger):not(:disabled):not(.disabled) *,
html[data-theme="dark"] button.btn:not(.primary):not(.danger):not(:disabled):not(.disabled) *,
html[data-theme="dark"] a.dmxBtn:not(.dmxBtnPrimary):not(.dmxBtnBlue):not(.dmxBtnDanger):not(.dmxLockedBtn):not(:disabled):not(.disabled) *,
html[data-theme="dark"] button.dmxBtn:not(.dmxBtnPrimary):not(.dmxBtnBlue):not(.dmxBtnDanger):not(.dmxLockedBtn):not(:disabled):not(.disabled) *,
html[data-theme="dark"] .dmxPriceCard:not(.featured):not(.premium) .dmxBtn:not(:disabled):not(.disabled):not(.dmxPayDisabled) *{
  color:inherit !important;
  opacity:1 !important;
}

/* Botones principales verdes/azules: texto blanco garantizado */
.dmxBtnPrimary,
.dmxBtnBlue,
.dmxBtnEnter,
.dmxBtnReview,
.dmxPayOwnSubscribe,
.dmxDodoDirectButton,
.dmxStatsPlansBtn,
.dmxRestartPlansBtn,
button.dmxRestartPlansBtn,
.btn.primary.dmxRestartPlansBtn,
.dmxMission .dmxBtnEnter,
.dmxMission .dmxBtnReview{
  color:#fff !important;
  text-shadow:none !important;
}

.dmxBtnPrimary *,
.dmxBtnBlue *,
.dmxBtnEnter *,
.dmxBtnReview *,
.dmxPayOwnSubscribe *,
.dmxDodoDirectButton *,
.dmxStatsPlansBtn *,
.dmxRestartPlansBtn *,
button.dmxRestartPlansBtn *,
.btn.primary.dmxRestartPlansBtn *,
.dmxMission .dmxBtnEnter *,
.dmxMission .dmxBtnReview *{
  color:inherit !important;
  opacity:1 !important;
}

/* FIX GLOBAL: Font Awesome siempre centrado dentro de su caja */
i.fa-solid,
i.fa-regular,
i.fa-brands,
i[class^="fa-"],
i[class*=" fa-"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1 !important;
  font-style:normal !important;
  vertical-align:middle !important;
}

i.fa-solid::before,
i.fa-regular::before,
i.fa-brands::before,
i[class^="fa-"]::before,
i[class*=" fa-"]::before{
  display:block !important;
  line-height:1 !important;
  margin:0 auto !important;
  text-align:center !important;
}

/* Cajas de íconos con fondo: evitar símbolos pegados arriba/izquierda */
.dmxAccountCardTop > i,
.dmxTileIcon > i,
.dmxHeroIcon > i,
.dmxFeedbackIcon > i,
.dmxResultIcon > i,
.dmxSuccessIcon > i,
.statIcon > i,
.fbIcon > i,
.authMark > i,
.gIcon > i,
.resultIcon > i{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* FIX GLOBAL: centrar Font Awesome dentro de cajas cuadradas */
.dmxAccountCardTop > i,
.dmxTileIcon > i,
.dmxHeroIcon > i,
.dmxFeedbackIcon > i,
.dmxResultIcon > i,
.dmxSuccessIcon > i,
.statIcon > i,
.fbIcon > i,
.authMark > i,
.gIcon > i,
.resultIcon > i{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1 !important;
  overflow:hidden !important;
}

.dmxAccountCardTop > i::before,
.dmxTileIcon > i::before,
.dmxHeroIcon > i::before,
.dmxFeedbackIcon > i::before,
.dmxResultIcon > i::before,
.dmxSuccessIcon > i::before,
.statIcon > i::before,
.fbIcon > i::before,
.authMark > i::before,
.gIcon > i::before,
.resultIcon > i::before{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  line-height:1 !important;
  text-align:center !important;
  transform:none !important;
}

/* Desarrollo: símbolo visible dentro del globo de resultado */
.dmxResult .dmxResultIcon > i,
.dmxResult.pass .dmxResultIcon > i,
.dmxResult.fail .dmxResultIcon > i{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  color:#fff !important;
  font-size:clamp(34px, 3.2vw, 58px) !important;
  line-height:1 !important;
  opacity:1 !important;
  overflow:visible !important;
}

.dmxResult .dmxResultIcon > i::before,
.dmxResult.pass .dmxResultIcon > i::before,
.dmxResult.fail .dmxResultIcon > i::before{
  position:static !important;
  inset:auto !important;
  width:auto !important;
  height:auto !important;
  display:block !important;
  margin:0 !important;
  line-height:1 !important;
  transform:none !important;
}

.dmxResult.pass .dmxResultIcon > i{
  color:#fff !important;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.22)) !important;
}

/* Feedback Correcto/Incorrecto: mostrar Font Awesome centrado */
.dmxFeedback .dmxFeedbackIcon,
.dmxFeedbackIcon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}

.dmxFeedback .dmxFeedbackIcon > i,
.dmxFeedbackIcon > i{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  color:#fff !important;
  font-size:clamp(22px, 2.1vw, 34px) !important;
  line-height:1 !important;
  opacity:1 !important;
  margin:0 !important;
  transform:none !important;
}

.dmxFeedback .dmxFeedbackIcon > i::before,
.dmxFeedbackIcon > i::before{
  position:static !important;
  inset:auto !important;
  width:auto !important;
  height:auto !important;
  display:block !important;
  margin:0 !important;
  line-height:1 !important;
  transform:none !important;
}

/* Topbar en /desarrollo/: ocultar solo bajo 400px */
@media (max-width: 379.98px){
  body.dmxDevelopmentQaPage .topbar{
    display:none!important;
  }
}

@media (min-width: 380px){
  body.dmxDevelopmentQaPage .topbar{
    display:flex!important;
  }
}


/* Precios: lista de beneficios más compacta */
.dmxPricing .dmxPriceCard .dmxPlanList{
  gap:6px!important;
}

.dmxPricing .dmxPriceCard .dmxPlanList li{
  line-height:1.15!important;
  column-gap:7px!important;
}


/* Precios: evitar que beneficios se estiren por altura de tarjeta */
.dmxPricing .dmxPriceCard .dmxPlanList{
  flex:0 0 auto!important;
  align-content:start!important;
  justify-content:start!important;
  gap:6px!important;
  margin-top:14px!important;
}

.dmxPricing .dmxPriceCard .dmxPlanList li{
  line-height:1.15!important;
  min-height:0!important;
}


/* Precios móvil: beneficios aún más compactos */
@media (max-width: 680px){
  .dmxPricing .dmxPriceCard .dmxPlanList{
    gap:3px!important;
    margin-top:10px!important;
  }

  .dmxPricing .dmxPriceCard .dmxPlanList li{
    line-height:1.08!important;
    column-gap:6px!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
}


/* Precios móvil: ocultar subtítulo principal */
@media (max-width: 680px){
  .dmxPricing .dmxPricingHead > p{
    display:none!important;
  }
}


/* Mobile topbar autohide visual START */
@media (max-width: 680px){
  body.dmxTopbarAutoHideEnabled .topbar{
    transition:transform .22s ease, opacity .18s ease!important;
    will-change:transform, opacity;
  }

  body.dmxTopbarAutoHideEnabled.dmxTopbarHidden .topbar{
    transform:translateY(calc(-100% - 14px))!important;
    opacity:0!important;
    pointer-events:none!important;
  }
}
/* Mobile topbar autohide visual END */
/* =========================================================
   NIVELES HEADER NORMAL FINAL
   Título controlado y botones con estructura normal tipo Comenzar/Continuar.
   ========================================================= */
.dmxMap .dmxMapHead{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:24px !important;
}

.dmxMap .dmxMapHead h1{
  font-size:clamp(44px,5.4vw,74px) !important;
  line-height:.96 !important;
  letter-spacing:-.065em !important;
  margin:14px 0 0 !important;
}

.dmxMap .dmxMapHeadActions{
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
  min-width:300px !important;
  max-width:340px !important;
  align-self:center !important;
}

.dmxMap .dmxMapHeadActions .dmxMapHeadBtn{
  width:100% !important;
  min-height:56px !important;
  height:auto !important;
  padding:15px 22px !important;
  border-radius:18px !important;
  border:0 !important;
  border-bottom-width:5px !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  white-space:nowrap !important;
}

.dmxMap .dmxMapHeadActions .dmxMapHeadBtn i,
.dmxMap .dmxMapHeadActions .dmxMapHeadBtn span{
  font-size:inherit !important;
  line-height:inherit !important;
}

@media(max-width:900px){
  .dmxMap .dmxMapHead{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .dmxMap .dmxMapHead h1{
    font-size:clamp(42px,10.5vw,62px) !important;
    margin:12px 0 0 !important;
  }

  .dmxMap .dmxMapHeadActions{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .dmxMap .dmxMapHeadActions .dmxMapHeadBtn{
    min-height:54px !important;
    padding:14px 12px !important;
    border-radius:16px !important;
    border-bottom-width:5px !important;
    font-size:15px !important;
    gap:8px !important;
  }
}

@media(max-width:420px){
  .dmxMap .dmxMapHeadActions{
    gap:10px !important;
  }

  .dmxMap .dmxMapHeadActions .dmxMapHeadBtn{
    min-height:50px !important;
    padding:12px 8px !important;
    border-radius:15px !important;
    font-size:13px !important;
    gap:6px !important;
  }
}

/* =========================================================
   NIVELES HEADER BOTONES 2 COLUMNAS SIEMPRE
   Ver avance y Modo Práctica siempre uno al lado del otro.
   ========================================================= */
@media(max-width:900px){
  .dmxMap .dmxMapHeadActions{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .dmxMap .dmxMapHeadActions .dmxMapHeadBtn{
    width:100% !important;
    min-width:0 !important;
    white-space:nowrap !important;
    justify-content:center !important;
  }
}

@media(max-width:420px){
  .dmxMap .dmxMapHeadActions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .dmxMap .dmxMapHeadActions .dmxMapHeadBtn{
    font-size:12px !important;
    padding-left:6px !important;
    padding-right:6px !important;
    gap:5px !important;
  }
}

/* =========================================================
   NIVELES HEADER DESKTOP 2 COLUMNAS DERECHA
   Solo escritorio: botones pegados a la derecha y en 2 columnas.
   No modifica móvil.
   ========================================================= */
@media(min-width:901px){
  .dmxMap .dmxMapHeadActions{
    justify-self:end !important;
    align-self:center !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
    width:min(720px,46vw) !important;
    min-width:560px !important;
    max-width:720px !important;
  }

  .dmxMap .dmxMapHeadActions .dmxMapHeadBtn{
    width:100% !important;
    min-width:0 !important;
    white-space:nowrap !important;
    justify-content:center !important;
  }
}

/* =========================================================
   ETAPAS HEADER IGUAL A NIVELES
   Hero de /nivel/{n}/etapas/ con mismo orden visual que /niveles/.
   ========================================================= */
.dmxStagePicker .dmxStagePickerHeadHero{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:24px !important;
  margin-bottom:30px !important;
}

.dmxStagePicker .dmxStagePickerHeadHero h1{
  font-size:clamp(44px,5.4vw,74px) !important;
  line-height:.96 !important;
  letter-spacing:-.065em !important;
  margin:14px 0 0 !important;
}

.dmxStagePicker .dmxStagePickerHeadHero p{
  display:none !important;
}

.dmxStagePicker .dmxStagePickerHeadActions{
  justify-self:end !important;
  align-self:center !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
  width:min(340px,28vw) !important;
  min-width:260px !important;
  max-width:340px !important;
}

.dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{
  width:100% !important;
  min-height:56px !important;
  height:auto !important;
  padding:15px 22px !important;
  border-radius:18px !important;
  border:0 !important;
  border-bottom-width:5px !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  white-space:nowrap !important;
}

.dmxStagePicker .dmxStagePickerBack{
  display:none !important;
}

@media(max-width:900px){
  .dmxStagePicker .dmxStagePickerHeadHero{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .dmxStagePicker .dmxStagePickerHeadHero h1{
    font-size:clamp(42px,10.5vw,62px) !important;
    margin:12px 0 0 !important;
  }

  .dmxStagePicker .dmxStagePickerHeadActions{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    grid-template-columns:1fr !important;
  }

  .dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{
    min-height:54px !important;
    padding:14px 12px !important;
    border-radius:16px !important;
    border-bottom-width:5px !important;
    font-size:15px !important;
    gap:8px !important;
  }
}

/* =========================================================
   ETAPAS HEADER FINAL CON ACCIONES
   Igual a /niveles/: Volver icono izquierda + acciones derecha en 2 columnas.
   ========================================================= */
.dmxStagePicker .dmxStagePickerHeadHero{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:20px !important;
  margin-bottom:30px !important;
}

.dmxStagePicker .dmxStagePickerBackIcon{
  width:56px !important;
  height:56px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:18px !important;
  background:#fff !important;
  color:#0f172a !important;
  border:1px solid rgba(148,163,184,.35) !important;
  border-bottom:5px solid rgba(148,163,184,.55) !important;
  text-decoration:none !important;
}

.dmxStagePicker .dmxStagePickerBackIcon i{
  color:inherit !important;
  font-size:18px !important;
}

.dmxStagePicker .dmxStagePickerHeadHero h1{
  font-size:clamp(44px,5.4vw,74px) !important;
  line-height:.96 !important;
  letter-spacing:-.065em !important;
  margin:14px 0 0 !important;
}

.dmxStagePicker .dmxStagePickerHeadActions{
  justify-self:end !important;
  align-self:center !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  width:min(720px,46vw) !important;
  min-width:560px !important;
  max-width:720px !important;
}

.dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{
  width:100% !important;
  min-width:0 !important;
  min-height:56px !important;
  height:auto !important;
  padding:15px 22px !important;
  border-radius:18px !important;
  border:0 !important;
  border-bottom-width:5px !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  white-space:nowrap !important;
}

.dmxStagePicker .dmxStagePickerBack{
  display:none !important;
}

@media(max-width:900px){
  .dmxStagePicker .dmxStagePickerHeadHero{
    grid-template-columns:auto minmax(0,1fr) !important;
    gap:14px !important;
  }

  .dmxStagePicker .dmxStagePickerHeadActions{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .dmxStagePicker .dmxStagePickerHeadHero h1{
    font-size:clamp(42px,10.5vw,62px) !important;
    margin:12px 0 0 !important;
  }

  .dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{
    min-height:54px !important;
    padding:14px 12px !important;
    border-radius:16px !important;
    border-bottom-width:5px !important;
    font-size:15px !important;
    gap:8px !important;
  }
}

@media(max-width:420px){
  .dmxStagePicker .dmxStagePickerBackIcon{
    width:48px !important;
    height:48px !important;
    border-radius:15px !important;
  }

  .dmxStagePicker .dmxStagePickerHeadActions{
    gap:8px !important;
  }

  .dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{
    min-height:50px !important;
    padding:12px 6px !important;
    border-radius:15px !important;
    font-size:12px !important;
    gap:5px !important;
  }
}

/* =========================================================
   ETAPAS HEADER MENU FINAL
   Botón atrás dentro del menú; botones sin ancho calculado en PC.
   ========================================================= */
@media(min-width:901px){
  .dmxStagePicker .dmxStagePickerHeadHero{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:24px !important;
    margin-bottom:30px !important;
  }

  .dmxStagePicker .dmxStagePickerHeadActions{
    justify-self:end !important;
    align-self:center !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:14px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }

  .dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:56px !important;
    height:auto !important;
    padding:15px 24px !important;
    border-radius:18px !important;
    border:0 !important;
    border-bottom-width:5px !important;
    box-shadow:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    font-size:16px !important;
    line-height:1 !important;
    font-weight:1000 !important;
    white-space:nowrap !important;
  }

  .dmxStagePicker .dmxStagePickerBackIcon{
    flex:0 0 56px !important;
    width:56px !important;
    min-width:56px !important;
    height:56px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:18px !important;
    background:#fff !important;
    color:#0f172a !important;
    border:1px solid rgba(148,163,184,.35) !important;
    border-bottom:5px solid rgba(148,163,184,.55) !important;
    text-decoration:none !important;
    box-shadow:none !important;
  }
}

.dmxStagePicker .dmxStagePickerBackIcon i{
  color:inherit !important;
  font-size:18px !important;
}

.dmxStagePicker .dmxStagePickerHeadHero h1{
  font-size:clamp(44px,5.4vw,74px) !important;
  line-height:.96 !important;
  letter-spacing:-.065em !important;
  margin:14px 0 0 !important;
}

.dmxStagePicker .dmxStagePickerBack{
  display:none !important;
}

@media(max-width:900px){
  .dmxStagePicker .dmxStagePickerHeadHero{
    grid-template-columns:1fr !important;
  }

  .dmxStagePicker .dmxStagePickerHeadActions{
    grid-template-columns:auto repeat(2,minmax(0,1fr)) !important;
  }

  .dmxStagePicker .dmxStagePickerBackIcon{
    width:54px !important;
    min-width:54px !important;
    height:54px !important;
    padding:0 !important;
  }
}

/* =========================================================
   NIVELES HEADER MENU AUTO WIDTH PC
   Igual que /etapas/: botones a la derecha, ancho libre según texto.
   En /niveles/ no existe botón atrás.
   ========================================================= */
@media(min-width:901px){
  .dmxMap .dmxMapHeadActions{
    justify-self:end !important;
    align-self:center !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:14px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }

  .dmxMap .dmxMapHeadActions .dmxMapHeadBtn{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:56px !important;
    height:auto !important;
    padding:15px 24px !important;
    border-radius:18px !important;
    border:0 !important;
    border-bottom-width:5px !important;
    box-shadow:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    font-size:16px !important;
    line-height:1 !important;
    font-weight:1000 !important;
    white-space:nowrap !important;
  }
}

/* =========================================================
   ETAPAS ANIMACIONES IGUAL NIVELES
   Usa las mismas animaciones de /niveles/: dmxLevelFadeUp y dmxLevelNodePop.
   ========================================================= */
.dmxStagePickCard{
  animation:dmxLevelFadeUp .52s cubic-bezier(.2,.9,.2,1) both !important;
  will-change:opacity, transform, filter !important;
}

.dmxStagePickCard .dmxStagePickNumber{
  animation:dmxLevelNodePop .48s cubic-bezier(.2,.9,.2,1) both !important;
  will-change:opacity, transform, filter !important;
}

.dmxStagePickCard .dmxStagePickBody h2,
.dmxStagePickCard .dmxStagePickMeta span,
.dmxStagePickCard .dmxStagePickActions,
.dmxStagePickCard .dmxStagePickActionForm,
.dmxStagePickCard > .dmxBtn{
  animation:dmxLevelFadeUp .42s cubic-bezier(.2,.9,.2,1) both !important;
  will-change:opacity, transform, filter !important;
}

.dmxStagePickCard:nth-child(1){animation-delay:.04s !important;}
.dmxStagePickCard:nth-child(2){animation-delay:.10s !important;}
.dmxStagePickCard:nth-child(3){animation-delay:.16s !important;}
.dmxStagePickCard:nth-child(4){animation-delay:.22s !important;}
.dmxStagePickCard:nth-child(5){animation-delay:.28s !important;}
.dmxStagePickCard:nth-child(6){animation-delay:.34s !important;}
.dmxStagePickCard:nth-child(7){animation-delay:.40s !important;}
.dmxStagePickCard:nth-child(8){animation-delay:.46s !important;}
.dmxStagePickCard:nth-child(9){animation-delay:.52s !important;}
.dmxStagePickCard:nth-child(10){animation-delay:.58s !important;}

.dmxStagePickCard:nth-child(1) .dmxStagePickNumber{animation-delay:.10s !important;}
.dmxStagePickCard:nth-child(2) .dmxStagePickNumber{animation-delay:.16s !important;}
.dmxStagePickCard:nth-child(3) .dmxStagePickNumber{animation-delay:.22s !important;}
.dmxStagePickCard:nth-child(4) .dmxStagePickNumber{animation-delay:.28s !important;}
.dmxStagePickCard:nth-child(5) .dmxStagePickNumber{animation-delay:.34s !important;}
.dmxStagePickCard:nth-child(6) .dmxStagePickNumber{animation-delay:.40s !important;}
.dmxStagePickCard:nth-child(7) .dmxStagePickNumber{animation-delay:.46s !important;}
.dmxStagePickCard:nth-child(8) .dmxStagePickNumber{animation-delay:.52s !important;}
.dmxStagePickCard:nth-child(9) .dmxStagePickNumber{animation-delay:.58s !important;}
.dmxStagePickCard:nth-child(10) .dmxStagePickNumber{animation-delay:.64s !important;}

.dmxStagePickCard .dmxStagePickBody h2{animation-delay:.14s !important;}
.dmxStagePickCard .dmxStagePickMeta span{animation-delay:.22s !important;}
.dmxStagePickCard .dmxStagePickActions,
.dmxStagePickCard .dmxStagePickActionForm,
.dmxStagePickCard > .dmxBtn{animation-delay:.28s !important;}

@media(prefers-reduced-motion:reduce){
  .dmxStagePickCard,
  .dmxStagePickCard *,
  .dmxStagePickCard *::before,
  .dmxStagePickCard *::after{
    animation:none !important;
    transition:none !important;
  }
}

/* =========================================================
   NIVELES DIPLOMA DOCUMOTORS
   Tarjeta final refinada: premium, limpia, balanceada y sin etiquetas cuadradas.
   ========================================================= */
.dmxMap .dmxDiplomaMission{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  min-height:190px !important;
  padding:34px 36px !important;
  display:grid !important;
  grid-template-columns:96px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:28px !important;
  border-radius:30px !important;
  border:1px solid rgba(245,158,11,.46) !important;
  background:
    radial-gradient(circle at 8% 18%, rgba(251,191,36,.22), transparent 32%),
    radial-gradient(circle at 82% 10%, rgba(59,130,246,.22), transparent 36%),
    linear-gradient(135deg,#111827 0%,#172554 56%,#020617 100%) !important;
  box-shadow:
    0 22px 60px rgba(15,23,42,.20),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
  color:#fff !important;
}

.dmxMap .dmxDiplomaMission::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.045) 1px,transparent 1px) !important;
  background-size:46px 46px !important;
  opacity:.18 !important;
  transform:none !important;
  animation:none !important;
  filter:none !important;
}

.dmxMap .dmxDiplomaMission::after{
  content:"" !important;
  position:absolute !important;
  inset:-40% auto -40% -35% !important;
  width:44% !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.16),transparent) !important;
  transform:translateX(-120%) skewX(-18deg) !important;
  animation:dmxDiplomaSweep 7s ease-in-out infinite !important;
  opacity:0 !important;
}

@keyframes dmxDiplomaSweep{
  0%,58%{transform:translateX(-120%) skewX(-18deg);opacity:0}
  66%{opacity:.8}
  84%,100%{transform:translateX(420%) skewX(-18deg);opacity:0}
}

.dmxMap .dmxDiplomaMission > *{
  position:relative !important;
  z-index:1 !important;
}

.dmxMap .dmxDiplomaMission .dmxDiplomaNode{
  width:96px !important;
  height:96px !important;
  border-radius:28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(180deg,#fde68a 0%,#f59e0b 100%) !important;
  color:#111827 !important;
  border:0 !important;
  border-bottom:8px solid #b45309 !important;
  box-shadow:
    0 16px 28px rgba(0,0,0,.22),
    0 0 0 9px rgba(251,191,36,.14) !important;
  font-size:34px !important;
}

.dmxMap .dmxDiplomaMission.locked .dmxDiplomaNode{
  background:linear-gradient(180deg,#e2e8f0 0%,#94a3b8 100%) !important;
  color:#334155 !important;
  border-bottom-color:#64748b !important;
  box-shadow:
    0 16px 28px rgba(0,0,0,.18),
    0 0 0 9px rgba(148,163,184,.14) !important;
}

.dmxMap .dmxDiplomaBody{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:12px !important;
}

.dmxMap .dmxDiplomaKicker{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  width:auto !important;
  max-width:max-content !important;
  margin:0 !important;
  padding:8px 13px !important;
  border-radius:999px !important;
  background:rgba(251,191,36,.16) !important;
  border:1px solid rgba(251,191,36,.30) !important;
  color:#fde68a !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:.055em !important;
  text-transform:uppercase !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.dmxMap .dmxDiplomaMission h2{
  margin:0 !important;
  color:#fff !important;
  font-size:34px !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
  font-weight:1000 !important;
}

.dmxMap .dmxDiplomaMission p{
  max-width:780px !important;
  margin:0 !important;
  color:rgba(255,255,255,.78) !important;
  font-size:17px !important;
  line-height:1.45 !important;
  font-weight:750 !important;
}

.dmxMap .dmxDiplomaMission .dmxMissionMeta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:2px !important;
}

.dmxMap .dmxDiplomaMission .dmxMissionMeta span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  width:auto !important;
  margin:0 !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  color:rgba(255,255,255,.88) !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:900 !important;
  box-shadow:none !important;
}

.dmxMap .dmxDiplomaMission .dmxMissionMeta span i{
  color:#fde68a !important;
  font-size:13px !important;
}

.dmxMap .dmxDiplomaMission .dmxDiplomaBtn,
.dmxMap .dmxDiplomaMission .dmxDiplomaLockedBtn{
  justify-self:end !important;
  align-self:center !important;
  min-height:58px !important;
  width:auto !important;
  min-width:188px !important;
  max-width:none !important;
  padding:16px 24px !important;
  border-radius:18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  white-space:nowrap !important;
  font-size:16px !important;
  font-weight:1000 !important;
}

.dmxMap .dmxDiplomaMission .dmxDiplomaLockedBtn{
  background:linear-gradient(180deg,#f8fafc 0%,#e2e8f0 100%) !important;
  color:#475569 !important;
  border:0 !important;
  border-bottom:6px solid #cbd5e1 !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
}

.dmxMap .dmxDiplomaMission.locked{
  opacity:1 !important;
}

.dmxMap .dmxDiplomaMission.locked .dmxDiplomaKicker{
  background:rgba(148,163,184,.13) !important;
  border-color:rgba(226,232,240,.16) !important;
  color:#e2e8f0 !important;
}

.dmxMission:nth-child(11){animation-delay:.64s !important;}
.dmxMission:nth-child(11) .dmxNode{animation-delay:.70s !important;}

@media(max-width:900px){
  .dmxMap .dmxDiplomaMission{
    grid-template-columns:82px minmax(0,1fr) !important;
    gap:20px !important;
    padding:26px 22px !important;
  }

  .dmxMap .dmxDiplomaMission .dmxDiplomaNode{
    width:82px !important;
    height:82px !important;
    border-radius:24px !important;
    font-size:30px !important;
  }

  .dmxMap .dmxDiplomaMission .dmxDiplomaBtn,
  .dmxMap .dmxDiplomaMission .dmxDiplomaLockedBtn{
    grid-column:1 / -1 !important;
    justify-self:stretch !important;
    width:100% !important;
    min-width:0 !important;
  }
}

@media(max-width:560px){
  .dmxMap .dmxDiplomaMission{
    grid-template-columns:1fr !important;
    text-align:left !important;
    padding:24px 18px !important;
    border-radius:26px !important;
  }

  .dmxMap .dmxDiplomaMission .dmxDiplomaNode{
    width:72px !important;
    height:72px !important;
    border-radius:22px !important;
    font-size:26px !important;
  }

  .dmxMap .dmxDiplomaMission h2{
    font-size:28px !important;
  }

  .dmxMap .dmxDiplomaMission p{
    font-size:15px !important;
  }

  .dmxMap .dmxDiplomaMission .dmxMissionMeta{
    gap:7px !important;
  }

  .dmxMap .dmxDiplomaMission .dmxMissionMeta span{
    font-size:11px !important;
    padding:7px 9px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .dmxMap .dmxDiplomaMission::after{
    animation:none !important;
  }
}

/* =========================================================
   NIVELES DIPLOMA DOCUMOTORS MOBILE HEADER ONLY
   En móvil: solo badge+título a la derecha del icono.
   Descripción, etiquetas y botón quedan abajo ocupando todo el ancho.
   ========================================================= */
@media(max-width:560px){
  .dmxMap .dmxDiplomaMission{
    grid-template-columns:82px minmax(0,1fr) !important;
    align-items:center !important;
    gap:12px 16px !important;
    padding:18px 16px !important;
    min-height:0 !important;
  }

  .dmxMap .dmxDiplomaMission .dmxDiplomaNode{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:82px !important;
    height:82px !important;
    border-radius:24px !important;
    font-size:28px !important;
    margin:0 !important;
    align-self:center !important;
  }

  .dmxMap .dmxDiplomaMission .dmxDiplomaBody{
    display:contents !important;
  }

  .dmxMap .dmxDiplomaMission .dmxDiplomaKicker{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:end !important;
    margin:0 !important;
    padding:7px 10px !important;
    font-size:10px !important;
    max-width:max-content !important;
  }

  .dmxMap .dmxDiplomaMission h2{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
    font-size:24px !important;
    line-height:1.03 !important;
    margin:0 !important;
  }

  .dmxMap .dmxDiplomaMission p{
    grid-column:1 / -1 !important;
    grid-row:3 !important;
    font-size:15px !important;
    line-height:1.38 !important;
    max-width:none !important;
    margin:4px 0 0 !important;
  }

  .dmxMap .dmxDiplomaMission .dmxMissionMeta{
    grid-column:1 / -1 !important;
    grid-row:4 !important;
    gap:7px !important;
    margin-top:0 !important;
  }

  .dmxMap .dmxDiplomaMission .dmxMissionMeta span{
    font-size:11px !important;
    padding:7px 9px !important;
  }

  .dmxMap .dmxDiplomaMission .dmxDiplomaBtn,
  .dmxMap .dmxDiplomaMission .dmxDiplomaLockedBtn{
    grid-column:1 / -1 !important;
    grid-row:5 !important;
    width:100% !important;
    min-width:0 !important;
    margin-top:2px !important;
  }
}

/* =========================================================
   DIPLOMA PROGRESS FLOAT MODAL
   Estadísticas directas y barras animadas para desbloquear diploma.
   ========================================================= */
.dmxDiplomaProgressOverlay{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483100 !important;
  display:grid !important;
  place-items:center !important;
  padding:20px !important;
  background:rgba(2,6,23,.68) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}

.dmxDiplomaProgressOverlay[hidden]{
  display:none !important;
}

.dmxDiplomaProgressCard{
  position:relative !important;
  width:min(560px,100%) !important;
  padding:30px 24px 24px !important;
  border-radius:28px !important;
  overflow:hidden !important;
  color:#fff !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(251,191,36,.30), transparent 36%),
    radial-gradient(circle at 100% 10%, rgba(59,130,246,.24), transparent 42%),
    linear-gradient(135deg,#0f172a 0%,#172554 58%,#020617 100%) !important;
  border:1px solid rgba(251,191,36,.34) !important;
  box-shadow:0 34px 90px rgba(0,0,0,.52) !important;
  animation:dmxDiplomaModalIn .34s cubic-bezier(.2,.9,.2,1) both !important;
}

@keyframes dmxDiplomaModalIn{
  from{opacity:0;transform:translateY(18px) scale(.965);filter:blur(5px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

.dmxDiplomaProgressClose{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  width:40px !important;
  height:40px !important;
  border:0 !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
}

.dmxDiplomaProgressBadge{
  width:max-content !important;
  max-width:100% !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  background:rgba(251,191,36,.15) !important;
  border:1px solid rgba(251,191,36,.28) !important;
  color:#fde68a !important;
  font-size:12px !important;
  font-weight:1000 !important;
  letter-spacing:.045em !important;
  text-transform:uppercase !important;
}

.dmxDiplomaProgressCard h2{
  margin:14px 0 18px !important;
  color:#fff !important;
  font-size:34px !important;
  line-height:1 !important;
  letter-spacing:-.05em !important;
  font-weight:1000 !important;
}

.dmxDiplomaProgressRows{
  display:grid !important;
  gap:12px !important;
}

.dmxDiplomaProgressRow{
  padding:14px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.13) !important;
}

.dmxDiplomaProgressTop{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-bottom:10px !important;
}

.dmxDiplomaProgressTop span{
  color:rgba(255,255,255,.78) !important;
  font-size:13px !important;
  font-weight:900 !important;
}

.dmxDiplomaProgressTop strong{
  color:#fff !important;
  font-size:18px !important;
  font-weight:1000 !important;
  white-space:nowrap !important;
}

.dmxDiplomaMeter{
  height:12px !important;
  border-radius:999px !important;
  background:rgba(15,23,42,.50) !important;
  overflow:hidden !important;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.35) !important;
}

.dmxDiplomaMeter i{
  display:block !important;
  height:100% !important;
  width:calc(var(--p) * 1%) !important;
  min-width:0 !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#38bdf8 0%,#22c55e 55%,#fde047 100%) !important;
  transform-origin:left center !important;
  animation:dmxDiplomaMeterFill .9s cubic-bezier(.2,.9,.2,1) both !important;
}

.dmxDiplomaProgressMain .dmxDiplomaMeter{
  height:16px !important;
}

.dmxDiplomaProgressMain .dmxDiplomaMeter i{
  background:linear-gradient(90deg,#f59e0b 0%,#fde047 45%,#22c55e 100%) !important;
}

@keyframes dmxDiplomaMeterFill{
  from{transform:scaleX(0);filter:brightness(1.25)}
  to{transform:scaleX(1);filter:brightness(1)}
}

@media(max-width:560px){
  .dmxDiplomaProgressOverlay{
    padding:14px !important;
  }

  .dmxDiplomaProgressCard{
    padding:26px 18px 18px !important;
    border-radius:24px !important;
  }

  .dmxDiplomaProgressCard h2{
    font-size:28px !important;
  }

  .dmxDiplomaProgressTop strong{
    font-size:16px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .dmxDiplomaProgressCard,
  .dmxDiplomaMeter i{
    animation:none !important;
  }
}

/* DIPLOMA MODAL REOPEN FIX */
.dmxDiplomaProgressOverlay:not([hidden]){
  display:grid !important;
}
.dmxDiplomaProgressOverlay:not([hidden]) .dmxDiplomaProgressCard{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
.dmxDiplomaProgressOverlay[hidden]{
  display:none !important;
  visibility:hidden !important;
}

/* =========================================================
   PRECIOS FIX /MES /AÑO
   Evita que el intervalo herede el tamaño gigante del precio.
   ========================================================= */
.dmxPricing .dmxPrice{
  display:flex !important;
  align-items:flex-end !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  line-height:.92 !important;
}

.dmxPricing .dmxPrice small{
  display:inline-flex !important;
  align-items:flex-end !important;
  flex:0 0 auto !important;
  width:auto !important;
  max-width:max-content !important;
  margin:0 0 8px 2px !important;
  padding:0 !important;
  font-size:32px !important;
  line-height:1 !important;
  letter-spacing:-.04em !important;
  font-weight:1000 !important;
  color:#667085 !important;
  white-space:nowrap !important;
  transform:none !important;
}

.dmxPricing .dmxPrice > span:nth-of-type(2){
  margin:0 4px 10px 2px !important;
  font-size:22px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:-.02em !important;
}

@media(max-width:760px){
  .dmxPricing .dmxPrice{
    gap:4px !important;
  }

  .dmxPricing .dmxPrice small{
    font-size:28px !important;
    margin-bottom:7px !important;
  }

  .dmxPricing .dmxPrice > span:nth-of-type(2){
    font-size:18px !important;
    margin-bottom:8px !important;
  }
}

@media(max-width:420px){
  .dmxPricing .dmxPrice small{
    font-size:24px !important;
    margin-bottom:6px !important;
  }
}

/* =========================================================
   PRECIOS FIX /MES IGUAL USD
   El intervalo /mes queda del mismo tamaño visual que USD.
   ========================================================= */
.dmxPricing .dmxPrice small{
  font-size:22px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:-.02em !important;
  margin:0 0 10px 2px !important;
  color:#667085 !important;
  white-space:nowrap !important;
}

@media(max-width:760px){
  .dmxPricing .dmxPrice small{
    font-size:18px !important;
    margin-bottom:8px !important;
  }
}

@media(max-width:420px){
  .dmxPricing .dmxPrice small{
    font-size:16px !important;
    margin-bottom:7px !important;
  }
}

/* =========================================================
   DMX PLAN GATE ÚNICO CANÓNICO
   Único diseño para modales de planes: PRO, PREMIUM, práctica, informes y salto.
   ========================================================= */
html.dmxModalOpen,
body.dmxModalOpen{
  overflow:hidden !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal]{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  display:grid !important;
  place-items:center !important;
  padding:24px !important;
  background:rgba(2,6,23,.70) !important;
  backdrop-filter:blur(13px) !important;
  -webkit-backdrop-filter:blur(13px) !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal][hidden]{
  display:none !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateCard{
  position:relative !important;
  width:720px !important;
  max-width:calc(100vw - 48px) !important;
  min-width:0 !important;
  margin:0 auto !important;
  padding:40px 32px 30px !important;
  border-radius:28px !important;
  overflow:hidden !important;
  text-align:center !important;
  color:#fff !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(37,99,235,.35), transparent 42%),
    linear-gradient(135deg,#172554 0%,#1e293b 58%,#111827 100%) !important;
  border:1px solid rgba(226,232,240,.18) !important;
  box-shadow:0 34px 90px rgba(0,0,0,.50) !important;
  transform:none !important;
  opacity:1 !important;
  visibility:visible !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateClose{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  width:40px !important;
  height:40px !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.13) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  cursor:pointer !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateBadge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:auto !important;
  max-width:max-content !important;
  margin:0 auto 20px !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:.035em !important;
  text-transform:uppercase !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal] h2{
  max-width:620px !important;
  margin:0 auto 18px !important;
  color:#fff !important;
  font-size:38px !important;
  line-height:.98 !important;
  letter-spacing:-.06em !important;
  font-weight:1000 !important;
  text-align:center !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal] p{
  max-width:610px !important;
  margin:0 auto 30px !important;
  color:rgba(255,255,255,.86) !important;
  font-size:18px !important;
  line-height:1.38 !important;
  font-weight:750 !important;
  text-align:center !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateBadge strong,
.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateBadge i,
.dmxPlanGateModal[data-dmx-plan-gate-modal] p strong,
.dmxPlanGateModal[data-dmx-plan-gate-modal] p i{
  color:#fff !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateFeatures,
.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGateFeatures{
  display:none !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions{
  width:min(560px,100%) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  align-items:stretch !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions .dmxBtn{
  width:100% !important;
  min-height:58px !important;
  padding:15px 18px !important;
  border-radius:16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  font-size:15px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  white-space:nowrap !important;
  box-shadow:none !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateBack{
  background:#fff !important;
  color:#0f172a !important;
  border:0 !important;
  border-bottom:5px solid #cbd5e1 !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGatePrimary{
  background:#46d900 !important;
  color:#fff !important;
  border:0 !important;
  border-bottom:5px solid #2fa300 !important;
}

@media(max-width:560px){
  .dmxPlanGateModal[data-dmx-plan-gate-modal]{
    padding:14px !important;
  }

  .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateCard{
    width:calc(100vw - 28px) !important;
    max-width:calc(100vw - 28px) !important;
    padding:32px 18px 20px !important;
    border-radius:24px !important;
  }

  .dmxPlanGateModal[data-dmx-plan-gate-modal] h2{
    font-size:30px !important;
    margin-bottom:14px !important;
  }

  .dmxPlanGateModal[data-dmx-plan-gate-modal] p{
    font-size:15px !important;
    line-height:1.36 !important;
    margin-bottom:22px !important;
  }

  .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions .dmxBtn{
    min-height:52px !important;
    padding:12px 8px !important;
    font-size:13px !important;
  }
}

/* =========================================================
   DMX PLAN GATE GRANDE FINAL
   Un solo tamaño grande para todos los modales de planes.
   ========================================================= */
.dmxPlanGateModal[data-dmx-plan-gate-modal]{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  display:grid !important;
  place-items:center !important;
  padding:24px !important;
  background:rgba(2,6,23,.70) !important;
  backdrop-filter:blur(13px) !important;
  -webkit-backdrop-filter:blur(13px) !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal][hidden]{
  display:none !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateCard,
.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGate{
  width:720px !important;
  max-width:calc(100vw - 48px) !important;
  min-width:720px !important;
  padding:40px 32px 30px !important;
  border-radius:28px !important;
  transform:none !important;
  scale:1 !important;
  zoom:1 !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal] h2{
  font-size:38px !important;
  line-height:.98 !important;
  letter-spacing:-.06em !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal] p{
  font-size:18px !important;
  line-height:1.38 !important;
  max-width:610px !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions,
.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGateActions{
  width:min(560px,100%) !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}

@media(max-width:760px){
  .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateCard,
  .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGate{
    width:calc(100vw - 28px) !important;
    min-width:0 !important;
    max-width:calc(100vw - 28px) !important;
    padding:32px 18px 20px !important;
    border-radius:24px !important;
  }

  .dmxPlanGateModal[data-dmx-plan-gate-modal] h2{
    font-size:30px !important;
  }

  .dmxPlanGateModal[data-dmx-plan-gate-modal] p{
    font-size:15px !important;
  }
}

/* =========================================================
   DMX PLAN GATE XL FINAL
   Modal único de planes más grande y protagonista.
   ========================================================= */
@media(min-width:761px){
  .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateCard,
  .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGate{
    width:820px !important;
    min-width:820px !important;
    max-width:calc(100vw - 64px) !important;
    padding:52px 44px 38px !important;
    border-radius:30px !important;
  }

  .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateBadge,
  .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGateBadge{
    margin-bottom:24px !important;
    padding:10px 18px !important;
    font-size:15px !important;
  }

  .dmxPlanGateModal[data-dmx-plan-gate-modal] h2{
    max-width:720px !important;
    margin-bottom:22px !important;
    font-size:48px !important;
    line-height:.98 !important;
    letter-spacing:-.065em !important;
  }

  .dmxPlanGateModal[data-dmx-plan-gate-modal] p{
    max-width:720px !important;
    margin-bottom:36px !important;
    font-size:22px !important;
    line-height:1.38 !important;
  }

  .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions,
  .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGateActions{
    width:min(640px,100%) !important;
    gap:16px !important;
  }

  .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions .dmxBtn,
  .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGateActions .dmxBtn{
    min-height:66px !important;
    border-radius:18px !important;
    font-size:17px !important;
    padding:18px 22px !important;
  }

  .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateClose{
    width:46px !important;
    height:46px !important;
    top:16px !important;
    right:16px !important;
  }
}

/* =========================================================
   PLAN MODALS ICONOS FA UNICODE HEREDAN COLOR FINAL
   No usa fa-rocket/fa-crown en textos; usa unicode FA local y hereda blanco.
   ========================================================= */
html body .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanWord{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.24em !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-weight:1000 !important;
  white-space:nowrap !important;
}

html body .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanWord > .dmxPlanWordIcon{
  font-family:"Font Awesome 6 Free","Font Awesome 7 Free","Font Awesome 5 Free" !important;
  font-weight:900 !important;
  font-style:normal !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  fill:#fff !important;
  stroke:#fff !important;
  line-height:1 !important;
}

/* =========================================================
   ADMIN MODALES LISTA ORDENADA
   ========================================================= */
.dmxAdminModalList{
  display:grid;
  gap:14px;
}

.dmxAdminModalRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:stretch;
  padding:14px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:20px;
  background:#fff;
}

.dmxAdminModalMain{
  display:grid;
  gap:6px;
  text-decoration:none;
  color:inherit;
  min-width:0;
}

.dmxAdminModalTitle{
  display:block;
  font-size:22px;
  line-height:1.05;
  letter-spacing:-.04em;
  font-weight:1000;
  color:#0f172a;
}

.dmxAdminModalKey{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:5px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dmxAdminModalText{
  color:#64748b;
  font-weight:750;
  line-height:1.35;
}

.dmxAdminModalMain em{
  width:max-content;
  padding:5px 10px;
  border-radius:999px;
  font-style:normal;
  font-size:12px;
  font-weight:950;
}

.dmxAdminModalMain em.ok{
  background:#dcfce7;
  color:#166534;
}

.dmxAdminModalMain em.bad{
  background:#fee2e2;
  color:#991b1b;
}

.dmxBtnDanger{
  background:#ef4444 !important;
  color:#fff !important;
  border-bottom-color:#b91c1c !important;
}

.dmxAdminModalRow form{
  display:flex;
  align-items:center;
}

@media(max-width:720px){
  .dmxAdminModalRow{
    grid-template-columns:1fr;
  }

  .dmxAdminModalRow form .dmxBtn{
    width:100%;
  }
}

/* =========================================================
   MODALES PLAN: BOTÓN PRINCIPAL SIEMPRE DERECHA
   ========================================================= */
.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions,
.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGateActions{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions [data-dmx-plan-gate-close],
.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGateActions [data-dmx-plan-gate-close]{
  order:1 !important;
}

.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions a:not([data-dmx-plan-gate-close]),
.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGateActions a:not([data-dmx-plan-gate-close]){
  order:2 !important;
}

@media(max-width:420px){
  .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions,
  .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGateActions{
    grid-template-columns:1fr !important;
  }
}

/* DMX_MODAL_HIDDEN_PLAN_OFFER_GUARD_V51E
   Blindaje global: evita que reglas display:flex/grid!important de modales
   pisen el atributo hidden y agrega alias explícito para dmxPlanOfferModal. */
.dmxPlanOfferModal[hidden],
.dmxPlanOfferModal[aria-hidden="true"],
.dmxPlanGateModal[data-dmx-plan-gate-modal][hidden],
.dmxPlanGateModal[data-dmx-plan-gate-modal][aria-hidden="true"],
.dmxPracticeGateOverlay[hidden],
.dmxPracticeGateOverlay[aria-hidden="true"],
.dmxPracticePremiumModal[hidden],
.dmxPracticePremiumModal[aria-hidden="true"],
.dmxStageReviewModalOverlay[hidden],
.dmxStageReviewModalOverlay[aria-hidden="true"],
.dmxDiplomaProgressOverlay[hidden],
.dmxDiplomaProgressOverlay[aria-hidden="true"],
.dmxGuestDemoModalOverlay[hidden],
.dmxGuestDemoModalOverlay[aria-hidden="true"],
.dmxPlanChangeModal[hidden],
.dmxPlanChangeModal[aria-hidden="true"],
.dmxGuestCheckoutModal[hidden],
.dmxGuestCheckoutModal[aria-hidden="true"],
.dmxAnnualInfoModal[hidden],
.dmxAnnualInfoModal[aria-hidden="true"],
.dmxCurrencyConfirmModalV44B[hidden],
.dmxCurrencyConfirmModalV44B[aria-hidden="true"],
.dmxCouponPendingModalV3[hidden],
.dmxCouponPendingModalV3[aria-hidden="true"],
.dmxPaymentMethodInfoOverlayV7[hidden],
.dmxPaymentMethodInfoOverlayV7[aria-hidden="true"]{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

.dmxPlanOfferModal[data-dmx-plan-gate-modal]:not([hidden]){
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  display:grid!important;
  place-items:center!important;
  padding:24px!important;
  background:rgba(2,6,23,.70)!important;
  backdrop-filter:blur(13px)!important;
  -webkit-backdrop-filter:blur(13px)!important;
}

.dmxPlanOfferModal[data-dmx-plan-gate-modal] .dmxPlanOfferCard{
  position:relative!important;
  width:min(920px,100%)!important;
  max-height:min(86vh,780px)!important;
  overflow:auto!important;
  border-radius:34px!important;
}

/* DMX_ADMIN_CLEAR_ASSETS_CACHE_CSS_V51I2 */
.dmxAdminCacheMenuFormV51I2{
  display:inline-flex!important;
  align-items:center!important;
  margin:0!important;
}
.dmxAdminCacheMenuBtnV51I2{
  border-color:rgba(16,185,129,.38)!important;
  background:linear-gradient(135deg,#10b981,#059669)!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(16,185,129,.20)!important;
}
.dmxAdminCacheMenuBtnV51I2:hover{
  transform:translateY(-1px)!important;
  filter:saturate(1.08)!important;
}
.dmxAdminCacheMenuBtnV51I2,
.dmxAdminCacheMenuBtnV51I2 i{
  color:#fff!important;
}
.dmxAdminCacheNoticeV51I2{
  width:min(1180px,calc(100% - 32px))!important;
  margin:16px auto!important;
  padding:13px 16px!important;
  border-radius:18px!important;
  border:1px solid rgba(16,185,129,.28)!important;
  background:rgba(16,185,129,.10)!important;
  color:#065f46!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  font-weight:850!important;
}
html[data-theme="dark"] .dmxAdminCacheNoticeV51I2{
  background:rgba(16,185,129,.16)!important;
  color:#d1fae5!important;
}

/* DMX_ADMIN_CLEAR_ASSETS_CACHE_MODAL_CSS_V51I5 */
.dmxAdminCacheMenuBtnV51I5{
  border-color:rgba(16,185,129,.38)!important;
  background:linear-gradient(135deg,#10b981,#059669)!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(16,185,129,.20)!important;
}
.dmxAdminCacheMenuBtnV51I5:hover{
  transform:translateY(-1px)!important;
  filter:saturate(1.08)!important;
}
.dmxAdminCacheMenuBtnV51I5,
.dmxAdminCacheMenuBtnV51I5 i{
  color:#fff!important;
}
.dmxAdminCacheModalV51I5[hidden]{
  display:none!important;
}
.dmxAdminCacheModalV51I5{
  position:fixed!important;
  inset:0!important;
  z-index:999999!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:22px!important;
}
.dmxAdminCacheModalBackdropV51I5{
  position:absolute!important;
  inset:0!important;
  background:rgba(15,23,42,.58)!important;
  backdrop-filter:blur(8px)!important;
}
.dmxAdminCacheModalCardV51I5{
  position:relative!important;
  width:min(460px,100%)!important;
  border-radius:28px!important;
  background:#fff!important;
  color:#0f172a!important;
  padding:28px!important;
  box-shadow:0 28px 80px rgba(15,23,42,.32)!important;
  text-align:center!important;
  border:1px solid rgba(148,163,184,.24)!important;
  animation:dmxAdminCachePopV51I5 .18s ease-out both!important;
}
html[data-theme="dark"] .dmxAdminCacheModalCardV51I5{
  background:#111827!important;
  color:#f8fafc!important;
  border-color:rgba(148,163,184,.22)!important;
}
.dmxAdminCacheModalCloseV51I5{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  width:38px!important;
  height:38px!important;
  border-radius:999px!important;
  border:0!important;
  background:rgba(148,163,184,.14)!important;
  color:inherit!important;
  display:grid!important;
  place-items:center!important;
  cursor:pointer!important;
}
.dmxAdminCacheModalIconV51I5{
  width:70px!important;
  height:70px!important;
  border-radius:24px!important;
  margin:0 auto 16px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,#10b981,#059669)!important;
  color:#fff!important;
  font-size:30px!important;
  box-shadow:0 18px 42px rgba(16,185,129,.28)!important;
}
.dmxAdminCacheModalV51I5[data-mode="success"] .dmxAdminCacheModalIconV51I5{
  background:linear-gradient(135deg,#22c55e,#16a34a)!important;
}
.dmxAdminCacheModalV51I5[data-mode="error"] .dmxAdminCacheModalIconV51I5{
  background:linear-gradient(135deg,#f97316,#dc2626)!important;
}
.dmxAdminCacheModalCardV51I5 h2{
  margin:0 0 10px!important;
  font-size:24px!important;
  line-height:1.15!important;
  font-weight:950!important;
}
.dmxAdminCacheModalCardV51I5 p{
  margin:0!important;
  color:#64748b!important;
  font-weight:700!important;
  line-height:1.48!important;
}
html[data-theme="dark"] .dmxAdminCacheModalCardV51I5 p{
  color:#cbd5e1!important;
}
.dmxAdminCacheModalVersionV51I5{
  margin:16px auto 0!important;
  padding:10px 12px!important;
  border-radius:14px!important;
  background:rgba(16,185,129,.10)!important;
  color:#047857!important;
  font-weight:900!important;
  font-size:13px!important;
  overflow-wrap:anywhere!important;
}
html[data-theme="dark"] .dmxAdminCacheModalVersionV51I5{
  background:rgba(16,185,129,.16)!important;
  color:#a7f3d0!important;
}
.dmxAdminCacheModalActionsV51I5{
  display:flex!important;
  gap:10px!important;
  justify-content:center!important;
  margin-top:22px!important;
  flex-wrap:wrap!important;
}
.dmxAdminCacheModalActionsV51I5 .dmxBtn{
  min-width:140px!important;
  justify-content:center!important;
}
@keyframes dmxAdminCachePopV51I5{
  from{opacity:0;transform:translateY(10px) scale(.97);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@media(max-width:640px){
  .dmxAdminCacheModalCardV51I5{
    padding:24px 18px!important;
    border-radius:24px!important;
  }
  .dmxAdminCacheModalActionsV51I5{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .dmxAdminCacheModalActionsV51I5 .dmxBtn{
    width:100%!important;
  }
}

/* DMX_ADMIN_CLEAR_ASSETS_CACHE_MODAL_HIDDEN_FIX_V51I6 */
.dmxAdminCacheModalV51I5 [hidden],
.dmxAdminCacheModalV51I5 button[hidden],
.dmxAdminCacheModalV51I5 .dmxBtn[hidden]{
  display:none!important;
}
.dmxAdminCacheModalV51I5[data-mode="success"] [data-dmx-admin-cache-confirm-v51i5],
.dmxAdminCacheModalV51I5[data-mode="success"] [data-dmx-admin-cache-close-v51i5],
.dmxAdminCacheModalV51I5[data-mode="busy"] [data-dmx-admin-cache-confirm-v51i5],
.dmxAdminCacheModalV51I5[data-mode="busy"] [data-dmx-admin-cache-close-v51i5]{
  display:none!important;
}
.dmxAdminCacheModalV51I5[data-mode="success"] [data-dmx-admin-cache-ok-v51i5]{
  display:inline-flex!important;
}


/* DMX_STAGE_PICK_NUMBER_NO_SHADOW_CSS_V56G_START */
/*
  Elimina sombra sólida del círculo numérico de etapas.
  No cambia color, tamaño, HTML, PHP, JS ni lógica de estado.
*/
body .dmxStagePickerGrid .dmxStagePickCard .dmxStagePickNumber,
body .dmxStagePickCard .dmxStagePickNumber,
body .dmxStagePickNumber {
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

body .dmxStagePickerGrid .dmxStagePickCard .dmxStagePickNumber::before,
body .dmxStagePickerGrid .dmxStagePickCard .dmxStagePickNumber::after,
body .dmxStagePickCard .dmxStagePickNumber::before,
body .dmxStagePickCard .dmxStagePickNumber::after,
body .dmxStagePickNumber::before,
body .dmxStagePickNumber::after {
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}
/* DMX_STAGE_PICK_NUMBER_NO_SHADOW_CSS_V56G_END */


/* DMX_NODE_NO_3D_RIM_CSS_V56K_START */
/*
  Elimina la sombra y la base 3D inferior del nodo numérico de niveles.
  Mantiene el fondo/degradado original y la lógica visual de estados.
*/
body .dmxMap .dmxMission .dmxNode,
body .dmxPath .dmxMission .dmxNode,
body .dmxMission .dmxNode,
body .dmxPath .level .dmxNode,
body .dmxPath .dmxNode,
body .level .dmxNode,
body .dmxNode {
  box-shadow: none !important;
  text-shadow: none !important;
  border-bottom: none !important;
  border-bottom-width: 0 !important;
  border-bottom-style: none !important;
}

body .dmxMap .dmxMission .dmxNode::before,
body .dmxMap .dmxMission .dmxNode::after,
body .dmxPath .dmxMission .dmxNode::before,
body .dmxPath .dmxMission .dmxNode::after,
body .dmxMission .dmxNode::before,
body .dmxMission .dmxNode::after,
body .dmxPath .level .dmxNode::before,
body .dmxPath .level .dmxNode::after,
body .dmxPath .dmxNode::before,
body .dmxPath .dmxNode::after,
body .level .dmxNode::before,
body .level .dmxNode::after,
body .dmxNode::before,
body .dmxNode::after {
  box-shadow: none !important;
  text-shadow: none !important;
  border-bottom: none !important;
  border-bottom-width: 0 !important;
  border-bottom-style: none !important;
}
/* DMX_NODE_NO_3D_RIM_CSS_V56K_END */

/* DMX_PRICING_MOBILE_FIRST_PAINT_STABLE_V61Z_START */
/*
  Estabiliza el primer pintado móvil de /precios/.
  Evita que las tarjetas aparezcan apretadas, invisibles o con blur mientras
  termina de cargar el JS del carrusel y el centrado automático en PRO.
*/
@media (max-width:800px){
  body:has(.dmxPricing){
    overflow-x:hidden !important;
  }

  .dmxPricing,
  .dmxApp.dmxPricing{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .dmxPricing .dmxPriceCarouselShell,
  .dmxPricing .dmxPriceGrid{
    --dmxPlanCardW:clamp(255px,66vw,340px);
  }

  .dmxPricing .dmxPriceCarouselShell{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding:0 !important;
    overflow:visible !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }

  .dmxPricing .dmxPriceGrid,
  .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid,
  .dmxPricing .dmxPricingGrid,
  .dmxPricing .dmxPlansGrid{
    box-sizing:border-box !important;
    display:grid !important;
    grid-auto-flow:column !important;
    grid-template-columns:none !important;
    grid-auto-columns:var(--dmxPlanCardW) !important;
    gap:clamp(22px,6vw,46px) !important;
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding-top:26px !important;
    padding-bottom:24px !important;
    padding-left:calc((100vw - var(--dmxPlanCardW)) / 2) !important;
    padding-right:calc((100vw - var(--dmxPlanCardW)) / 2) !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-left:calc((100vw - var(--dmxPlanCardW)) / 2) !important;
    scroll-padding-right:calc((100vw - var(--dmxPlanCardW)) / 2) !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    contain:none !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }

  .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid,
  .dmxPricing .dmxPriceCarouselShell .dmxPricingGrid,
  .dmxPricing .dmxPriceCarouselShell .dmxPlansGrid{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .dmxPricing .dmxPriceGrid::-webkit-scrollbar,
  .dmxPricing .dmxPricingGrid::-webkit-scrollbar,
  .dmxPricing .dmxPlansGrid::-webkit-scrollbar{
    display:none !important;
  }

  .dmxPricing .dmxPriceGrid > .dmxPriceCard,
  .dmxPricing .dmxPricingGrid > .dmxPriceCard,
  .dmxPricing .dmxPlansGrid > .dmxPriceCard{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    scroll-snap-align:center !important;
    scroll-snap-stop:always !important;
    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
  }

  .dmxPricing .dmxPriceCard,
  .dmxPricing .dmxPriceCard.featured,
  .dmxPricing .dmxPriceCard .dmxPlanTop,
  .dmxPricing .dmxPriceCard .dmxPlanList li,
  .dmxPricing .dmxPriceCard form{
    animation:none !important;
    animation-delay:0s !important;
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
    will-change:auto !important;
  }

  .dmxPricing .dmxPriceDots{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    margin:14px auto 6px !important;
  }
}
/* DMX_PRICING_MOBILE_FIRST_PAINT_STABLE_V61Z_END */