:root{
  --dmx-bg:#f6f8fc;
  --dmx-ink:#101828;
  --dmx-muted:#667085;
  --dmx-line:#e4e7ec;
  --dmx-card:#ffffff;
  --dmx-green:#58cc02;
  --dmx-green2:#46a302;
  --dmx-blue:#1cb0f6;
  --dmx-orange:#ff9600;
  --dmx-red:#ff4b4b;
  --dmx-purple:#8549ff;
  --dmx-shadow:0 8px 0 rgba(16,24,40,.08);
  --dmx-radius:28px;
}
html[data-theme="dark"]{
  --dmx-bg:#0b1220;
  --dmx-ink:#f8fafc;
  --dmx-muted:#94a3b8;
  --dmx-line:#1f2937;
  --dmx-card:#111827;
  --dmx-shadow:0 8px 0 rgba(0,0,0,.28);
}
.dmxApp{
  min-height:calc(100vh - 120px);
  margin:18px auto 0;
  color:var(--dmx-ink);
}
.dmxHero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
  align-items:stretch;
}
.dmxPanel{
  background:var(--dmx-card);
  border:2px solid var(--dmx-line);
  border-radius:var(--dmx-radius);
  box-shadow:var(--dmx-shadow);
}
.dmxIntro{
  padding:34px;
  overflow:hidden;
  position:relative;
}
.dmxIntro:after{
  content:"";
  position:absolute;
  right:-90px;
  bottom:-120px;
  width:310px;
  height:310px;
  border-radius:50%;
  background:radial-gradient(circle,var(--dmx-green) 0 38%,transparent 39%);
  opacity:.14;
}
.dmxBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#ecfdf3;
  color:#027a48;
  font-weight:900;
  font-size:13px;
  letter-spacing:.02em;
}
html[data-theme="dark"] .dmxBadge{background:#052e16;color:#86efac}
.dmxTitle{
  margin:18px 0 0;
  max-width:680px;
  font-size:clamp(38px,6vw,76px);
  line-height:.94;
  letter-spacing:-.06em;
}
.dmxLead{
  margin:18px 0 0;
  max-width:620px;
  color:var(--dmx-muted);
  font-size:18px;
  font-weight:700;
}
.dmxActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:26px;
}
.dmxBtn{
  min-height:52px;
  padding:0 20px;
  border:0;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:950;
  color:var(--dmx-ink);
  background:#fff;
  border-bottom:5px solid #d0d5dd;
  transition:.12s transform ease,.12s filter ease;
}
.dmxBtn:hover{transform:translateY(-2px)}
.dmxBtnPrimary{
  color:#fff;
  background:var(--dmx-green);
  border-bottom-color:var(--dmx-green2);
}
.dmxBtnBlue{
  color:#fff;
  background:var(--dmx-blue);
  border-bottom-color:#0b83bd;
}
.dmxStats{
  padding:24px;
  display:grid;
  gap:14px;
}
.dmxProgressCard{
  padding:24px;
  border-radius:24px;
  background:linear-gradient(135deg,var(--dmx-blue),var(--dmx-purple));
  color:#fff;
}
.dmxProgressTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.dmxProgressValue{
  font-size:58px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.06em;
}
.dmxProgressLabel{
  opacity:.88;
  font-weight:850;
}
.dmxMeter{
  margin-top:18px;
  height:18px;
  padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,.28);
}
.dmxMeter span{
  display:block;
  height:100%;
  width:var(--p,0%);
  border-radius:999px;
  background:#fff;
}
.dmxMiniGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.dmxMini{
  padding:18px;
  border-radius:22px;
  background:var(--dmx-card);
  border:2px solid var(--dmx-line);
}
.dmxMini strong{
  display:block;
  font-size:28px;
  line-height:1;
  letter-spacing:-.04em;
}
.dmxMini span{
  display:block;
  margin-top:6px;
  color:var(--dmx-muted);
  font-size:13px;
  font-weight:850;
}
.dmxHomeTiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:18px;
}
.dmxTile{
  padding:22px;
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-radius:26px;
  background:var(--dmx-card);
  border:2px solid var(--dmx-line);
  border-bottom-width:7px;
  color:var(--dmx-ink);
}
.dmxTileIcon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:17px;
  color:#fff;
  font-size:24px;
  font-weight:1000;
}
.dmxTile h3{
  margin:18px 0 0;
  font-size:22px;
  letter-spacing:-.035em;
}
.dmxTile p{
  margin:8px 0 0;
  color:var(--dmx-muted);
  font-weight:700;
}
.dmxGreen{background:var(--dmx-green)}
.dmxBlue{background:var(--dmx-blue)}
.dmxOrange{background:var(--dmx-orange)}
.dmxPurple{background:var(--dmx-purple)}
.dmxMapHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.dmxMapHead h1{
  margin:0;
  font-size:clamp(34px,5vw,58px);
  line-height:.98;
  letter-spacing:-.055em;
}
.dmxMapHead p{
  margin:8px 0 0;
  color:var(--dmx-muted);
  font-weight:750;
}
.dmxNotice{
  margin:0 0 16px;
  padding:16px 18px;
  border-radius:22px;
  background:#fff7e6;
  border:2px solid #fedf89;
  color:#93370d;
  font-weight:850;
}
html[data-theme="dark"] .dmxNotice{background:#451a03;color:#fcd34d;border-color:#92400e}
.dmxPath{
  position:relative;
  display:grid;
  gap:16px;
  padding:8px 0 22px;
}
.dmxPath:before{
  content:"";
  position:absolute;
  left:38px;
  top:22px;
  bottom:42px;
  width:8px;
  border-radius:999px;
  background:linear-gradient(var(--dmx-green),var(--dmx-blue),var(--dmx-purple));
  opacity:.22;
}
.dmxMission{
  position:relative;
  display:grid;
  grid-template-columns:86px 1fr auto;
  gap:16px;
  align-items:center;
  padding:18px;
  border-radius:28px;
  background:var(--dmx-card);
  border:2px solid var(--dmx-line);
  border-bottom-width:7px;
}
.dmxMission.locked{opacity:.68}
.dmxNode{
  width:76px;
  height:76px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:28px;
  font-weight:1000;
  background:var(--dmx-green);
  border-bottom:7px solid var(--dmx-green2);
  z-index:1;
}
.dmxMission.locked .dmxNode{background:#98a2b3;border-bottom-color:#667085}
.dmxMission.done .dmxNode{background:var(--dmx-blue);border-bottom-color:#0b83bd}
.dmxMission h2{
  margin:0;
  font-size:24px;
  letter-spacing:-.035em;
}
.dmxMissionMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.dmxTag{
  padding:6px 10px;
  border-radius:999px;
  background:#f2f4f7;
  color:#475467;
  font-size:12px;
  font-weight:900;
}
html[data-theme="dark"] .dmxTag{background:#1f2937;color:#cbd5e1}
.dmxMission form{margin:0}
.dmxMission button,.dmxMission .dmxLockedBtn{
  min-width:132px;
}
.dmxLockedBtn{
  min-height:52px;
  padding:0 16px;
  border:0;
  border-radius:18px;
  background:#eaecf0;
  color:#667085;
  border-bottom:5px solid #d0d5dd;
  font-weight:950;
}
@media(max-width:900px){
  .dmxHero,.dmxHomeTiles{grid-template-columns:1fr}
  .dmxMiniGrid{grid-template-columns:repeat(3,1fr)}
  .dmxMapHead{display:block}
  .dmxMission{grid-template-columns:72px 1fr}
  .dmxMission form,.dmxMission .dmxLockedBtn{grid-column:1/-1}
  .dmxMission button,.dmxMission .dmxLockedBtn{width:100%}
  .dmxPath:before{left:34px}
  .dmxNode{width:66px;height:66px;font-size:24px}
}
@media(max-width:560px){
  .dmxApp{margin-top:8px}
  .dmxIntro,.dmxStats{padding:18px}
  .dmxLead{font-size:16px}
  .dmxMiniGrid{grid-template-columns:1fr}
  .dmxHomeTiles{gap:12px}
  .dmxMission{padding:14px;border-radius:24px}
}

/* ===== DMX Lesson / Quiz ===== */
.dmxLesson{max-width:980px}
.dmxLessonTop{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  margin-bottom:18px;
}
.dmxBack{
  width:54px;height:54px;border-radius:18px;
  display:grid;place-items:center;
  background:var(--dmx-card);
  border:2px solid var(--dmx-line);
  border-bottom:6px solid #d0d5dd;
  font-size:24px;font-weight:1000;
}
.dmxLessonTitle h1{
  margin:0;
  font-size:clamp(26px,4vw,44px);
  line-height:1;
  letter-spacing:-.055em;
}
.dmxLessonTitle p{
  margin:7px 0 0;
  color:var(--dmx-muted);
  font-weight:800;
}
.dmxSpinner{font-weight:900;color:var(--dmx-muted)}
.dmxStageRail{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:6px 2px 16px;
  margin:0 0 12px;
  scrollbar-width:none;
}
.dmxStageRail::-webkit-scrollbar{display:none}
.dmxStageRail form{margin:0}
.dmxStageDot{
  width:70px;
  height:70px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eaecf0;
  color:#667085;
  border-bottom:7px solid #d0d5dd;
  font-weight:1000;
  flex:0 0 auto;
}
.dmxStageDot.open{background:var(--dmx-green);color:#fff;border-bottom-color:var(--dmx-green2)}
.dmxStageDot.done{background:var(--dmx-blue);color:#fff;border-bottom-color:#0b83bd}
.dmxStageDot.failed{background:var(--dmx-orange);color:#fff;border-bottom-color:#b85f00}
.dmxStageDot.current{outline:5px solid rgba(88,204,2,.22)}
.dmxStageDot.locked{background:#eaecf0;color:#98a2b3}
.dmxPracticeNote{
  margin:0 0 16px;
  padding:16px 18px;
  border-radius:22px;
  background:#eff8ff;
  border:2px solid #b2ddff;
  color:#175cd3;
  font-weight:850;
}
.dmxQaShell{margin-top:10px}
.dmxQuestion,.dmxResult,.dmxGate{
  background:var(--dmx-card);
  border:2px solid var(--dmx-line);
  border-bottom:8px solid #d0d5dd;
  border-radius:32px;
  padding:28px;
}
.dmxQuestionTop{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:var(--dmx-muted);
  font-size:14px;
  font-weight:900;
}
.dmxQuestionMeter{
  margin:16px 0 24px;
  height:18px;
  padding:4px;
  border-radius:999px;
  background:#eaecf0;
}
.dmxQuestionMeter span{
  display:block;
  height:100%;
  width:var(--p,0%);
  border-radius:999px;
  background:var(--dmx-green);
}
.dmxQuestionText{
  margin:0;
  font-size:clamp(25px,4vw,42px);
  line-height:1.08;
  letter-spacing:-.045em;
}
.dmxOptions{
  display:grid;
  gap:12px;
  margin-top:24px;
}
.dmxOption{
  width:100%;
  min-height:66px;
  border:2px solid var(--dmx-line);
  border-bottom:6px solid #d0d5dd;
  border-radius:22px;
  background:var(--dmx-card);
  color:var(--dmx-ink);
  display:grid;
  grid-template-columns:42px 1fr;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  text-align:left;
  font-weight:900;
  transition:.12s transform ease,.12s border-color ease;
}
.dmxOption:hover:not(.disabled){transform:translateY(-2px);border-color:var(--dmx-blue)}
.dmxOption.disabled{pointer-events:none}
.dmxOptionBubble{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:#f2f4f7;
  color:#667085;
  font-weight:1000;
}
.dmxOption.correct{background:#f0fdf4;border-color:#86efac;border-bottom-color:#22c55e}
.dmxOption.wrong{background:#fff1f2;border-color:#fda4af;border-bottom-color:#f43f5e}
.dmxOption.correct .dmxOptionBubble{background:#22c55e;color:#fff}
.dmxOption.wrong .dmxOptionBubble{background:#f43f5e;color:#fff}
.dmxFeedback{
  margin-top:18px;
  padding:18px;
  border-radius:24px;
  border:2px solid;
  display:flex;
  gap:14px;
  align-items:flex-start;
  font-weight:850;
}
.dmxFeedback.ok{background:#f0fdf4;border-color:#86efac;color:#166534}
.dmxFeedback.bad{background:#fff1f2;border-color:#fda4af;color:#9f1239}
.dmxFeedbackIcon{
  width:42px;height:42px;border-radius:15px;
  display:grid;place-items:center;
  background:currentColor;
  color:#fff;
  flex:0 0 auto;
}
.dmxFeedbackTitle{font-size:20px;font-weight:1000}
.dmxFeedbackText{margin-top:4px}
.dmxQuestionFoot{
  margin-top:18px;
  display:flex;
  justify-content:flex-end;
}
.dmxHint{
  margin-top:16px;
  color:var(--dmx-muted);
  font-weight:850;
}
.dmxResult{
  display:grid;
  gap:18px;
}
.dmxResultHead{
  display:grid;
  grid-template-columns:72px 1fr auto;
  gap:16px;
  align-items:center;
}
.dmxResultIcon{
  width:72px;height:72px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;
  background:var(--dmx-green);
  border-bottom:8px solid var(--dmx-green2);
  font-size:34px;
  font-weight:1000;
}
.dmxResult.fail .dmxResultIcon{background:var(--dmx-red);border-bottom-color:#b42318}
.dmxResult h2{
  margin:0;
  font-size:clamp(28px,4vw,48px);
  line-height:1;
  letter-spacing:-.055em;
}
.dmxResult p{margin:8px 0 0;color:var(--dmx-muted);font-weight:800}
.dmxResultScore{
  min-width:104px;
  padding:14px;
  text-align:center;
  border-radius:24px;
  background:#f9fafb;
  border:2px solid var(--dmx-line);
}
html[data-theme="dark"] .dmxResultScore{background:#1f2937}
.dmxResultScore strong{
  display:block;
  font-size:42px;
  line-height:1;
  letter-spacing:-.06em;
}
.dmxResultScore span{color:var(--dmx-muted);font-weight:900}
.dmxRequirement{
  padding:16px 18px;
  border-radius:22px;
  background:#fff1f2;
  border:2px solid #fda4af;
  color:#9f1239;
  font-weight:900;
}
.dmxResultActions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}
.dmxGate{
  display:grid;
  gap:12px;
}
.dmxGate h2{
  margin:0;
  font-size:clamp(26px,4vw,42px);
  letter-spacing:-.05em;
}
.dmxWide{min-width:170px}
@media(max-width:680px){
  .dmxLessonTop{grid-template-columns:auto 1fr}
  .dmxSpinner{grid-column:1/-1}
  .dmxQuestion,.dmxResult,.dmxGate{padding:20px;border-radius:26px}
  .dmxResultHead{grid-template-columns:1fr;text-align:left}
  .dmxResultActions,.dmxQuestionFoot{display:grid;grid-template-columns:1fr}
  .dmxWide,.dmxResultActions .dmxBtn,.dmxQuestionFoot .dmxBtn{width:100%}
  .dmxStageDot{width:60px;height:60px}
}


/* ===== DMX mobile polish / Font Awesome local ===== */
.dmxApp i[class^="fa-"],
.dmxApp i[class*=" fa-"],
.dmxBack i,
.dmxStageDot i,
.dmxResultIcon i,
.dmxFeedbackIcon i{
  display:inline-block !important;
  line-height:1;
}

.dmxStageRail{
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}

.dmxStageRail form,
.dmxStageDot{
  scroll-snap-align:center;
}

.dmxBack{
  color:var(--dmx-ink);
}

.dmxQuestion,
.dmxResult,
.dmxGate{
  max-width:100%;
}

.dmxQuestionText{
  max-width:100%;
  text-wrap:balance;
}

.dmxOption span:last-child{
  min-width:0;
}

.dmxFeedbackIcon i,
.dmxResultIcon i{
  font-size:.95em;
}

@media(max-width:760px){
  .container{
    width:100%;
    max-width:100%;
    padding-left:0;
    padding-right:0;
  }

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

  .dmxLesson{
    max-width:100%;
  }

  .dmxLessonTop{
    grid-template-columns:54px 1fr;
    gap:12px;
    padding:0 2px;
    margin-bottom:14px;
  }

  .dmxLessonTitle h1{
    font-size:34px;
    line-height:.96;
  }

  .dmxLessonTitle p{
    font-size:17px;
    line-height:1.25;
  }

  .dmxSpinner{
    grid-column:1/-1;
    padding-left:4px;
  }

  .dmxStageRail{
    gap:10px;
    margin-left:-2px;
    margin-right:-2px;
    padding:4px 2px 18px;
  }

  .dmxStageDot{
    width:64px;
    height:64px;
    font-size:22px;
    border-bottom-width:7px;
  }

  .dmxQuestion{
    padding:28px 22px 24px;
    border-radius:30px;
    border-bottom-width:8px;
  }

  .dmxQuestionTop{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    font-size:18px;
    line-height:1.2;
  }

  .dmxQuestionMeter{
    height:18px;
    margin:18px 0 30px;
  }

  .dmxQuestionText{
    font-size:40px;
    line-height:1.03;
    letter-spacing:-.06em;
  }

  .dmxOptions{
    gap:16px;
    margin-top:30px;
  }

  .dmxOption{
    min-height:84px;
    grid-template-columns:54px 1fr;
    gap:14px;
    padding:16px 18px;
    border-radius:24px;
    border-bottom-width:7px;
    font-size:24px;
    line-height:1.15;
  }

  .dmxOptionBubble{
    width:46px;
    height:46px;
    font-size:23px;
  }

  .dmxFeedback{
    margin-top:24px;
    padding:22px;
    border-radius:26px;
    gap:16px;
  }

  .dmxFeedbackIcon{
    width:54px;
    height:54px;
    border-radius:18px;
    font-size:28px;
  }

  .dmxFeedbackTitle{
    font-size:30px;
    line-height:1;
  }

  .dmxFeedbackText{
    margin-top:10px;
    font-size:22px;
    line-height:1.35;
  }

  .dmxQuestionFoot{
    margin-top:24px;
    display:grid;
    grid-template-columns:1fr;
  }

  .dmxQuestionFoot .dmxBtn,
  .dmxWide{
    width:100%;
    min-height:68px;
    border-radius:20px;
    font-size:23px;
  }
}

@media(max-width:430px){
  .topbar{
    padding:10px 12px !important;
    gap:8px !important;
  }

  .brandLogoWide{
    display:none !important;
  }

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

  .nav{
    gap:6px !important;
  }

  .nav a,
  .toggle,
  #themeToggle{
    min-width:48px !important;
    width:48px !important;
    height:48px !important;
    padding:0 !important;
    justify-content:center !important;
  }

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

  .dmxLessonTop{
    grid-template-columns:48px 1fr;
  }

  .dmxBack{
    width:48px;
    height:48px;
    border-radius:17px;
    font-size:19px;
  }

  .dmxLessonTitle h1{
    font-size:30px;
  }

  .dmxLessonTitle p{
    font-size:15px;
  }

  .dmxStageRail{
    gap:8px;
    overflow-x:auto;
  }

  .dmxStageDot{
    width:56px;
    height:56px;
    font-size:19px;
    border-bottom-width:6px;
  }

  .dmxQuestion{
    padding:22px 18px;
    border-radius:28px;
  }

  .dmxQuestionTop{
    font-size:15px;
  }

  .dmxQuestionText{
    font-size:31px;
    line-height:1.06;
  }

  .dmxOption{
    min-height:72px;
    grid-template-columns:46px 1fr;
    padding:14px;
    font-size:20px;
  }

  .dmxOptionBubble{
    width:40px;
    height:40px;
    font-size:19px;
  }

  .dmxFeedbackTitle{
    font-size:25px;
  }

  .dmxFeedbackText{
    font-size:18px;
  }

  .dmxQuestionFoot .dmxBtn,
  .dmxWide{
    min-height:62px;
    font-size:20px;
  }
}


/* ===== DMX global icon + mobile fixes ===== */
.dmxApp i[class^="fa-"],
.dmxApp i[class*=" fa-"]{
  display:inline-block !important;
  line-height:1;
}

.dmxHeroIcon{
  font-size:54px;
  line-height:1;
  display:grid;
  place-items:center;
}

.dmxTileIcon i,
.dmxNode i,
.dmxBadge i,
.dmxNotice i{
  display:inline-block !important;
}

.dmxTileIcon{
  flex:0 0 auto;
}

@media(max-width:760px){
  .dmxHero{
    grid-template-columns:1fr;
    gap:14px;
  }

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

  .dmxTitle{
    font-size:48px;
    line-height:.95;
  }

  .dmxLead{
    font-size:17px;
    line-height:1.35;
  }

  .dmxActions{
    display:grid;
    grid-template-columns:1fr;
  }

  .dmxActions .dmxBtn{
    width:100%;
    min-height:60px;
    font-size:18px;
  }

  .dmxStats{
    padding:16px;
    border-radius:26px;
  }

  .dmxProgressValue{
    font-size:48px;
  }

  .dmxHeroIcon{
    font-size:42px;
  }

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

  .dmxTile{
    min-height:auto;
    padding:20px;
    border-radius:24px;
  }

  .dmxMapHead{
    margin-bottom:14px;
  }

  .dmxMapHead h1{
    font-size:42px;
  }

  .dmxMission{
    grid-template-columns:64px 1fr;
    gap:12px;
    padding:14px;
    border-radius:24px;
  }

  .dmxNode{
    width:58px;
    height:58px;
    font-size:22px;
  }

  .dmxMission h2{
    font-size:22px;
    line-height:1.08;
  }

  .dmxMissionMeta{
    gap:6px;
  }

  .dmxTag{
    font-size:11px;
    padding:5px 8px;
  }
}

@media(max-width:430px){
  .dmxTitle{
    font-size:40px;
  }

  .dmxMapHead h1{
    font-size:36px;
  }

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

  .dmxProgressTop{
    align-items:flex-start;
  }

  .dmxHeroIcon{
    font-size:34px;
  }
}

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

html,body{
  max-width:100%;
  overflow-x:hidden;
}

@media(max-width:640px){
  body{
    background:#f6f8fc;
  }

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

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

  .topbar{
    position:sticky !important;
    top:0;
    z-index:50;
    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,.94) !important;
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(16,24,40,.08) !important;
  }

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

  .brand{
    min-width:44px !important;
    width:44px !important;
    height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .brandLogoWide{
    display:none !important;
  }

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

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

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

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

  .dmxApp{
    margin-top:8px !important;
  }

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

  .dmxBack{
    width:44px !important;
    height:44px !important;
    border-radius:16px !important;
    border-bottom-width:5px !important;
  }

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

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

  .dmxStageRail{
    gap:7px !important;
    padding:2px 0 14px !important;
    margin-bottom:6px !important;
  }

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

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

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

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

  .dmxQuestionText{
    font-size:26px !important;
    line-height:1.12 !important;
    letter-spacing:-.035em !important;
    text-wrap:auto !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;
    gap:12px !important;
  }

  .dmxFeedbackIcon{
    width:40px !important;
    height:40px !important;
    border-radius:14px !important;
    font-size:18px !important;
  }

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

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

  .dmxQuestionFoot{
    margin-top:16px !important;
  }

  .dmxQuestionFoot .dmxBtn,
  .dmxWide,
  .dmxResultActions .dmxBtn{
    width:100% !important;
    min-height:54px !important;
    border-radius:18px !important;
    font-size:16px !important;
  }

  .dmxResultHead{
    grid-template-columns:52px 1fr !important;
    gap:12px !important;
  }

  .dmxResultIcon{
    width:52px !important;
    height:52px !important;
    font-size:22px !important;
    border-bottom-width:6px !important;
  }

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

  .dmxResultScore{
    grid-column:1/-1;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
  }

  .dmxResultScore strong{
    font-size:34px !important;
  }
}

.dmxPayChoice{
  display:grid;
  gap:12px;
  margin-top:18px;
}
.dmxPayOwn{
  width:100%;
  border:0;
  border-radius:18px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:900;
  font-size:1rem;
  cursor:pointer;
  box-shadow:0 8px 0 rgba(15,23,42,.14);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.dmxPayOwn:hover{
  transform:translateY(-2px);
  filter:saturate(1.05);
}
.dmxPayOwn:active{
  transform:translateY(2px);
  box-shadow:0 3px 0 rgba(15,23,42,.18);
}
.dmxPayOwnCard{
  background:linear-gradient(135deg,#111827,#020617);
  color:#fff;
}
.dmxPayOwnCard i{
  font-size:1.2rem;
}

.dmxPayOwnSubscribe{
  background:linear-gradient(135deg,#49d800,#22c55e);
  color:#fff;
  border:0;
}
.dmxPayOwnSubscribe i{
  font-size:1rem;
  color:#fff;
}


.dmxPayMethodMenu{
  display:grid;
  gap:10px;
  padding:12px;
  border-radius:22px;
  background:rgba(248,250,252,.94);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 18px 45px rgba(15,23,42,.12);
}
.dmxPayMethodMenu[hidden]{
  display:none !important;
}
.dmxPayMethodTrigger .fa-chevron-down{
  font-size:.85rem;
  opacity:.9;
}
.dmxPayOwnText{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.15;
}
.dmxPayOwnText b{
  font-size:.98rem;
}
.dmxPayOwnText small{
  font-weight:800;
  font-size:.76rem;
  opacity:.76;
}

.dmxPaySdkOption{
  display:grid;
  gap:8px;
}
.dmxPaySdkTitle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.88rem;
  font-weight:950;
  color:#0f172a;
  padding:0 4px;
}
.dmxPaySdkTitle i{
  width:20px;
  text-align:center;
}
.dmxPaySdkHelp{
  margin:2px 4px 0;
  font-size:.76rem;
  line-height:1.35;
  color:#64748b;
  font-weight:750;
}
.dmxPaySdkUnavailable{
  border:1px dashed rgba(100,116,139,.45);
  border-radius:14px;
  padding:12px;
  font-size:.82rem;
  font-weight:850;
  color:#64748b;
  background:#fff;
}
.dmxPayMethodMenu .dmxPayOwn{
  justify-content:flex-start;
  text-align:left;
  box-shadow:0 6px 0 rgba(15,23,42,.12);
}

.dmxPayDisabled{
  background:linear-gradient(135deg,#94a3b8,#64748b) !important;
  color:#fff !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
  opacity:.92;
}
.dmxPayDisabled:hover{
  transform:none !important;
  filter:none !important;
}
.dmxManageBox{
  margin-top:18px;
  padding:18px;
  border-radius:22px;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(100,116,139,.22);
}
.dmxManageBox h3{
  margin:0 0 8px;
  font-size:1.1rem;
}
.dmxManageActions{
  display:grid;
  gap:12px;
  margin-top:14px;
}
.dmxBtnDanger{
  background:#fee2e2 !important;
  color:#991b1b !important;
  border:1px solid #fecaca !important;
}
.dmxBtnDanger:hover{
  background:#fecaca !important;
}

.dmxSuccessPay{
  min-height:calc(100vh - 130px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:42px 16px;
}
.dmxSuccessCard{
  position:relative;
  overflow:hidden;
  width:min(820px,100%);
  text-align:center;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border:1px solid rgba(148,163,184,.28);
  border-radius:34px;
  padding:46px 34px;
  box-shadow:0 28px 80px rgba(15,23,42,.12), 0 8px 0 rgba(15,23,42,.08);
}
.dmxSuccessGlow{
  position:absolute;
  inset:-40% -20% auto;
  height:260px;
  background:radial-gradient(circle,rgba(34,197,94,.28),rgba(34,197,94,0) 68%);
  animation:dmxGlowPulse 2.4s ease-in-out infinite;
}
.dmxSuccessIcon{
  position:relative;
  width:96px;
  height:96px;
  border-radius:50%;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#49d800,#22c55e);
  color:#fff;
  font-size:48px;
  box-shadow:0 18px 38px rgba(34,197,94,.32);
  animation:dmxSuccessPop .7s cubic-bezier(.2,1.4,.4,1) both;
}
.dmxSuccessBadge{
  width:max-content;
  margin:0 auto 16px;
}
.dmxSuccessCard h1{
  position:relative;
  margin:0 auto 14px;
  max-width:760px;
  font-size:clamp(2.2rem,5vw,4.6rem);
  line-height:.98;
  letter-spacing:-.06em;
  color:#0f172a;
}
.dmxSuccessLead{
  position:relative;
  max-width:620px;
  margin:0 auto 24px;
  color:#64748b;
  font-weight:800;
  font-size:1.12rem;
  line-height:1.5;
}
.dmxSuccessPlan{
  position:relative;
  display:grid;
  gap:4px;
  width:min(420px,100%);
  margin:0 auto 24px;
  padding:18px;
  border-radius:24px;
  background:#ecfdf5;
  border:1px solid #bbf7d0;
}
.dmxSuccessPlan span{
  color:#15803d;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
}
.dmxSuccessPlan strong{
  color:#14532d;
  font-size:1.7rem;
  font-weight:1000;
}
.dmxSuccessPlan em{
  color:#166534;
  font-style:normal;
  font-weight:800;
}
.dmxSuccessChecks{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:0 auto 28px;
}
.dmxSuccessChecks div{
  padding:14px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(148,163,184,.25);
  font-weight:900;
  color:#0f172a;
}
.dmxSuccessChecks i{
  color:#22c55e;
  margin-right:6px;
}
.dmxSuccessActions{
  position:relative;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}
.dmxSuccessCta{
  min-width:230px;
}
@keyframes dmxSuccessPop{
  0%{transform:scale(.55);opacity:0}
  70%{transform:scale(1.08);opacity:1}
  100%{transform:scale(1)}
}
@keyframes dmxGlowPulse{
  0%,100%{opacity:.75;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}
@media (max-width:760px){
  .dmxSuccessCard{padding:34px 18px;border-radius:28px}
  .dmxSuccessChecks{grid-template-columns:1fr}
  .dmxSuccessActions{display:grid}
}


/* Estadísticas bloqueadas - Paywall */
.dmxStatsPaywallWrap{position:relative;margin-top:16px;min-height:560px}
.dmxStatsPaywallPreview{opacity:.36;filter:blur(2px) grayscale(.25);pointer-events:none;user-select:none}
.dmxStatsPaywallPopup{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(760px,calc(100% - 28px));padding:34px 28px;border-radius:28px;text-align:center;background:linear-gradient(135deg,rgba(18,24,38,.94),rgba(35,48,85,.94));border:1px solid rgba(255,255,255,.18);box-shadow:0 28px 90px rgba(0,0,0,.42);color:#fff;z-index:5;overflow:hidden}
.dmxStatsPaywallPopup:before{content:"";position:absolute;inset:-80px;background:radial-gradient(circle at 20% 10%,rgba(58,130,255,.45),transparent 35%),radial-gradient(circle at 90% 0%,rgba(255,196,86,.36),transparent 32%);pointer-events:none}
.dmxStatsPaywallPopup>*{position:relative;z-index:1}
.dmxStatsPaywallBadge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);font-weight:800;letter-spacing:.04em;margin-bottom:14px}
.dmxStatsPaywallPopup h2{font-size:clamp(28px,4vw,44px);line-height:1.05;margin:0 0 12px}
.dmxStatsPaywallPopup p{font-size:clamp(16px,2vw,20px);line-height:1.45;margin:0 auto 20px;max-width:620px;color:rgba(255,255,255,.86)}
.dmxStatsPaywallFeatures{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.dmxStatsPaywallFeatures span{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 10px;border-radius:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);font-weight:700}
.dmxStatsPaywallActions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px}
@media(max-width:720px){.dmxStatsPaywallWrap{min-height:620px}.dmxStatsPaywallPopup{top:50%;padding:28px 18px}.dmxStatsPaywallFeatures{grid-template-columns:1fr}}



/* Anuncio bajo preguntas/resultados - solo plan Gratis */
.dmxQuestionAdWrap{margin:20px auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;width:100%}
.dmxQuestionAdWrapResult{margin-top:22px}
.dmxQuestionAd{display:block;width:100%;max-width:970px;height:280px;min-height:280px;margin:0 auto}
.dmxRemoveAdsLink{font-size:12px;line-height:1;color:var(--muted,#64748b);text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.dmxRemoveAdsLink:hover{text-decoration:underline}
@media(max-width:760px){
  .dmxQuestionAd{width:300px!important;height:300px!important;min-height:300px!important;max-width:300px!important}
}
@media(max-width:340px){
  .dmxQuestionAd{width:250px!important;height:250px!important;min-height:250px!important;max-width:250px!important}
}



/* Modal paywall para reiniciar etapas superadas */
.dmRestartPaywallExtras{display:none}
.dmRestartPaywallMode .dmModalOverlay{background:rgba(2,6,23,.72);backdrop-filter:blur(6px)}
.dmRestartPaywallMode .dmRestartPlanCard{
  width:min(760px,calc(100% - 28px));
  padding:34px 28px;
  border-radius:28px;
  text-align:center;
  background:linear-gradient(135deg,rgba(18,24,38,.96),rgba(35,48,85,.96));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 28px 90px rgba(0,0,0,.42);
  color:#fff;
  overflow:hidden;
}
.dmRestartPaywallMode .dmRestartPlanCard:before{
  content:"";
  position:absolute;
  inset:-80px;
  background:radial-gradient(circle at 18% 8%,rgba(58,130,255,.45),transparent 35%),radial-gradient(circle at 90% 0%,rgba(255,196,86,.34),transparent 32%);
  pointer-events:none;
}
.dmRestartPaywallMode .dmRestartPlanCard>*{position:relative;z-index:1}
.dmRestartPaywallMode .dmRestartPlanCard h1{
  font-size:clamp(28px,4vw,44px);
  line-height:1.05;
  margin:0 0 12px;
  color:#fff;
}
.dmRestartPaywallMode .dmRestartPlanCard p{
  font-size:clamp(16px,2vw,20px);
  line-height:1.45;
  margin:0 auto 20px;
  max-width:620px;
  color:rgba(255,255,255,.86);
}
.dmRestartPaywallMode .dmRestartPaywallExtras{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:22px 0;
}
.dmRestartPaywallMode .dmRestartPaywallExtras span{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 10px;
  border-radius:16px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  font-weight:800;
  color:#fff;
}
.dmRestartPaywallMode .dmModalActions{justify-content:center}
@media(max-width:720px){
  .dmRestartPaywallMode .dmRestartPlanCard{padding:28px 18px}
  .dmRestartPaywallMode .dmRestartPaywallExtras{grid-template-columns:1fr}
}



/* Bloque estándar para funciones bloqueadas por plan */
.dmxPremiumLockBadge{display:none}
.dmxPremiumLockFeatures{display:none}

.dmRestartPaywallMode .dmxPremiumLockCard{
  width:min(760px,calc(100% - 28px));
  padding:34px 28px;
  border-radius:28px;
  text-align:center;
  background:linear-gradient(135deg,rgba(18,24,38,.96),rgba(35,48,85,.96));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 28px 90px rgba(0,0,0,.42);
  color:#fff;
  overflow:hidden;
}

.dmRestartPaywallMode .dmxPremiumLockCard:before{
  content:"";
  position:absolute;
  inset:-80px;
  background:
    radial-gradient(circle at 20% 10%,rgba(58,130,255,.45),transparent 35%),
    radial-gradient(circle at 90% 0%,rgba(255,196,86,.36),transparent 32%);
  pointer-events:none;
}

.dmRestartPaywallMode .dmxPremiumLockCard>*{position:relative;z-index:1}

.dmRestartPaywallMode .dmxPremiumLockBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);
  font-weight:900;
  letter-spacing:.05em;
  margin-bottom:16px;
  color:#fff;
}

.dmRestartPaywallMode .dmxPremiumLockCard h1{
  font-size:clamp(28px,4vw,44px);
  line-height:1.05;
  margin:0 0 12px;
  color:#fff;
}

.dmRestartPaywallMode .dmxPremiumLockCard p{
  font-size:clamp(16px,2vw,20px);
  line-height:1.45;
  margin:0 auto 20px;
  max-width:620px;
  color:rgba(255,255,255,.86);
}

.dmRestartPaywallMode .dmxPremiumLockFeatures{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:22px 0;
}

.dmRestartPaywallMode .dmxPremiumLockFeatures span{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 10px;
  border-radius:16px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  font-weight:800;
  color:#fff;
}

.dmRestartPaywallMode .dmModalActions{justify-content:center}

@media(max-width:720px){
  .dmRestartPaywallMode .dmxPremiumLockCard{padding:28px 18px}
  .dmRestartPaywallMode .dmxPremiumLockFeatures{grid-template-columns:1fr}
}


/* Unlock CTA estilo juego móvil */
.dmxLockedBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 18px;
  border:0;
  border-radius:18px;
  background:linear-gradient(180deg,#ffd95a 0%, #ffca28 100%);
  color:#5c3b00;
  border-bottom:5px solid #d79a00;
  box-shadow:0 10px 24px rgba(255,202,40,.28);
  font-weight:950;
  text-decoration:none;
  text-align:center;
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.dmxLockedBtn:hover{
  transform:translateY(-2px);
  filter:brightness(1.03);
  box-shadow:0 14px 28px rgba(255,202,40,.34);
}

.dmxLockedBtn:active{
  transform:none !important;
  filter:brightness(.98);
}

.dmxLockedBtn i{
  color:#8a5a00;
}


/* Colores de niveles: azul disponible, verde superado */
.dmxMission .dmxNode{
  background:var(--dmx-blue) !important;
  color:#fff !important;
  border-bottom-color:#0b83bd !important;
}

.dmxMission.open .dmxNode,
.dmxMission.locked .dmxNode{
  background:var(--dmx-blue) !important;
  color:#fff !important;
  border-bottom-color:#0b83bd !important;
}

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

.dmxLevelDoneIcon{
  color:var(--dmx-green);
  font-size:.82em;
  margin-left:6px;
  vertical-align:middle;
}

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

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


/* Colores de nota por nivel */
.dmxScoreTag{
  font-weight:950 !important;
  border:0 !important;
}

.dmxScoreTag.dmxScore100{
  background:var(--dmx-green) !important;
  color:#fff !important;
}

.dmxScoreTag.dmxScore90{
  background:var(--dmx-blue) !important;
  color:#fff !important;
}

.dmxScoreTag.dmxScore80{
  background:linear-gradient(180deg,#ffd95a 0%, #ffca28 100%) !important;
  color:#5c3b00 !important;
}

.dmxScoreTag.dmxScore70{
  background:#f97316 !important;
  color:#fff !important;
}

.dmxScoreTag.dmxScoreEmpty{
  background:#eef2f7 !important;
  color:#667085 !important;
}

/* Precios: diseño real de puntos y flechas del carrusel */
.dmxPricing .dmxPriceCarouselShell{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
}

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

.dmxPricing .dmxPriceDot{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:9px !important;
  height:9px !important;
  min-width:9px !important;
  min-height:9px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:#cbd5e1 !important;
  box-shadow:none !important;
  cursor:pointer !important;
  opacity:.95 !important;
  transition:width .18s ease, background .18s ease, transform .18s ease !important;
}

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

.dmxPricing .dmxPriceArrow{
  appearance:none !important;
  -webkit-appearance:none !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:#ffffff !important;
  color:var(--dmx-blue) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.24) !important;
  cursor:pointer !important;
  z-index:50 !important;
}

.dmxPricing .dmxPriceArrow i{
  font-size:20px !important;
  line-height:1 !important;
}

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

/* Flechas solo en PC/tablet con mouse al achicar navegador */
@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;
  }

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

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

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

/* Precios tablet: comportamiento similar a móvil entre 761px y 1100px */
@media (min-width:761px) and (max-width:800px){
  .dmxApp.dmxPricing,
  .dmxApp.dmxPricing.dmxBillingYearly,
  .dmxPricing.dmxBillingYearly{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !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:28px !important;
    padding-right:28px !important;
    overflow:visible !important;
  }

  .dmxPricing .dmxHero,
  .dmxPricing .dmxPricingHero,
  .dmxPricing .dmxSectionHead{
    max-width:780px !important;
    margin-left:auto !important;
    margin-right:auto !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;
    overflow:visible !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:minmax(330px, 42vw) !important;
    gap:34px !important;

    width:100vw !important;
    max-width:100vw !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:38px 9vw 24px 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 .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;
  }
}


/* Precios: título y bajada siempre centrados */
.dmxPricing h1,
.dmxPricing .dmxHero h1,
.dmxPricing .dmxPricingHero h1,
.dmxPricing .dmxSectionHead h1{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.dmxPricing h1 + p,
.dmxPricing .dmxHero p,
.dmxPricing .dmxPricingHero p,
.dmxPricing .dmxSectionHead p{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* Precios: iconos en títulos PRO/PREMIUM */
.dmxPricing .dmxPlanTop h2{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.dmxPricing .dmxPlanTitleIcon{
  font-size:.72em !important;
  line-height:1 !important;
  transform:translateY(-1px);
}

.dmxPricing .dmxPlanTitleIconPro{
  color:var(--dmx-green) !important;
}

.dmxPricing .dmxPlanTitleIconPremium{
  color:var(--dmx-blue) !important;
}

/* Precios: animaciones de entrada al cargar */
@keyframes dmxPriceFadeUp{
  from{
    opacity:0;
    transform:translateY(18px) scale(.985);
    filter:blur(3px);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes dmxPricePop{
  from{
    opacity:0;
    transform:translateY(22px) scale(.96);
    filter:blur(4px);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

.dmxPricing .dmxPricingHead > h1,
.dmxPricing .dmxPricingHead > p,
.dmxPricing .dmxBillingSwitchWrap,
.dmxPricing .dmxPriceCard,
.dmxPricing .dmxPriceCard .dmxPlanTop,
.dmxPricing .dmxPriceCard .dmxPlanList li,
.dmxPricing .dmxPriceCard .dmxBtn,
.dmxPricing .dmxPriceCard .dmxPayOwn,
.dmxPricing .dmxPriceCard form{
  animation-fill-mode:both;
  will-change:opacity, transform, filter;
}

.dmxPricing .dmxPricingHead > h1{
  animation:dmxPriceFadeUp .52s cubic-bezier(.2,.9,.2,1) .04s both;
}

.dmxPricing .dmxPricingHead > p{
  animation:dmxPriceFadeUp .52s cubic-bezier(.2,.9,.2,1) .12s both;
}

.dmxPricing .dmxBillingSwitchWrap{
  animation:dmxPriceFadeUp .52s cubic-bezier(.2,.9,.2,1) .20s both;
}

.dmxPricing .dmxPriceCard{
  animation:dmxPricePop .58s cubic-bezier(.2,.9,.2,1) both;
}

.dmxPricing .dmxPriceCard:nth-child(1){animation-delay:.30s;}
.dmxPricing .dmxPriceCard:nth-child(2){animation-delay:.40s;}
.dmxPricing .dmxPriceCard:nth-child(3){animation-delay:.50s;}

.dmxPricing .dmxPriceCard .dmxPlanTop{
  animation:dmxPriceFadeUp .46s cubic-bezier(.2,.9,.2,1) .12s both;
}

.dmxPricing .dmxPriceCard .dmxPlanList li{
  animation:dmxPriceFadeUp .38s cubic-bezier(.2,.9,.2,1) both;
}

.dmxPricing .dmxPriceCard .dmxPlanList li:nth-child(1){animation-delay:.18s;}
.dmxPricing .dmxPriceCard .dmxPlanList li:nth-child(2){animation-delay:.22s;}
.dmxPricing .dmxPriceCard .dmxPlanList li:nth-child(3){animation-delay:.26s;}
.dmxPricing .dmxPriceCard .dmxPlanList li:nth-child(4){animation-delay:.30s;}
.dmxPricing .dmxPriceCard .dmxPlanList li:nth-child(5){animation-delay:.34s;}
.dmxPricing .dmxPriceCard .dmxPlanList li:nth-child(6){animation-delay:.38s;}
.dmxPricing .dmxPriceCard .dmxPlanList li:nth-child(7){animation-delay:.42s;}
.dmxPricing .dmxPriceCard .dmxPlanList li:nth-child(8){animation-delay:.46s;}
.dmxPricing .dmxPriceCard .dmxPlanList li:nth-child(9){animation-delay:.50s;}
.dmxPricing .dmxPriceCard .dmxPlanList li:nth-child(10){animation-delay:.54s;}
.dmxPricing .dmxPriceCard .dmxPlanList li:nth-child(11){animation-delay:.58s;}

.dmxPricing .dmxPriceCard .dmxBtn,
.dmxPricing .dmxPriceCard .dmxPayOwn,
.dmxPricing .dmxPriceCard form{
  animation:dmxPriceFadeUp .42s cubic-bezier(.2,.9,.2,1) .62s both;
}

@media (prefers-reduced-motion:reduce){
  .dmxPricing *{
    animation:none !important;
    transition:none !important;
    filter:none !important;
  }
}

/* Precios: ocultar flechas desactivadas del carrusel */
.dmxPricing .dmxPriceArrow.is-disabled{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(-50%) scale(.85) !important;
}

/* Precios: USD pequeño alineado abajo del valor */
.dmxPricing .dmxPrice{
  align-items:flex-end !important;
}

.dmxPricing .dmxPrice > span:nth-of-type(2){
  align-self:flex-end !important;
  transform:none !important;
  margin-bottom:.22em !important;
  line-height:1 !important;
  font-size:.28em !important;
}

/* Precios: separar apenas las letras de USD */
.dmxPricing .dmxPrice > span:nth-of-type(2){
  letter-spacing:.035em !important;
}

/* Precios: destello alternado en botones Elegir plan */
@keyframes dmxPlanButtonShine{
  0%{
    transform:translateX(-140%) skewX(-18deg);
    opacity:0;
  }
  8%{
    opacity:.75;
  }
  18%{
    transform:translateX(145%) skewX(-18deg);
    opacity:0;
  }
  100%{
    transform:translateX(145%) skewX(-18deg);
    opacity:0;
  }
}

.dmxPricing .dmxPriceCard.featured .dmxBtn,
.dmxPricing .dmxPriceCard.premium .dmxBtn{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

.dmxPricing .dmxPriceCard.featured .dmxBtn::after,
.dmxPricing .dmxPriceCard.premium .dmxBtn::after{
  content:"" !important;
  position:absolute !important;
  top:-35% !important;
  left:0 !important;
  width:42% !important;
  height:170% !important;
  pointer-events:none !important;
  z-index:1 !important;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.68) 50%, transparent 100%) !important;
  animation:dmxPlanButtonShine 4.8s ease-in-out infinite !important;
}

.dmxPricing .dmxPriceCard.featured .dmxBtn::after{
  animation-delay:0s !important;
}

.dmxPricing .dmxPriceCard.premium .dmxBtn::after{
  animation-delay:.6s !important;
}

.dmxPricing .dmxPriceCard.featured .dmxBtn > *,
.dmxPricing .dmxPriceCard.premium .dmxBtn > *{
  position:relative !important;
  z-index:2 !important;
}

@media (prefers-reduced-motion:reduce){
  .dmxPricing .dmxPriceCard.featured .dmxBtn::after,
  .dmxPricing .dmxPriceCard.premium .dmxBtn::after{
    animation:none !important;
    display:none !important;
  }
}

/* Precios: destello visible alternado PRO/PREMIUM */
@keyframes dmxPlanCtaPulse{
  0%, 72%, 100%{
    box-shadow:0 10px 0 rgba(0,0,0,.12), 0 0 0 rgba(55,214,16,0);
    filter:brightness(1);
  }
  8%{
    box-shadow:0 10px 0 rgba(0,0,0,.12), 0 0 24px rgba(55,214,16,.45);
    filter:brightness(1.08);
  }
  16%{
    box-shadow:0 10px 0 rgba(0,0,0,.12), 0 0 0 rgba(55,214,16,0);
    filter:brightness(1);
  }
}

@keyframes dmxPlanCtaShine{
  0%, 68%, 100%{
    left:-80%;
    opacity:0;
  }
  8%{
    opacity:.95;
  }
  18%{
    left:125%;
    opacity:0;
  }
}

.dmxPricing .dmxPriceCard.featured form button,
.dmxPricing .dmxPriceCard.premium form button,
.dmxPricing .dmxPriceCard.featured a.dmxBtn,
.dmxPricing .dmxPriceCard.premium a.dmxBtn{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  animation:dmxPlanCtaPulse 4.2s ease-in-out infinite !important;
}

.dmxPricing .dmxPriceCard.featured form button::before,
.dmxPricing .dmxPriceCard.premium form button::before,
.dmxPricing .dmxPriceCard.featured a.dmxBtn::before,
.dmxPricing .dmxPriceCard.premium a.dmxBtn::before{
  content:"" !important;
  position:absolute !important;
  top:-45% !important;
  left:-80% !important;
  width:52% !important;
  height:190% !important;
  z-index:3 !important;
  pointer-events:none !important;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.9) 48%, transparent 100%) !important;
  transform:skewX(-20deg) !important;
  animation:dmxPlanCtaShine 4.2s ease-in-out infinite !important;
}

.dmxPricing .dmxPriceCard.premium form button,
.dmxPricing .dmxPriceCard.premium a.dmxBtn,
.dmxPricing .dmxPriceCard.premium form button::before,
.dmxPricing .dmxPriceCard.premium a.dmxBtn::before{
  animation-delay:.7s !important;
}

.dmxPricing .dmxAnnualInfo,
.dmxPricing .dmxAnnualInfo::before,
.dmxPricing .dmxPayDisabled,
.dmxPricing .dmxPayDisabled::before{
  animation:none !important;
}

@media (prefers-reduced-motion:reduce){
  .dmxPricing .dmxPriceCard.featured form button,
  .dmxPricing .dmxPriceCard.premium form button,
  .dmxPricing .dmxPriceCard.featured a.dmxBtn,
  .dmxPricing .dmxPriceCard.premium a.dmxBtn,
  .dmxPricing .dmxPriceCard.featured form button::before,
  .dmxPricing .dmxPriceCard.premium form button::before,
  .dmxPricing .dmxPriceCard.featured a.dmxBtn::before,
  .dmxPricing .dmxPriceCard.premium a.dmxBtn::before{
    animation:none !important;
  }
}

/* Precios: destello real en botones Dodo PRO/PREMIUM */
@keyframes dmxDodoButtonGlow{
  0%, 70%, 100%{
    filter:brightness(1);
    box-shadow:0 10px 0 rgba(0,0,0,.12), 0 0 0 rgba(255,255,255,0);
  }
  8%{
    filter:brightness(1.12);
    box-shadow:0 10px 0 rgba(0,0,0,.12), 0 0 26px rgba(255,255,255,.55);
  }
  16%{
    filter:brightness(1);
    box-shadow:0 10px 0 rgba(0,0,0,.12), 0 0 0 rgba(255,255,255,0);
  }
}

@keyframes dmxDodoButtonShine{
  0%, 66%, 100%{
    transform:translateX(-160%) skewX(-18deg);
    opacity:0;
  }
  8%{
    opacity:.95;
  }
  18%{
    transform:translateX(170%) skewX(-18deg);
    opacity:0;
  }
}

.dmxPricing .dmxPriceCard.featured .dmxDodoDirectButton,
.dmxPricing .dmxPriceCard.premium .dmxDodoDirectButton{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  animation:dmxDodoButtonGlow 4.4s ease-in-out infinite !important;
}

.dmxPricing .dmxPriceCard.featured .dmxDodoDirectButton::after,
.dmxPricing .dmxPriceCard.premium .dmxDodoDirectButton::after{
  content:"" !important;
  position:absolute !important;
  top:-45% !important;
  left:0 !important;
  width:48% !important;
  height:190% !important;
  z-index:3 !important;
  pointer-events:none !important;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.95) 50%, transparent 100%) !important;
  animation:dmxDodoButtonShine 4.4s ease-in-out infinite !important;
}

.dmxPricing .dmxPriceCard.featured .dmxDodoDirectButton::after{
  animation-delay:0s !important;
}

.dmxPricing .dmxPriceCard.premium .dmxDodoDirectButton,
.dmxPricing .dmxPriceCard.premium .dmxDodoDirectButton::after{
  animation-delay:.45s !important;
}

@media (prefers-reduced-motion:reduce){
  .dmxPricing .dmxPriceCard.featured .dmxDodoDirectButton,
  .dmxPricing .dmxPriceCard.premium .dmxDodoDirectButton,
  .dmxPricing .dmxPriceCard.featured .dmxDodoDirectButton::after,
  .dmxPricing .dmxPriceCard.premium .dmxDodoDirectButton::after{
    animation:none !important;
  }
}

/* Niveles: animación de entrada al cargar */
@keyframes dmxLevelFadeUp{
  from{
    opacity:0;
    transform:translateY(18px) scale(.985);
    filter:blur(3px);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes dmxLevelNodePop{
  0%{
    opacity:0;
    transform:scale(.72) rotate(-6deg);
    filter:blur(3px);
  }
  70%{
    transform:scale(1.08) rotate(1deg);
  }
  100%{
    opacity:1;
    transform:scale(1) rotate(0);
    filter:blur(0);
  }
}

.dmxMission{
  animation:dmxLevelFadeUp .52s cubic-bezier(.2,.9,.2,1) both;
  will-change:opacity, transform, filter;
}

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

.dmxMission h2,
.dmxMission p,
.dmxMission .dmxTag,
.dmxMission .dmxBtn,
.dmxMission .dmxLockedBtn,
.dmxMission form{
  animation:dmxLevelFadeUp .42s cubic-bezier(.2,.9,.2,1) both;
  will-change:opacity, transform, filter;
}

/* Stagger por tarjeta */
.dmxMission:nth-child(1){animation-delay:.04s;}
.dmxMission:nth-child(2){animation-delay:.10s;}
.dmxMission:nth-child(3){animation-delay:.16s;}
.dmxMission:nth-child(4){animation-delay:.22s;}
.dmxMission:nth-child(5){animation-delay:.28s;}
.dmxMission:nth-child(6){animation-delay:.34s;}
.dmxMission:nth-child(7){animation-delay:.40s;}
.dmxMission:nth-child(8){animation-delay:.46s;}
.dmxMission:nth-child(9){animation-delay:.52s;}
.dmxMission:nth-child(10){animation-delay:.58s;}

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

.dmxMission h2{animation-delay:.14s;}
.dmxMission p{animation-delay:.18s;}
.dmxMission .dmxTag{animation-delay:.22s;}
.dmxMission .dmxBtn,
.dmxMission .dmxLockedBtn,
.dmxMission form{animation-delay:.28s;}

@media (prefers-reduced-motion:reduce){
  .dmxMission,
  .dmxMission *,
  .dmxMission *::before,
  .dmxMission *::after{
    animation:none !important;
    transition:none !important;
    filter:none !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;
  }
}


/* Desarrollo: paywall reiniciar etapas - botones */
.dmxRestartBackBtn,
.dmxRestartPlansBtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  width:100% !important;
  min-height:56px !important;
  padding:0 16px !important;
  border-radius:18px !important;
  font-weight:950 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

.dmxRestartPlansBtn{
  background:var(--dmx-green) !important;
  color:#fff !important;
  border:0 !important;
  border-bottom:5px solid var(--dmx-green2) !important;
}

.dmxRestartBackBtn{
  background:#fff !important;
  color:#101828 !important;
  border:1px solid var(--dmx-line) !important;
  border-bottom:5px solid #d0d5dd !important;
}

.dmxRestartBackBtn i,
.dmxRestartPlansBtn i{
  font-size:1em !important;
  line-height:1 !important;
}

/* Volver / Ver planes siempre en 2 columnas */
div:has(> .dmxRestartBackBtn):has(> .dmxRestartPlansBtn),
footer:has(> .dmxRestartBackBtn):has(> .dmxRestartPlansBtn),
.dmxActions:has(> .dmxRestartBackBtn):has(> .dmxRestartPlansBtn),
.dmxModalActions:has(> .dmxRestartBackBtn):has(> .dmxRestartPlansBtn),
.dmxPremiumLockActions:has(> .dmxRestartBackBtn):has(> .dmxRestartPlansBtn){
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:14px !important;
  align-items:center !important;
}

/* Desarrollo: forzar botón Ver planes a verde */
.dmxRestartPlansBtn,
button.dmxRestartPlansBtn,
.btn.dmxRestartPlansBtn,
.btn.primary.dmxRestartPlansBtn,
button.btn.primary.dmxRestartPlansBtn,
[data-go-prices].dmxRestartPlansBtn{
  background:var(--dmx-green) !important;
  color:#fff !important;
  border:0 !important;
  border-bottom:5px solid var(--dmx-green2) !important;
  box-shadow:0 10px 0 rgba(0,0,0,.14) !important;
}

.dmxRestartPlansBtn:hover,
button.dmxRestartPlansBtn:hover,
.btn.primary.dmxRestartPlansBtn:hover{
  filter:brightness(1.04) !important;
}

/* Desarrollo: fondo oscuro del modal sin bordes redondeados */
.dmxPremiumLockOverlay,
.dmxStatsPaywallOverlay,
.dmxRestartOverlay,
.dmxAnalysisOverlay,
.dmxModalOverlay,
.dmxOverlay,
[class*="Overlay"]:has(.dmxPremiumLockBadge),
[class*="Overlay"]:has(.dmxStatsPaywallBadge){
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  border-radius:0 !important;
  overflow:hidden !important;
}


/* Estadísticas: paywall botones con misma lógica que desarrollo */
.dmxStatsPlansBtn,
.dmxStatsCourseBtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  width:100% !important;
  min-height:56px !important;
  padding:0 16px !important;
  border-radius:18px !important;
  font-weight:950 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

.dmxStatsPlansBtn,
.dmxBtn.dmxStatsPlansBtn,
.dmxBtnPrimary.dmxStatsPlansBtn{
  background:var(--dmx-green) !important;
  color:#fff !important;
  border:0 !important;
  border-bottom:5px solid var(--dmx-green2) !important;
  box-shadow:0 10px 0 rgba(0,0,0,.14) !important;
}

.dmxStatsCourseBtn,
.dmxBtn.dmxStatsCourseBtn{
  background:#fff !important;
  color:#101828 !important;
  border:1px solid var(--dmx-line) !important;
  border-bottom:5px solid #d0d5dd !important;
  box-shadow:none !important;
}

.dmxStatsPlansBtn i,
.dmxStatsCourseBtn i{
  font-size:1em !important;
  line-height:1 !important;
}

/* Ver planes / Seguir curso siempre en 2 columnas */
.dmxStatsPaywallActions,
.dmxStatsPaywallPopup .dmxActions,
.dmxStatsPaywallPopup div:has(> .dmxStatsPlansBtn):has(> .dmxStatsCourseBtn),
div:has(> .dmxStatsPlansBtn):has(> .dmxStatsCourseBtn){
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:14px !important;
  align-items: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: resultado aprobado estilo videojuego */
@keyframes dmxStageWinCard{
  0%{opacity:0;transform:translateY(22px) scale(.96);filter:blur(4px)}
  60%{transform:translateY(-4px) scale(1.012);filter:blur(0)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

@keyframes dmxStageWinIcon{
  0%{transform:scale(.3) rotate(-18deg);opacity:0}
  55%{transform:scale(1.2) rotate(5deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}

@keyframes dmxStageWinGlow{
  0%,100%{box-shadow:0 18px 0 rgba(58,170,0,.35), 0 0 0 rgba(88,204,2,0)}
  45%{box-shadow:0 18px 0 rgba(58,170,0,.35), 0 0 42px rgba(88,204,2,.55)}
}

@keyframes dmxStageConfetti{
  0%{opacity:0;transform:translateY(0) scale(.7)}
  20%{opacity:1}
  100%{opacity:0;transform:translateY(-54px) scale(1.15)}
}

.dmxResult.pass{
  position:relative !important;
  overflow:visible !important;
  animation:dmxStageWinCard .58s cubic-bezier(.2,.9,.2,1) both !important;
}

.dmxResult.pass::before,
.dmxResult.pass::after{
  content:"✦" !important;
  position:absolute !important;
  top:42px !important;
  left:76px !important;
  color:#facc15 !important;
  font-size:28px !important;
  font-weight:950 !important;
  pointer-events:none !important;
  animation:dmxStageConfetti 1.45s ease-out .18s both !important;
  z-index:3 !important;
}

.dmxResult.pass::after{
  content:"★" !important;
  left:122px !important;
  top:70px !important;
  color:#58cc02 !important;
  font-size:22px !important;
  animation-delay:.34s !important;
}

.dmxResult.pass .dmxResultIcon{
  background:linear-gradient(180deg,#58cc02 0%,#3aaa00 100%) !important;
  color:#fff !important;
  animation:dmxStageWinIcon .62s cubic-bezier(.2,.9,.2,1) .08s both, dmxStageWinGlow 2.4s ease-in-out .7s infinite !important;
  overflow:visible !important;
}

.dmxResult.pass .dmxResultIcon i{
  color:#fff !important;
  font-size:.52em !important;
  line-height:1 !important;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.18)) !important;
}

.dmxResultActions .dmxBtn i{
  margin-right:8px !important;
}

.dmxGuestRegisterCard .dmxPremiumLockBadge{
  display:inline-flex !important;
}

.dmxGuestRegisterActions{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}

@media (max-width:620px){
  .dmxGuestRegisterActions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .dmxGuestRegisterActions .btn{
    min-width:0 !important;
    padding-left:10px !important;
    padding-right:10px !important;
    font-size:14px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .dmxResult.pass,
  .dmxResult.pass::before,
  .dmxResult.pass::after,
  .dmxResult.pass .dmxResultIcon{
    animation: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;
}


/* =========================================================
   Portada V2: experiencia tipo app
   ========================================================= */
@keyframes dmxHomeFadeUp{
  from{opacity:0;transform:translateY(24px) scale(.985);filter:blur(4px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

@keyframes dmxHomeFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

@keyframes dmxHomePulseGlow{
  0%,100%{box-shadow:0 22px 0 rgba(58,170,0,.28),0 0 0 rgba(88,204,2,0)}
  45%{box-shadow:0 22px 0 rgba(58,170,0,.28),0 0 36px rgba(88,204,2,.44)}
}

@keyframes dmxHomeOptionWin{
  0%,46%,100%{transform:scale(1);filter:brightness(1)}
  55%{transform:scale(1.025);filter:brightness(1.12)}
  64%{transform:scale(1);filter:brightness(1)}
}

@keyframes dmxHomeScan{
  0%{transform:translateX(-120%);opacity:0}
  12%{opacity:.9}
  34%{transform:translateX(145%);opacity:0}
  100%{transform:translateX(145%);opacity:0}
}

@keyframes dmxHomeMeter{
  from{width:0}
  to{width:var(--w)}
}

.dmxHomeV2{
  position:relative;
  overflow:hidden;
}

.dmxHomeV2::before{
  content:"";
  position:absolute;
  inset:-120px -80px auto auto;
  width:360px;
  height:360px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(34,197,94,.20),transparent 62%);
  pointer-events:none;
  filter:blur(4px);
}

.dmxHomeV2Hero{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(360px,.78fr);
  gap:28px;
  align-items:center;
  margin-top:18px;
}

.dmxHomeV2Copy,
.dmxHomeV2AppMock,
.dmxHomeV2LiveStrip,
.dmxHomeV2Grid,
.dmxHomeV2Dashboard,
.dmxHomeV2Reviews,
.dmxHomeV2FinalCta{
  animation:dmxHomeFadeUp .62s cubic-bezier(.2,.9,.2,1) both;
}

.dmxHomeV2AppMock{animation-delay:.12s}
.dmxHomeV2LiveStrip{animation-delay:.20s}
.dmxHomeV2Grid{animation-delay:.28s}
.dmxHomeV2Dashboard{animation-delay:.36s}
.dmxHomeV2Reviews{animation-delay:.44s}
.dmxHomeV2FinalCta{animation-delay:.52s}

.dmxHomeV2Badge,
.dmxHomeV2Kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(88,204,2,.12);
  color:var(--dmx-green2);
  font-weight:950;
  margin-bottom:18px;
}

.dmxHomeV2Copy h1{
  margin:0;
  max-width:900px;
  font-size:clamp(42px,6vw,88px);
  line-height:.94;
  letter-spacing:-.065em;
}

.dmxHomeV2Copy p{
  margin:20px 0 0;
  max-width:760px;
  color:var(--dmx-muted);
  font-size:clamp(18px,1.75vw,26px);
  line-height:1.28;
  font-weight:850;
}

.dmxHomeV2Actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:28px;
}

.dmxHomeV2Actions .dmxBtn{
  min-height:58px;
}

.dmxHomeV2GhostCta{
  background:#fff !important;
  color:#101828 !important;
  border:1px solid var(--dmx-line) !important;
  border-bottom:5px solid #d0d5dd !important;
}

html[data-theme="dark"] .dmxHomeV2GhostCta{
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.14) !important;
  border-bottom-color:rgba(255,255,255,.22) !important;
}

.dmxHomeV2Trust{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:28px;
  max-width:720px;
}

.dmxHomeV2Trust div{
  padding:16px;
  border:1px solid var(--dmx-line);
  border-radius:22px;
  background:rgba(255,255,255,.72);
  box-shadow:0 14px 32px rgba(16,24,40,.06);
}

html[data-theme="dark"] .dmxHomeV2Trust div{
  background:rgba(255,255,255,.05);
}

.dmxHomeV2Trust strong{
  display:block;
  font-size:28px;
  line-height:1;
}

.dmxHomeV2Trust span{
  display:block;
  margin-top:6px;
  color:var(--dmx-muted);
  font-weight:850;
  font-size:13px;
}

.dmxHomeV2AppMock{
  position:relative;
  min-height:620px;
  display:grid;
  place-items:center;
}

.dmxHomeV2PhoneGlow{
  position:absolute;
  width:82%;
  height:82%;
  border-radius:999px;
  background:radial-gradient(circle,rgba(14,165,233,.24),rgba(88,204,2,.16),transparent 62%);
  filter:blur(22px);
  animation:dmxHomeFloat 4.5s ease-in-out infinite;
}

.dmxHomeV2Phone{
  position:relative;
  width:min(420px,100%);
  padding:22px;
  border-radius:38px;
  background:linear-gradient(180deg,#111827,#0b1220);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 34px 90px rgba(0,0,0,.32);
  color:#fff;
  overflow:hidden;
}

.dmxHomeV2Phone::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.08) 48%,transparent 55%);
  animation:dmxHomeScan 5.4s ease-in-out infinite;
  pointer-events:none;
}

.dmxHomeV2PhoneTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.dmxHomeV2PhoneTop span{
  display:block;
  color:#9ca3af;
  font-size:13px;
  font-weight:900;
}

.dmxHomeV2PhoneTop strong{
  display:block;
  font-size:25px;
  line-height:1;
}

.dmxHomeV2PhoneTop i{
  width:54px;
  height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(88,204,2,.16);
  color:#58cc02;
  font-size:24px;
}

.dmxHomeV2StageTrack{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin-bottom:18px;
}

.dmxHomeV2StageTrack span{
  height:48px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  color:#94a3b8;
  font-weight:950;
}

.dmxHomeV2StageTrack .done{
  background:#58cc02;
  color:#fff;
}

.dmxHomeV2StageTrack .active{
  background:#0ea5e9;
  color:#fff;
  animation:dmxHomePulseGlow 2.8s ease-in-out infinite;
}

.dmxHomeV2QuizCard{
  padding:18px;
  border-radius:26px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
}

.dmxHomeV2QuizHead{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  color:#cbd5e1;
  font-weight:950;
  font-size:13px;
}

.dmxHomeV2QuizHead span{
  display:flex;
  align-items:center;
  gap:8px;
}

.dmxHomeV2QuizHead i{
  color:#facc15;
}

.dmxHomeV2QuizCard h3{
  margin:14px 0 16px;
  font-size:20px;
  line-height:1.16;
}

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

.dmxHomeV2Option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  color:#e5e7eb;
  font-weight:900;
}

.dmxHomeV2Option.is-correct{
  background:rgba(88,204,2,.20);
  color:#fff;
  border:1px solid rgba(88,204,2,.45);
  animation:dmxHomeOptionWin 3.6s ease-in-out infinite;
}

.dmxHomeV2Option.is-correct i{
  color:#58cc02;
}

.dmxHomeV2Explain{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  background:rgba(250,204,21,.12);
  color:#fde68a;
  font-size:13px;
  font-weight:850;
}

.dmxHomeV2ScoreRow{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}

.dmxHomeV2ScoreRow div{
  padding:14px;
  border-radius:20px;
  background:rgba(255,255,255,.07);
}

.dmxHomeV2ScoreRow strong{
  display:block;
  font-size:25px;
}

.dmxHomeV2ScoreRow span{
  color:#9ca3af;
  font-size:12px;
  font-weight:900;
}

.dmxHomeV2LiveStrip{
  display:flex;
  gap:12px;
  margin-top:28px;
  padding:14px;
  border:1px solid var(--dmx-line);
  border-radius:28px;
  background:rgba(255,255,255,.64);
  overflow:hidden;
}

html[data-theme="dark"] .dmxHomeV2LiveStrip{
  background:rgba(255,255,255,.04);
}

.dmxHomeV2LiveStrip div{
  flex:1 0 auto;
  min-width:max-content;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:13px 14px;
  border-radius:18px;
  background:rgba(88,204,2,.10);
  color:var(--dmx-green2);
  font-weight:950;
}

.dmxHomeV2Grid{
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  gap:18px;
  margin-top:28px;
}

.dmxHomeV2Card{
  padding:24px;
  border-radius:30px;
  border:1px solid var(--dmx-line);
  background:rgba(255,255,255,.76);
  box-shadow:0 16px 42px rgba(16,24,40,.07);
  transition:transform .18s ease,border-color .18s ease;
}

html[data-theme="dark"] .dmxHomeV2Card{
  background:rgba(255,255,255,.04);
}

.dmxHomeV2Card:hover{
  transform:translateY(-4px);
  border-color:rgba(14,165,233,.32);
}

.dmxHomeV2CardIcon{
  width:58px;
  height:58px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  font-size:24px;
}

.dmxHomeV2CardIcon.green{background:rgba(88,204,2,.14);color:#58cc02}
.dmxHomeV2CardIcon.blue{background:rgba(14,165,233,.14);color:#0ea5e9}
.dmxHomeV2CardIcon.orange{background:rgba(245,158,11,.14);color:#f59e0b}
.dmxHomeV2CardIcon.purple{background:rgba(139,92,246,.14);color:#8b5cf6}
.dmxHomeV2CardIcon.red{background:rgba(239,68,68,.12);color:#ef4444}

.dmxHomeV2Card h2{
  margin:0;
  font-size:26px;
  letter-spacing:-.035em;
}

.dmxHomeV2Card p{
  margin:10px 0 0;
  color:var(--dmx-muted);
  font-weight:820;
  line-height:1.45;
}

.dmxHomeV2MiniProgress{
  display:grid;
  gap:10px;
  margin-top:22px;
}

.dmxHomeV2MiniProgress span{
  display:block;
  height:13px;
  border-radius:999px;
  background:rgba(16,24,40,.08);
  overflow:hidden;
  position:relative;
}

.dmxHomeV2MiniProgress span::before{
  content:"";
  display:block;
  height:100%;
  width:var(--w);
  border-radius:999px;
  background:linear-gradient(90deg,#58cc02,#0ea5e9);
  animation:dmxHomeMeter 1.1s ease-out both;
}

.dmxHomeV2Dashboard{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:22px;
  align-items:center;
  margin-top:28px;
  padding:28px;
  border-radius:34px;
  background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(88,204,2,.10));
  border:1px solid var(--dmx-line);
}

.dmxHomeV2DashCopy h2,
.dmxHomeV2ReviewHead h2,
.dmxHomeV2FinalCta h2{
  margin:0;
  font-size:clamp(30px,3.6vw,54px);
  line-height:.98;
  letter-spacing:-.055em;
}

.dmxHomeV2DashCopy p,
.dmxHomeV2FinalCta p{
  margin:14px 0 0;
  color:var(--dmx-muted);
  font-size:18px;
  font-weight:830;
  line-height:1.42;
}

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

.dmxHomeV2DashStats div{
  padding:22px;
  border-radius:26px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--dmx-line);
}

html[data-theme="dark"] .dmxHomeV2DashStats div{
  background:rgba(255,255,255,.06);
}

.dmxHomeV2DashStats strong{
  display:block;
  font-size:38px;
  line-height:1;
}

.dmxHomeV2DashStats span{
  display:block;
  margin-top:8px;
  color:var(--dmx-muted);
  font-weight:900;
}

.dmxHomeV2Reviews{
  margin-top:28px;
}

.dmxHomeV2ReviewHead{
  text-align:center;
  max-width:840px;
  margin:0 auto 18px;
}

.dmxHomeV2ReviewHead span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  color:#f59e0b;
  font-weight:950;
}

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

.dmxHomeV2ReviewGrid article{
  padding:22px;
  border-radius:28px;
  border:1px solid var(--dmx-line);
  background:rgba(255,255,255,.70);
  box-shadow:0 16px 42px rgba(16,24,40,.06);
}

html[data-theme="dark"] .dmxHomeV2ReviewGrid article{
  background:rgba(255,255,255,.04);
}

.dmxHomeV2Stars{
  color:#facc15;
  letter-spacing:.08em;
  font-weight:950;
}

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

.dmxHomeV2ReviewGrid strong{
  display:block;
  margin-top:14px;
}

.dmxHomeV2FinalCta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:28px;
  padding:28px;
  border-radius:34px;
  background:linear-gradient(135deg,#0f172a,#1e3a8a);
  color:#fff;
  overflow:hidden;
  position:relative;
}

.dmxHomeV2FinalCta::after{
  content:"";
  position:absolute;
  inset:-120px -80px auto auto;
  width:280px;
  height:280px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(88,204,2,.35),transparent 65%);
}

.dmxHomeV2FinalCta > *{
  position:relative;
  z-index:1;
}

.dmxHomeV2FinalCta p{
  color:rgba(255,255,255,.72);
}

.dmxHomeV2FinalCta .dmxBtn{
  flex:0 0 auto;
  min-height:58px;
}

@media (max-width:1020px){
  .dmxHomeV2Hero,
  .dmxHomeV2Dashboard{
    grid-template-columns:1fr;
  }

  .dmxHomeV2AppMock{
    min-height:auto;
  }

  .dmxHomeV2Phone{
    max-width:520px;
  }

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

  .dmxHomeV2CardBig{
    grid-column:1/-1;
  }
}

@media (max-width:700px){
  .dmxHomeV2Copy h1{
    font-size:clamp(36px,12vw,58px);
  }

  .dmxHomeV2Copy p{
    font-size:17px;
  }

  .dmxHomeV2Actions,
  .dmxHomeV2FinalCta{
    align-items:stretch;
    flex-direction:column;
  }

  .dmxHomeV2Actions .dmxBtn,
  .dmxHomeV2FinalCta .dmxBtn{
    width:100%;
  }

  .dmxHomeV2Trust,
  .dmxHomeV2Grid,
  .dmxHomeV2DashStats,
  .dmxHomeV2ReviewGrid{
    grid-template-columns:1fr;
  }

  .dmxHomeV2LiveStrip{
    overflow-x:auto;
    scrollbar-width:none;
  }

  .dmxHomeV2LiveStrip::-webkit-scrollbar{
    display:none;
  }

  .dmxHomeV2Phone{
    border-radius:30px;
    padding:18px;
  }
}

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


/* Portada V2: demo real de aciertos/fallos */
.dmxHomeV2QuizFeed{
  overflow:visible !important;
}

.dmxHomeV2QuizStack{
  display:grid;
  gap:12px;
  margin-top:14px;
}

.dmxHomeV2QuizMini{
  position:relative;
  padding:14px;
  border-radius:20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  animation:dmxHomeFadeUp .62s cubic-bezier(.2,.9,.2,1) both;
}

.dmxHomeV2QuizMini:nth-child(1){animation-delay:.15s}
.dmxHomeV2QuizMini:nth-child(2){animation-delay:.32s}
.dmxHomeV2QuizMini:nth-child(3){animation-delay:.49s}

.dmxHomeV2QuizMini::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.10) 48%,transparent 58%);
  transform:translateX(-130%);
  animation:dmxHomeScan 4.6s ease-in-out infinite;
  pointer-events:none;
}

.dmxHomeV2QuizMiniTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
  font-size:12px;
  font-weight:950;
}

.dmxHomeV2QuizMiniTop span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.dmxHomeV2QuizMiniTop strong{
  padding:6px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  line-height:1;
}

.dmxHomeV2QuizMini h3{
  margin:0;
  font-size:15px;
  line-height:1.18;
  letter-spacing:-.02em;
}

.dmxHomeV2QuizMini p{
  margin:8px 0 0;
  color:#cbd5e1;
  font-size:12px;
  line-height:1.25;
  font-weight:850;
}

.dmxHomeV2QuizMini.is-ok{
  background:rgba(88,204,2,.18);
  border-color:rgba(88,204,2,.42);
}

.dmxHomeV2QuizMini.is-ok .dmxHomeV2QuizMiniTop{
  color:#86efac;
}

.dmxHomeV2QuizMini.is-bad{
  background:rgba(239,68,68,.14);
  border-color:rgba(239,68,68,.36);
}

.dmxHomeV2QuizMini.is-bad .dmxHomeV2QuizMiniTop{
  color:#fca5a5;
}

.dmxHomeV2QuizMini.is-live{
  background:rgba(14,165,233,.14);
  border-color:rgba(14,165,233,.38);
  animation:dmxHomeOptionWin 3.6s ease-in-out infinite;
}

.dmxHomeV2QuizMini.is-live .dmxHomeV2QuizMiniTop{
  color:#7dd3fc;
}

.dmxHomeV2QuizMini .dmxHomeV2Options{
  margin-top:10px;
  gap:8px;
}

.dmxHomeV2QuizMini .dmxHomeV2Option{
  padding:10px 11px;
  border-radius:14px;
  font-size:12px;
  line-height:1.15;
}

/* 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;
}


/* Portada V2: mockup fiel al cuestionario real */
@keyframes dmxRealQuizCycle1{
  0%,28%{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
  33%,100%{opacity:0;transform:translateY(-14px) scale(.985);pointer-events:none}
}
@keyframes dmxRealQuizCycle2{
  0%,30%{opacity:0;transform:translateY(16px) scale(.985);pointer-events:none}
  35%,62%{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
  67%,100%{opacity:0;transform:translateY(-14px) scale(.985);pointer-events:none}
}
@keyframes dmxRealQuizCycle3{
  0%,64%{opacity:0;transform:translateY(16px) scale(.985);pointer-events:none}
  69%,94%{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
  100%{opacity:0;transform:translateY(-14px) scale(.985);pointer-events:none}
}

.dmxHomeV2RealQuizDemo{
  position:relative;
  min-height:520px;
  margin-top:10px;
}

.dmxHomeV2RealScreen{
  position:absolute;
  inset:0;
  padding:16px;
  border-radius:28px;
  background:#fff;
  color:#101828;
  border:1px solid rgba(16,24,40,.10);
  box-shadow:0 18px 0 rgba(16,24,40,.13);
  overflow:hidden;
}

.dmxHomeV2RealScreen.screen1{animation:dmxRealQuizCycle1 10.5s ease-in-out infinite}
.dmxHomeV2RealScreen.screen2{animation:dmxRealQuizCycle2 10.5s ease-in-out infinite}
.dmxHomeV2RealScreen.screen3{animation:dmxRealQuizCycle3 10.5s ease-in-out infinite}

.dmxHomeV2RealMeta{
  display:grid;
  gap:4px;
  color:#667085;
  font-weight:950;
  font-size:13px;
  line-height:1.15;
}

.dmxHomeV2RealMeta strong{
  display:flex;
  align-items:center;
  gap:7px;
}

.dmxHomeV2RealMeta span{
  font-size:12px;
}

.dmxHomeV2RealBar{
  height:12px;
  border-radius:999px;
  background:#eef0f5;
  margin:14px 0 18px;
  overflow:hidden;
}

.dmxHomeV2RealBar span{
  display:block;
  height:100%;
  width:var(--p);
  border-radius:999px;
  background:#6bd333;
  animation:dmxHomeMeter .7s ease-out both;
}

.dmxHomeV2RealScreen h3{
  margin:0 0 16px;
  font-size:22px;
  line-height:1.05;
  letter-spacing:-.055em;
  color:#0b1020;
}

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

.dmxHomeV2RealOption{
  min-height:56px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:18px;
  background:#fff;
  border:2px solid #e5e7eb;
  box-shadow:0 5px 0 #d1d5db;
  color:#101828;
  font-weight:950;
  font-size:14px;
  line-height:1.1;
}

.dmxHomeV2RealOption b{
  width:36px;
  height:36px;
  border-radius:999px;
  flex:0 0 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f2f4f7;
  color:#667085;
  font-weight:950;
}

.dmxHomeV2RealOption.correct{
  background:#ecfdf3;
  border-color:#86efac;
  box-shadow:0 5px 0 #58c96a;
}

.dmxHomeV2RealOption.correct b{
  background:#58c96a;
  color:#fff;
}

.dmxHomeV2RealOption.wrong{
  background:#fff1f3;
  border-color:#f4a6b3;
  box-shadow:0 5px 0 #e34d64;
  color:#9f243b;
}

.dmxHomeV2RealOption.wrong b{
  background:#e34d64;
  color:#fff;
}

.dmxHomeV2RealFeedback{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:18px;
  padding:15px;
  border-radius:20px;
  border:2px solid;
}

.dmxHomeV2RealFeedback > b{
  width:42px;
  height:42px;
  border-radius:14px;
  flex:0 0 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}

.dmxHomeV2RealFeedback strong{
  display:block;
  font-size:23px;
  line-height:1;
  letter-spacing:-.04em;
}

.dmxHomeV2RealFeedback p{
  margin:7px 0 0;
  font-size:14px;
  line-height:1.25;
  font-weight:900;
}

.dmxHomeV2RealFeedback.ok{
  background:#ecfdf3;
  border-color:#86efac;
  color:#235b36;
}

.dmxHomeV2RealFeedback.ok > b{
  background:#58c96a;
}

.dmxHomeV2RealFeedback.bad{
  background:#fff1f3;
  border-color:#f4a6b3;
  color:#9f243b;
}

.dmxHomeV2RealFeedback.bad > b{
  background:#e34d64;
}

.dmxHomeV2RealFeedback i,
.dmxHomeV2RealOption i{
  margin:0 !important;
  line-height:1 !important;
  opacity:1 !important;
}

@media (max-width:700px){
  .dmxHomeV2RealQuizDemo{
    min-height:545px;
  }

  .dmxHomeV2RealScreen{
    padding:14px;
  }

  .dmxHomeV2RealScreen h3{
    font-size:20px;
  }

  .dmxHomeV2RealOption{
    min-height:52px;
    font-size:13px;
  }
}


/* Portada V2: mockup tipo video real */
@keyframes dmxVideoMockScroll{
  0%,24%{transform:translateY(0)}
  32%,56%{transform:translateY(-392px)}
  64%,88%{transform:translateY(-784px)}
  100%{transform:translateY(0)}
}

@keyframes dmxVideoMockProgress{
  from{width:0}
  to{width:var(--p)}
}

@keyframes dmxVideoMockTap{
  0%,100%{transform:scale(1)}
  45%{transform:scale(1.025)}
}

.dmxHomeV2Phone{
  width:min(430px,100%) !important;
}

.dmxHomeV2VideoDemo{
  margin-top:10px;
  border-radius:28px;
  background:#fff;
  color:#0b1020;
  overflow:hidden;
  border:1px solid rgba(16,24,40,.10);
  box-shadow:0 16px 0 rgba(16,24,40,.15);
}

.dmxHomeV2VideoTop{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:14px 16px 10px;
  color:#667085;
  font-size:12px;
  font-weight:950;
}

.dmxHomeV2VideoTop strong{
  display:flex;
  align-items:center;
  gap:8px;
  color:#344054;
}

.dmxHomeV2VideoTop i{
  color:#58cc02;
}

.dmxHomeV2VideoViewport{
  height:392px;
  overflow:hidden;
  position:relative;
}

.dmxHomeV2VideoViewport::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:46px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff);
  pointer-events:none;
}

.dmxHomeV2VideoTrack{
  display:block;
  animation:dmxVideoMockScroll 12s cubic-bezier(.72,0,.28,1) infinite;
}

.dmxHomeV2VideoQuestion{
  height:392px;
  padding:0 16px 16px;
  box-sizing:border-box;
}

.dmxHomeV2VideoMeta{
  display:grid;
  gap:4px;
  color:#667085;
  font-weight:950;
  font-size:12px;
  line-height:1.1;
}

.dmxHomeV2VideoMeta b{
  display:flex;
  align-items:center;
  gap:7px;
}

.dmxHomeV2VideoBar{
  height:10px;
  margin:12px 0 15px;
  border-radius:999px;
  background:#eef0f5;
  overflow:hidden;
}

.dmxHomeV2VideoBar span{
  display:block;
  height:100%;
  width:var(--p);
  border-radius:999px;
  background:#6bd333;
  animation:dmxVideoMockProgress .8s ease-out both;
}

.dmxHomeV2VideoQuestion h3{
  margin:0 0 13px;
  font-size:20px;
  line-height:1.03;
  letter-spacing:-.055em;
  color:#0b1020;
}

.dmxHomeV2VideoOptions{
  display:grid;
  gap:8px;
}

.dmxHomeV2VideoOptions div{
  min-height:45px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:15px;
  background:#fff;
  border:2px solid #e5e7eb;
  box-shadow:0 4px 0 #d1d5db;
  font-size:13px;
  font-weight:950;
  line-height:1.1;
}

.dmxHomeV2VideoOptions b,
.dmxHomeV2VideoOptions i{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
  border-radius:999px;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#f2f4f7;
  color:#667085;
  font-size:13px !important;
  line-height:1 !important;
  margin:0 !important;
}

.dmxHomeV2VideoOptions .correct{
  background:#ecfdf3;
  border-color:#86efac;
  box-shadow:0 4px 0 #58c96a;
}

.dmxHomeV2VideoOptions .correct i{
  background:#58c96a;
  color:#fff;
}

.dmxHomeV2VideoOptions .wrong{
  background:#fff1f3;
  border-color:#f4a6b3;
  box-shadow:0 4px 0 #e34d64;
  color:#9f243b;
}

.dmxHomeV2VideoOptions .wrong i{
  background:#e34d64;
  color:#fff;
}

.dmxHomeV2VideoOptions .selected{
  animation:dmxVideoMockTap 1.8s ease-in-out infinite;
}

.dmxHomeV2VideoFeedback{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:13px;
  padding:12px;
  border-radius:17px;
  border:2px solid;
}

.dmxHomeV2VideoFeedback > i{
  width:36px !important;
  height:36px !important;
  flex:0 0 36px !important;
  border-radius:13px;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#fff !important;
  font-size:17px !important;
  line-height:1 !important;
  margin:0 !important;
}

.dmxHomeV2VideoFeedback strong{
  display:block;
  font-size:21px;
  line-height:1;
  letter-spacing:-.04em;
}

.dmxHomeV2VideoFeedback p{
  margin:6px 0 0;
  font-size:12px;
  line-height:1.22;
  font-weight:900;
}

.dmxHomeV2VideoFeedback.ok{
  background:#ecfdf3;
  border-color:#86efac;
  color:#235b36;
}

.dmxHomeV2VideoFeedback.ok > i{
  background:#58c96a;
}

.dmxHomeV2VideoFeedback.bad{
  background:#fff1f3;
  border-color:#f4a6b3;
  color:#9f243b;
}

.dmxHomeV2VideoFeedback.bad > i{
  background:#e34d64;
}

.dmxHomeV2VideoButton{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:12px 14px 14px;
  color:#667085;
  font-size:12px;
  font-weight:950;
}

.dmxHomeV2VideoButton i{
  color:#58cc02;
}

@media (max-width:700px){
  .dmxHomeV2VideoViewport,
  .dmxHomeV2VideoQuestion{
    height:374px;
  }

  .dmxHomeV2VideoTrack{
    animation-name:dmxVideoMockScrollMobile;
  }

  @keyframes dmxVideoMockScrollMobile{
    0%,24%{transform:translateY(0)}
    32%,56%{transform:translateY(-374px)}
    64%,88%{transform:translateY(-748px)}
    100%{transform:translateY(0)}
  }

  .dmxHomeV2VideoQuestion h3{
    font-size:18px;
  }

  .dmxHomeV2VideoOptions div{
    min-height:42px;
    font-size:12px;
  }
}


/* Portada V2: mockup limpio y uniforme */
@keyframes dmxCleanMockIn{
  0%{opacity:0;transform:translateY(14px) scale(.985)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes dmxCleanMockAnswer{
  0%,42%,100%{transform:scale(1)}
  52%{transform:scale(1.018)}
}

@keyframes dmxCleanMockGlow{
  0%,100%{box-shadow:0 6px 0 var(--dmxMockGreenShadow),0 0 0 rgba(88,204,2,0)}
  50%{box-shadow:0 6px 0 var(--dmxMockGreenShadow),0 0 28px rgba(88,204,2,.28)}
}

.dmxHomeV2CleanMock{
  --dmxMockBg:#ffffff;
  --dmxMockText:#0b1020;
  --dmxMockMuted:#667085;
  --dmxMockLine:#e5e7eb;
  --dmxMockSoft:#f8fafc;
  --dmxMockAnswer:#ffffff;
  --dmxMockAnswerShadow:#d1d5db;
  --dmxMockGreen:#58cc02;
  --dmxMockGreenSoft:#ecfdf3;
  --dmxMockGreenLine:#86efac;
  --dmxMockGreenShadow:#58c96a;

  width:100%;
  margin-top:12px;
  padding:18px;
  border-radius:30px;
  background:var(--dmxMockBg);
  color:var(--dmxMockText);
  border:1px solid var(--dmxMockLine);
  box-shadow:0 16px 0 rgba(16,24,40,.14);
  box-sizing:border-box;
  overflow:visible;
  animation:dmxCleanMockIn .55s ease-out both;
}

html[data-theme="dark"] .dmxHomeV2CleanMock{
  --dmxMockBg:#111827;
  --dmxMockText:#f8fafc;
  --dmxMockMuted:#aab4c5;
  --dmxMockLine:rgba(255,255,255,.12);
  --dmxMockSoft:rgba(255,255,255,.06);
  --dmxMockAnswer:#172033;
  --dmxMockAnswerShadow:#0b1020;
  --dmxMockGreenSoft:rgba(88,204,2,.16);
  --dmxMockGreenLine:rgba(88,204,2,.45);
  box-shadow:0 16px 0 rgba(0,0,0,.30);
}

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

.dmxHomeV2CleanTop span{
  display:block;
  color:var(--dmxMockMuted);
  font-size:12px;
  font-weight:950;
}

.dmxHomeV2CleanTop strong{
  display:block;
  margin-top:3px;
  font-size:18px;
  line-height:1.05;
  letter-spacing:-.035em;
}

.dmxHomeV2CleanTop em{
  flex:0 0 auto;
  font-style:normal;
  padding:8px 10px;
  border-radius:999px;
  background:var(--dmxMockSoft);
  color:var(--dmxMockMuted);
  font-size:11px;
  font-weight:950;
}

.dmxHomeV2CleanProgress{
  height:10px;
  border-radius:999px;
  background:var(--dmxMockSoft);
  overflow:hidden;
  margin-bottom:18px;
}

.dmxHomeV2CleanProgress span{
  display:block;
  width:24%;
  height:100%;
  border-radius:999px;
  background:var(--dmxMockGreen);
}

.dmxHomeV2CleanQuestion h3{
  margin:0 0 16px;
  color:var(--dmxMockText);
  font-size:clamp(20px,2vw,28px);
  line-height:1.05;
  letter-spacing:-.055em;
}

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

.dmxHomeV2CleanAnswer{
  min-height:52px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:18px;
  background:var(--dmxMockAnswer);
  border:2px solid var(--dmxMockLine);
  box-shadow:0 5px 0 var(--dmxMockAnswerShadow);
  color:var(--dmxMockText);
  font-size:14px;
  font-weight:950;
  line-height:1.1;
}

.dmxHomeV2CleanAnswer b{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--dmxMockSoft);
  color:var(--dmxMockMuted);
  font-weight:950;
}

.dmxHomeV2CleanAnswer.is-correct{
  background:var(--dmxMockGreenSoft);
  border-color:var(--dmxMockGreenLine);
  box-shadow:0 5px 0 var(--dmxMockGreenShadow);
  animation:dmxCleanMockAnswer 2.8s ease-in-out infinite, dmxCleanMockGlow 3.2s ease-in-out infinite;
}

.dmxHomeV2CleanAnswer.is-correct b{
  background:var(--dmxMockGreenShadow);
  color:#fff;
}

.dmxHomeV2CleanFeedback{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:16px;
  padding:15px;
  border-radius:20px;
  border:2px solid var(--dmxMockGreenLine);
  background:var(--dmxMockGreenSoft);
  color:var(--dmxMockText);
}

.dmxHomeV2CleanFeedback > b{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--dmxMockGreenShadow);
  color:#fff;
}

.dmxHomeV2CleanFeedback strong{
  display:block;
  color:var(--dmxMockText);
  font-size:25px;
  line-height:1;
  letter-spacing:-.045em;
}

.dmxHomeV2CleanFeedback p{
  margin:7px 0 0;
  color:var(--dmxMockText);
  opacity:.82;
  font-size:14px;
  line-height:1.25;
  font-weight:900;
}

.dmxHomeV2CleanFlow{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
}

.dmxHomeV2CleanFlow span{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px;
  border-radius:14px;
  background:var(--dmxMockSoft);
  color:var(--dmxMockMuted);
  font-size:11px;
  font-weight:950;
  text-align:center;
}

.dmxHomeV2CleanFlow .active{
  background:var(--dmxMockGreenSoft);
  color:var(--dmxMockGreen);
}

.dmxHomeV2CleanFlow .done{
  color:var(--dmxMockMuted);
}

.dmxHomeV2CleanMock i,
.dmxHomeV2CleanMock i::before{
  line-height:1 !important;
  margin:0 !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
  display:block !important;
  opacity:1 !important;
}

@media (max-width:700px){
  .dmxHomeV2CleanMock{
    padding:15px;
    border-radius:26px;
  }

  .dmxHomeV2CleanTop{
    flex-direction:column;
    align-items:flex-start;
  }

  .dmxHomeV2CleanTop em{
    width:100%;
    text-align:center;
  }

  .dmxHomeV2CleanAnswer{
    min-height:50px;
    font-size:13px;
  }

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


/* Portada V2: secuencia compacta de aciertos y fallos */
@keyframes dmxSeqPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.012)}
}

.dmxHomeV2CleanMock.is-sequence{
  padding:16px !important;
}

.dmxHomeV2CleanMock.is-sequence .dmxHomeV2CleanProgress span{
  width:32% !important;
}

.dmxHomeV2Sequence{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.dmxHomeV2SeqItem{
  padding:13px;
  border-radius:20px;
  background:var(--dmxMockAnswer);
  border:1px solid var(--dmxMockLine);
  box-shadow:0 4px 0 var(--dmxMockAnswerShadow);
}

.dmxHomeV2SeqItem.is-ok{
  border-color:var(--dmxMockGreenLine);
}

.dmxHomeV2SeqItem.is-bad{
  border-color:rgba(228,77,100,.42);
}

html[data-theme="dark"] .dmxHomeV2SeqItem.is-bad{
  border-color:rgba(244,166,179,.34);
}

.dmxHomeV2SeqMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--dmxMockMuted);
  font-size:11px;
  font-weight:950;
}

.dmxHomeV2SeqMeta b{
  display:flex;
  align-items:center;
  gap:6px;
}

.dmxHomeV2SeqItem h3{
  margin:8px 0 10px;
  color:var(--dmxMockText);
  font-size:16px;
  line-height:1.08;
  letter-spacing:-.04em;
}

.dmxHomeV2SeqAnswers{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.dmxHomeV2SeqAnswers span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  font-weight:950;
  border:1px solid var(--dmxMockLine);
  background:var(--dmxMockSoft);
  color:var(--dmxMockText);
}

.dmxHomeV2SeqAnswers .correct{
  background:var(--dmxMockGreenSoft);
  border-color:var(--dmxMockGreenLine);
  color:var(--dmxMockText);
}

.dmxHomeV2SeqAnswers .wrong{
  background:#fff1f3;
  border-color:#f4a6b3;
  color:#9f243b;
}

html[data-theme="dark"] .dmxHomeV2SeqAnswers .wrong{
  background:rgba(239,68,68,.14);
  border-color:rgba(244,166,179,.34);
  color:#fca5a5;
}

.dmxHomeV2SeqAnswers .selected{
  animation:dmxSeqPulse 2.6s ease-in-out infinite;
}

.dmxHomeV2SeqFeedback{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:10px;
  padding:10px;
  border-radius:15px;
  font-size:12px;
  line-height:1.22;
  font-weight:850;
}

.dmxHomeV2SeqFeedback i{
  width:24px !important;
  height:24px !important;
  flex:0 0 24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:9px;
  color:#fff !important;
  font-size:12px !important;
}

.dmxHomeV2SeqFeedback.ok{
  background:var(--dmxMockGreenSoft);
  color:var(--dmxMockText);
}

.dmxHomeV2SeqFeedback.ok i{
  background:var(--dmxMockGreenShadow);
}

.dmxHomeV2SeqFeedback.bad{
  background:#fff1f3;
  color:#9f243b;
}

.dmxHomeV2SeqFeedback.bad i{
  background:#e34d64;
}

html[data-theme="dark"] .dmxHomeV2SeqFeedback.bad{
  background:rgba(239,68,68,.14);
  color:#fca5a5;
}

.dmxHomeV2SeqFeedback strong{
  font-weight:950;
}

.dmxHomeV2CleanMock.is-sequence .dmxHomeV2CleanFlow{
  margin-top:12px !important;
}

@media (max-width:700px){
  .dmxHomeV2SeqMeta{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }

  .dmxHomeV2SeqItem h3{
    font-size:15px;
  }

  .dmxHomeV2SeqAnswers span{
    width:100%;
    justify-content:flex-start;
  }
}


/* Portada V2: reproductor de video real */
.dmxHomeV2VideoPlayer{
  margin-top:12px;
  padding:16px;
  border-radius:32px;
  background:linear-gradient(180deg,#111827,#0b1220);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 0 rgba(0,0,0,.30);
  color:#fff;
  overflow:hidden;
}

.dmxHomeV2VideoPlayerTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.dmxHomeV2VideoPlayerTop span{
  display:block;
  color:#aab4c5;
  font-size:12px;
  font-weight:950;
}

.dmxHomeV2VideoPlayerTop strong{
  display:block;
  margin-top:4px;
  color:#fff;
  font-size:18px;
  line-height:1.05;
  letter-spacing:-.04em;
}

.dmxHomeV2VideoPlayerTop > i{
  width:46px !important;
  height:46px !important;
  flex:0 0 46px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:16px;
  background:rgba(88,204,2,.16);
  color:#58cc02 !important;
  font-size:20px !important;
}

.dmxHomeV2VideoShell{
  width:100%;
  aspect-ratio:9/16;
  max-height:560px;
  border-radius:26px;
  overflow:hidden;
  background:#020617;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.dmxHomeV2DemoVideo{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#020617;
}

.dmxHomeV2VideoHint{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:12px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#aab4c5;
  font-size:12px;
  font-weight:950;
}

.dmxHomeV2VideoHint i{
  color:#58cc02 !important;
}

html[data-theme="light"] .dmxHomeV2VideoPlayer{
  background:linear-gradient(180deg,#111827,#0b1220) !important;
  color:#fff !important;
}

@media(max-width:700px){
  .dmxHomeV2VideoPlayer{
    padding:14px;
    border-radius:28px;
  }

  .dmxHomeV2VideoShell{
    max-height:520px;
    border-radius:22px;
  }
}


/* Portada V2: contenedor derecho 100% video */
.dmxHomeV2VideoOnlyWrap{
  min-height:0 !important;
  display:block !important;
  place-items:initial !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  overflow:visible !important;
}

.dmxHomeV2VideoOnlyWrap::before,
.dmxHomeV2VideoOnlyWrap::after{
  display:none !important;
  content:none !important;
}

.dmxHomeV2OnlyVideo{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:9/16 !important;
  max-height:720px !important;
  object-fit:cover !important;
  border-radius:38px !important;
  background:#020617 !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

@media(max-width:1020px){
  .dmxHomeV2OnlyVideo{
    max-width:520px !important;
    margin:0 auto !important;
  }
}

@media(max-width:700px){
  .dmxHomeV2OnlyVideo{
    border-radius:28px !important;
    max-height:none !important;
  }
}


/* QA: ocultar texto Cargando */
#qaSpinner{
  display:none !important;
  visibility:hidden !important;
}


/* ===== QA VideoGame Motion ===== */
.dmxNextQuestionBtn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  position:relative!important;
  overflow:hidden!important;
}

.dmxNextQuestionBtn i{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  transform:translateY(1px);
}

.dmxNextQuestionBtn::after{
  content:"";
  position:absolute;
  inset:-40% -70%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-70%) rotate(18deg);
  animation:dmxNextShine 2.15s ease-in-out infinite;
  pointer-events:none;
}

#qaPanel > .qa-slide.show .dmxQuestion,
#qaPanel > .qa-slide.show .dmxResult,
#qaPanel > .qa-slide.show .dmxGate{
  animation:dmxGameCardIn .34s cubic-bezier(.2,1.2,.22,1) both;
  transform-origin:50% 12%;
}

#qaPanel > .qa-slide.show .dmxQuestionTop{
  animation:dmxGameDrop .32s ease-out .04s both;
}

#qaPanel > .qa-slide.show .dmxQuestionMeter{
  animation:dmxGameMeter .55s ease-out .08s both;
}

#qaPanel > .qa-slide.show .dmxQuestionText{
  animation:dmxGameText .34s ease-out .11s both;
}

#qaPanel > .qa-slide.show [data-pick]{
  animation:dmxGameOption .32s cubic-bezier(.16,1,.3,1) both;
}

#qaPanel > .qa-slide.show [data-pick]:nth-child(1){animation-delay:.08s}
#qaPanel > .qa-slide.show [data-pick]:nth-child(2){animation-delay:.13s}
#qaPanel > .qa-slide.show [data-pick]:nth-child(3){animation-delay:.18s}
#qaPanel > .qa-slide.show [data-pick]:nth-child(4){animation-delay:.23s}
#qaPanel > .qa-slide.show [data-pick]:nth-child(5){animation-delay:.28s}

#qaPanel > .qa-slide.show .dmxFeedback{
  animation:dmxGameFeedback .34s cubic-bezier(.17,1.25,.28,1) both;
}

#qaPanel > .qa-slide.show .dmxFeedbackIcon{
  animation:dmxGameIconPop .46s cubic-bezier(.16,1.4,.28,1) .05s both;
}

#qaPanel > .qa-slide.show .dmxQuestionFoot{
  animation:dmxGameButtonUp .34s ease-out .12s both;
}

@keyframes dmxGameCardIn{
  0%{opacity:0;transform:translateY(18px) scale(.975);filter:saturate(.85) blur(2px)}
  70%{opacity:1;transform:translateY(-2px) scale(1.006);filter:saturate(1.08) blur(0)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:none}
}

@keyframes dmxGameDrop{
  0%{opacity:0;transform:translateY(-10px)}
  100%{opacity:1;transform:translateY(0)}
}

@keyframes dmxGameMeter{
  0%{opacity:0;transform:scaleX(.55);filter:brightness(1.25)}
  100%{opacity:1;transform:scaleX(1);filter:brightness(1)}
}

@keyframes dmxGameText{
  0%{opacity:0;transform:translateY(10px)}
  100%{opacity:1;transform:translateY(0)}
}

@keyframes dmxGameOption{
  0%{opacity:0;transform:translateX(-14px) scale(.985)}
  72%{opacity:1;transform:translateX(2px) scale(1.006)}
  100%{opacity:1;transform:translateX(0) scale(1)}
}

@keyframes dmxGameFeedback{
  0%{opacity:0;transform:translateY(12px) scale(.97)}
  72%{opacity:1;transform:translateY(-2px) scale(1.012)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes dmxGameIconPop{
  0%{transform:scale(.6) rotate(-8deg);filter:brightness(1.35)}
  65%{transform:scale(1.18) rotate(3deg);filter:brightness(1.15)}
  100%{transform:scale(1) rotate(0);filter:brightness(1)}
}

@keyframes dmxGameButtonUp{
  0%{opacity:0;transform:translateY(12px)}
  100%{opacity:1;transform:translateY(0)}
}

@keyframes dmxNextShine{
  0%,55%{transform:translateX(-70%) rotate(18deg)}
  78%,100%{transform:translateX(70%) rotate(18deg)}
}

@media (prefers-reduced-motion: reduce){
  #qaPanel > .qa-slide.show .dmxQuestion,
  #qaPanel > .qa-slide.show .dmxResult,
  #qaPanel > .qa-slide.show .dmxGate,
  #qaPanel > .qa-slide.show .dmxQuestionTop,
  #qaPanel > .qa-slide.show .dmxQuestionMeter,
  #qaPanel > .qa-slide.show .dmxQuestionText,
  #qaPanel > .qa-slide.show [data-pick],
  #qaPanel > .qa-slide.show .dmxFeedback,
  #qaPanel > .qa-slide.show .dmxFeedbackIcon,
  #qaPanel > .qa-slide.show .dmxQuestionFoot,
  .dmxNextQuestionBtn::after{
    animation:none!important;
  }
}


/* ===== QA Mobile Fast Motion: ligero para móviles de gama baja ===== */
@media (max-width: 800px){
  #qaPanel > .qa-slide.show .dmxQuestion,
  #qaPanel > .qa-slide.show .dmxResult,
  #qaPanel > .qa-slide.show .dmxGate{
    animation:dmxGameCardInMobile .18s ease-out both!important;
    filter:none!important;
  }

  #qaPanel > .qa-slide.show .dmxQuestionTop{
    animation:dmxGameTinyIn .14s ease-out .015s both!important;
  }

  #qaPanel > .qa-slide.show .dmxQuestionMeter{
    animation:dmxGameTinyIn .16s ease-out .025s both!important;
  }

  #qaPanel > .qa-slide.show .dmxQuestionText{
    animation:dmxGameTinyIn .16s ease-out .035s both!important;
  }

  #qaPanel > .qa-slide.show [data-pick]{
    animation:dmxGameOptionMobile .15s ease-out both!important;
  }

  #qaPanel > .qa-slide.show [data-pick]:nth-child(1){animation-delay:.025s!important}
  #qaPanel > .qa-slide.show [data-pick]:nth-child(2){animation-delay:.045s!important}
  #qaPanel > .qa-slide.show [data-pick]:nth-child(3){animation-delay:.065s!important}
  #qaPanel > .qa-slide.show [data-pick]:nth-child(4){animation-delay:.085s!important}
  #qaPanel > .qa-slide.show [data-pick]:nth-child(5){animation-delay:.105s!important}

  #qaPanel > .qa-slide.show .dmxFeedback{
    animation:dmxGameTinyIn .16s ease-out both!important;
  }

  #qaPanel > .qa-slide.show .dmxFeedbackIcon{
    animation:dmxGameIconPopMobile .18s ease-out both!important;
  }

  #qaPanel > .qa-slide.show .dmxQuestionFoot{
    animation:dmxGameTinyIn .14s ease-out .04s both!important;
  }

  .dmxNextQuestionBtn::after{
    animation:none!important;
  }
}

@keyframes dmxGameCardInMobile{
  0%{opacity:0;transform:translateY(7px) scale(.99)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes dmxGameTinyIn{
  0%{opacity:0;transform:translateY(5px)}
  100%{opacity:1;transform:translateY(0)}
}

@keyframes dmxGameOptionMobile{
  0%{opacity:0;transform:translateY(5px)}
  100%{opacity:1;transform:translateY(0)}
}

@keyframes dmxGameIconPopMobile{
  0%{transform:scale(.88)}
  100%{transform:scale(1)}
}


/* ===== Mobile tap highlight transparente ===== */
*, *::before, *::after{
  -webkit-tap-highlight-color: transparent;
}

a, button, input, textarea, select, label, summary,
[role="button"], [tabindex]{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}


/* Precios: beneficios más compactos y botones elegibles sin sombra gris */
.dmxPricing .dmxPlanList li{
  line-height:1.22!important;
  margin-bottom:7px!important;
}

.dmxPricing .dmxPlanList li i{
  margin-top:.12em!important;
}

.dmxPricing .dmxPriceCard .dmxBtn:not(.dmxPayDisabled),
.dmxPricing .dmxPriceCard .dmxPayOwnSubscribe,
.dmxPricing .dmxPriceCard .dmxDodoDirectButton{
  box-shadow:none!important;
  filter:none!important;
}

.dmxPricing .dmxPriceCard .dmxPayDisabled{
  box-shadow:inherit;
}

/* Precios: igualar el ancho del CTA Gratis con los planes de pago */
.dmxPricing .dmxPriceCard .dmxFreePlanForm,
.dmxPricing .dmxPriceCard .dmxFreePlanForm .dmxBtn{
  width:100%;
}


/* Precios: nota anual del plan gratis */
.dmxPricing .dmxFreeAnnualNote{
  display:none!important;
}

.dmxPricing.dmxBillingYearly .dmxFreeAnnualNote,
.dmxApp.dmxPricing.dmxBillingYearly .dmxFreeAnnualNote{
  display:flex!important;
}

.dmxPricing .dmxFreeAnnualNote span{
  font-weight:800;
}


/* Precios móvil: ocultar subtítulo principal solo en móviles */
@media screen and (max-width: 680px){
  section.dmxApp.dmxPricing .dmxPricingHead > p{
    display:none!important;
    visibility:hidden!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
}


/* Pregunta: cronómetro simple */
.dmxQuestionTimerSep{
  opacity:.65;
  margin:0 2px;
}

.dmxQuestionTimer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  font-variant-numeric:tabular-nums;
  font-weight:900;
  color:var(--dmx-muted, #64748b);
}


/* Modo práctica: contador regresivo visual */
.dmxPracticeTimerCard{
  --dmx-practice-progress:100%;
  width:min(260px, 78vw);
  margin:18px auto 22px;
  padding:14px;
  border-radius:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.9), rgba(255,255,255,.46) 42%, rgba(255,255,255,.18) 75%),
    linear-gradient(135deg, rgba(59,130,246,.18), rgba(14,165,233,.10));
  border:1px solid rgba(59,130,246,.24);
  box-shadow:0 18px 48px rgba(15,23,42,.16);
  position:relative;
  overflow:hidden;
}

.dmxPracticeTimerCard::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:conic-gradient(from 0deg, transparent, rgba(59,130,246,.22), transparent 35%);
  animation:dmxPracticeTimerSpin 3.5s linear infinite;
  pointer-events:none;
}

.dmxPracticeTimerRing{
  width:148px;
  height:148px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
  background:
    radial-gradient(circle, var(--dmx-card, #fff) 0 58%, transparent 59%),
    conic-gradient(#2563eb var(--dmx-practice-progress), rgba(148,163,184,.22) 0);
  box-shadow:
    inset 0 0 0 8px rgba(255,255,255,.78),
    0 18px 34px rgba(37,99,235,.22);
  animation:dmxPracticeTimerPulse 1s ease-in-out infinite;
}

.dmxPracticeTimerNumber{
  font-size:64px;
  line-height:.9;
  font-weight:1000;
  letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;
  color:#1d4ed8;
  text-shadow:0 8px 20px rgba(37,99,235,.20);
}

.dmxPracticeTimerUnit{
  margin-top:6px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(30,64,175,.72);
}

.dmxPracticeTimerLabel{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:900;
  text-align:center;
  color:var(--dmx-muted, #64748b);
}

.dmxPracticeTimerCard.is-warning{
  border-color:rgba(245,158,11,.46);
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.9), rgba(255,255,255,.44) 42%, rgba(255,255,255,.16) 75%),
    linear-gradient(135deg, rgba(245,158,11,.26), rgba(251,191,36,.12));
}

.dmxPracticeTimerCard.is-warning .dmxPracticeTimerRing{
  background:
    radial-gradient(circle, var(--dmx-card, #fff) 0 58%, transparent 59%),
    conic-gradient(#f59e0b var(--dmx-practice-progress), rgba(148,163,184,.22) 0);
  box-shadow:
    inset 0 0 0 8px rgba(255,255,255,.78),
    0 18px 34px rgba(245,158,11,.24);
}

.dmxPracticeTimerCard.is-warning .dmxPracticeTimerNumber{ color:#d97706; }

.dmxPracticeTimerCard.is-danger{
  border-color:rgba(239,68,68,.55);
  animation:dmxPracticeTimerShake .28s linear infinite;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.92), rgba(255,255,255,.42) 42%, rgba(255,255,255,.13) 75%),
    linear-gradient(135deg, rgba(239,68,68,.30), rgba(248,113,113,.12));
}

.dmxPracticeTimerCard.is-danger .dmxPracticeTimerRing{
  background:
    radial-gradient(circle, var(--dmx-card, #fff) 0 58%, transparent 59%),
    conic-gradient(#ef4444 var(--dmx-practice-progress), rgba(148,163,184,.22) 0);
  box-shadow:
    inset 0 0 0 8px rgba(255,255,255,.78),
    0 18px 34px rgba(239,68,68,.28);
}

.dmxPracticeTimerCard.is-danger .dmxPracticeTimerNumber{
  color:#dc2626;
  transform:scale(1.06);
}

.dmxPracticeTimerCard.is-timeout{
  filter:grayscale(.25);
  opacity:.86;
}

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

@keyframes dmxPracticeTimerPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.035); }
}

@keyframes dmxPracticeTimerShake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-2px); }
  75%{ transform:translateX(2px); }
}

[data-theme="dark"] .dmxPracticeTimerCard{
  background:
    radial-gradient(circle at 50% 35%, rgba(30,41,59,.9), rgba(30,41,59,.46) 42%, rgba(15,23,42,.18) 75%),
    linear-gradient(135deg, rgba(59,130,246,.22), rgba(14,165,233,.12));
}

[data-theme="dark"] .dmxPracticeTimerRing{
  background:
    radial-gradient(circle, #0f172a 0 58%, transparent 59%),
    conic-gradient(#60a5fa var(--dmx-practice-progress), rgba(148,163,184,.20) 0);
}

@media (max-width:680px){
  .dmxPracticeTimerCard{
    width:min(220px, 82vw);
    margin:14px auto 18px;
    border-radius:24px;
    padding:12px;
  }

  .dmxPracticeTimerRing{
    width:124px;
    height:124px;
  }

  .dmxPracticeTimerNumber{
    font-size:54px;
  }

  .dmxPracticeTimerLabel{
    font-size:12px;
  }
}

/* ===== PRACTICE COUNTDOWN COMPACT ===== */
[data-practice-question] .dmxQuestionTop > div:first-child{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}

[data-practice-question] .dmxQuestionTimerSep{
  display:none!important;
}

[data-practice-question] .dmxPracticeCountdown{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  vertical-align:middle!important;
  min-width:64px!important;
  height:30px!important;
  padding:0 12px!important;
  margin-left:4px!important;
  border-radius:999px!important;
  font-size:16px!important;
  font-weight:900!important;
  line-height:1!important;
  color:#fff!important;
  background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%)!important;
  box-shadow:0 4px 0 rgba(29,78,216,.28)!important;
  letter-spacing:.01em!important;
}

[data-practice-question] .dmxPracticeCountdown::before{
  content:"⏱";
  font-size:13px!important;
  line-height:1!important;
  margin-right:6px!important;
  opacity:.92!important;
}

[data-practice-question] .dmxPracticeCountdown::after{
  content:"s";
  font-size:12px!important;
  line-height:1!important;
  margin-left:3px!important;
  opacity:.88!important;
}

@media (max-width:680px){
  [data-practice-question] .dmxQuestionTop{
    gap:6px!important;
  }

  [data-practice-question] .dmxQuestionTop > div:first-child{
    gap:6px!important;
  }

  [data-practice-question] .dmxPracticeCountdown{
    min-width:58px!important;
    height:26px!important;
    padding:0 10px!important;
    font-size:14px!important;
    box-shadow:0 3px 0 rgba(29,78,216,.24)!important;
  }

  [data-practice-question] .dmxPracticeCountdown::before{
    font-size:11px!important;
    margin-right:5px!important;
  }

  [data-practice-question] .dmxPracticeCountdown::after{
    font-size:11px!important;
    margin-left:2px!important;
  }
}
/* ===== /PRACTICE COUNTDOWN COMPACT ===== */

/* ===== PRACTICE COUNTDOWN HORIZONTAL OVERRIDE ===== */
.dmxPracticeTimerCard{
  width:100%!important;
  max-width:100%!important;
  min-height:0!important;
  margin:8px 0 12px!important;
  padding:9px 12px!important;
  border-radius:18px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  box-shadow:0 8px 22px rgba(15,23,42,.08)!important;
  overflow:hidden!important;
}

.dmxPracticeTimerCard::before{
  display:none!important;
  content:none!important;
}

.dmxPracticeTimerRing{
  width:auto!important;
  height:36px!important;
  min-width:86px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  flex-direction:row!important;
  gap:4px!important;
  background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;
  box-shadow:0 4px 0 rgba(37,99,235,.22)!important;
  animation:none!important;
}

.dmxPracticeTimerNumber{
  font-size:24px!important;
  line-height:1!important;
  letter-spacing:-.03em!important;
  color:#fff!important;
  text-shadow:none!important;
}

.dmxPracticeTimerUnit{
  margin:0!important;
  font-size:11px!important;
  letter-spacing:0!important;
  text-transform:none!important;
  color:rgba(255,255,255,.86)!important;
}

.dmxPracticeTimerUnit::before{
  content:"s";
}

.dmxPracticeTimerUnit{
  font-size:0!important;
}

.dmxPracticeTimerUnit::before{
  font-size:11px!important;
}

.dmxPracticeTimerLabel{
  flex:1!important;
  justify-content:flex-start!important;
  text-align:left!important;
  font-size:12px!important;
  line-height:1.2!important;
}

.dmxPracticeTimerCard.is-warning .dmxPracticeTimerRing{
  background:linear-gradient(135deg,#f59e0b,#f97316)!important;
  box-shadow:0 4px 0 rgba(217,119,6,.22)!important;
}

.dmxPracticeTimerCard.is-danger{
  animation:none!important;
}

.dmxPracticeTimerCard.is-danger .dmxPracticeTimerRing{
  background:linear-gradient(135deg,#ef4444,#dc2626)!important;
  box-shadow:0 4px 0 rgba(220,38,38,.25)!important;
}

.dmxPracticeTimerCard.is-danger .dmxPracticeTimerNumber{
  transform:none!important;
  color:#fff!important;
}

@media (max-width:680px){
  .dmxPracticeTimerCard{
    margin:6px 0 10px!important;
    padding:8px 10px!important;
    border-radius:16px!important;
    gap:8px!important;
  }

  .dmxPracticeTimerRing{
    height:32px!important;
    min-width:72px!important;
    padding:0 11px!important;
  }

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

  .dmxPracticeTimerLabel{
    font-size:11px!important;
  }
}
/* ===== /PRACTICE COUNTDOWN HORIZONTAL OVERRIDE ===== */

/* ===== PRACTICE COUNTDOWN SHRINK BAR ===== */
.dmxPracticeTimerCard{
  position:relative!important;
  padding-bottom:14px!important;
}

.dmxPracticeTimerCard::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:12px!important;
  right:12px!important;
  bottom:6px!important;
  top:auto!important;
  inset:auto 12px 6px 12px!important;
  height:5px!important;
  border-radius:999px!important;
  background:rgba(148,163,184,.22)!important;
  transform:none!important;
  animation:none!important;
  pointer-events:none!important;
}

.dmxPracticeTimerCard::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:12px!important;
  bottom:6px!important;
  height:5px!important;
  width:var(--dmx-practice-progress, 100%)!important;
  max-width:calc(100% - 24px)!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#2563eb,#0ea5e9)!important;
  box-shadow:0 0 12px rgba(37,99,235,.35)!important;
  transition:width .22s linear, background .18s ease, box-shadow .18s ease!important;
  pointer-events:none!important;
}

.dmxPracticeTimerCard.is-warning::after{
  background:linear-gradient(90deg,#f59e0b,#f97316)!important;
  box-shadow:0 0 14px rgba(245,158,11,.42)!important;
}

.dmxPracticeTimerCard.is-danger::after{
  background:linear-gradient(90deg,#ef4444,#dc2626)!important;
  box-shadow:0 0 16px rgba(239,68,68,.5)!important;
}

.dmxPracticeTimerCard.is-timeout::after{
  width:0!important;
  box-shadow:none!important;
}

@media (max-width:680px){
  .dmxPracticeTimerCard{
    padding-bottom:13px!important;
  }

  .dmxPracticeTimerCard::before,
  .dmxPracticeTimerCard::after{
    left:10px!important;
    bottom:5px!important;
    height:4px!important;
    max-width:calc(100% - 20px)!important;
  }
}
/* ===== /PRACTICE COUNTDOWN SHRINK BAR ===== */

/* ===== PRACTICE COUNTDOWN SIMPLE BAR ===== */
.dmxPracticeTimerBar{
  --dmx-practice-progress:100%;
  position:relative;
  width:100%;
  height:34px;
  margin:8px 0 12px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(148,163,184,.18);
  border:1px solid rgba(148,163,184,.22);
  box-shadow:inset 0 1px 2px rgba(15,23,42,.08);
}

.dmxPracticeTimerBar::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--dmx-practice-progress, 100%);
  border-radius:999px;
  background:linear-gradient(90deg,#2563eb,#0ea5e9);
  box-shadow:0 0 14px rgba(37,99,235,.32);
  transition:width .22s linear, background .18s ease, box-shadow .18s ease;
}

.dmxPracticeTimerBar span{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  font-size:18px;
  line-height:1;
  font-weight:1000;
  font-variant-numeric:tabular-nums;
  color:#fff;
  text-shadow:0 1px 3px rgba(15,23,42,.35);
}

.dmxPracticeTimerBar.is-warning::before{
  background:linear-gradient(90deg,#f59e0b,#f97316);
  box-shadow:0 0 14px rgba(245,158,11,.42);
}

.dmxPracticeTimerBar.is-danger::before{
  background:linear-gradient(90deg,#ef4444,#dc2626);
  box-shadow:0 0 16px rgba(239,68,68,.48);
}

.dmxPracticeTimerBar.is-timeout::before{
  width:0!important;
  box-shadow:none;
}

@media (max-width:680px){
  .dmxPracticeTimerBar{
    height:28px;
    margin:6px 0 10px;
  }

  .dmxPracticeTimerBar span{
    font-size:15px;
  }
}
/* ===== /PRACTICE COUNTDOWN SIMPLE BAR ===== */

/* ===== PRACTICE REPORT ===== */
.dmxPracticeReport{
  overflow:hidden;
}

.dmxPracticeReportHead{
  align-items:flex-start;
  gap:14px;
}

.dmxPracticeReportSummary{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:10px;
  margin:16px 0 18px;
}

.dmxPracticeReportSummary > div{
  border:1px solid rgba(148,163,184,.20);
  background:rgba(148,163,184,.08);
  border-radius:16px;
  padding:12px;
}

.dmxPracticeReportSummary span{
  display:block;
  font-size:12px;
  font-weight:800;
  color:var(--dmx-muted, #64748b);
  margin-bottom:4px;
}

.dmxPracticeReportSummary strong{
  font-size:20px;
  font-weight:1000;
  font-variant-numeric:tabular-nums;
}

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

.dmxPracticeReportItem{
  border:1px solid rgba(148,163,184,.20);
  border-radius:18px;
  padding:14px;
  background:rgba(255,255,255,.58);
}

.dmxPracticeReportItem.ok{
  border-color:rgba(34,197,94,.28);
  background:linear-gradient(135deg, rgba(34,197,94,.10), rgba(255,255,255,.60));
}

.dmxPracticeReportItem.bad{
  border-color:rgba(239,68,68,.28);
  background:linear-gradient(135deg, rgba(239,68,68,.10), rgba(255,255,255,.60));
}

.dmxPracticeReportItem.timeout{
  border-color:rgba(245,158,11,.34);
  background:linear-gradient(135deg, rgba(245,158,11,.12), rgba(255,255,255,.60));
}

.dmxPracticeReportItemTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}

.dmxPracticeReportItemTop strong{
  display:block;
  font-size:15px;
  font-weight:1000;
}

.dmxPracticeReportItemTop span{
  display:block;
  font-size:12px;
  font-weight:800;
  color:var(--dmx-muted, #64748b);
  margin-top:2px;
}

.dmxPracticeReportBadge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:1000;
  background:rgba(148,163,184,.12);
}

.dmxPracticeReportItem.ok .dmxPracticeReportBadge{ color:#16a34a; background:rgba(34,197,94,.12); }
.dmxPracticeReportItem.bad .dmxPracticeReportBadge{ color:#dc2626; background:rgba(239,68,68,.12); }
.dmxPracticeReportItem.timeout .dmxPracticeReportBadge{ color:#d97706; background:rgba(245,158,11,.14); }

.dmxPracticeReportQuestion{
  font-size:15px;
  font-weight:900;
  line-height:1.35;
  margin-bottom:12px;
}

.dmxPracticeReportAnswers{
  display:grid;
  grid-template-columns:1fr 1fr 140px;
  gap:10px;
}

.dmxPracticeReportAnswers > div{
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px;
  padding:10px;
  background:rgba(255,255,255,.58);
}

.dmxPracticeReportAnswers span,
.dmxPracticeReportExplanation span{
  display:block;
  font-size:11px;
  font-weight:900;
  color:var(--dmx-muted, #64748b);
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.dmxPracticeReportAnswers strong{
  display:block;
  font-size:13px;
  line-height:1.3;
  font-weight:900;
}

.dmxPracticeReportAnswers .ok strong{ color:#16a34a; }
.dmxPracticeReportAnswers .bad strong{ color:#dc2626; }

.dmxPracticeReportExplanation{
  margin-top:10px;
  border-radius:14px;
  padding:10px 12px;
  background:rgba(15,23,42,.04);
}

.dmxPracticeReportExplanation p{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:var(--dmx-text, #0f172a);
}

[data-theme="dark"] .dmxPracticeReportItem,
[data-theme="dark"] .dmxPracticeReportAnswers > div{
  background:rgba(15,23,42,.42);
}

[data-theme="dark"] .dmxPracticeReportExplanation{
  background:rgba(255,255,255,.05);
}

@media (max-width:900px){
  .dmxPracticeReportSummary{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

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

@media (max-width:680px){
  .dmxPracticeReportHead{
    gap:8px;
  }

  .dmxPracticeReportSummary{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:7px;
    margin:10px 0 12px;
  }

  .dmxPracticeReportSummary > div{
    border-radius:12px;
    padding:8px 9px;
  }

  .dmxPracticeReportSummary span{
    font-size:10px;
    margin-bottom:2px;
  }

  .dmxPracticeReportSummary strong{
    font-size:16px;
  }

  .dmxPracticeReportList{
    gap:8px;
  }

  .dmxPracticeReportItem{
    border-radius:14px;
    padding:10px;
  }

  .dmxPracticeReportItemTop{
    margin-bottom:7px;
  }

  .dmxPracticeReportItemTop strong{
    font-size:13px;
  }

  .dmxPracticeReportItemTop span{
    font-size:10px;
  }

  .dmxPracticeReportBadge{
    padding:5px 8px;
    font-size:10px;
  }

  .dmxPracticeReportQuestion{
    font-size:13px;
    line-height:1.28;
    margin-bottom:8px;
  }

  .dmxPracticeReportAnswers{
    gap:7px;
  }

  .dmxPracticeReportAnswers > div{
    border-radius:11px;
    padding:8px;
  }

  .dmxPracticeReportAnswers span,
  .dmxPracticeReportExplanation span{
    font-size:9px;
    margin-bottom:3px;
  }

  .dmxPracticeReportAnswers strong,
  .dmxPracticeReportExplanation p{
    font-size:12px;
    line-height:1.28;
  }

  .dmxPracticeReportExplanation{
    margin-top:7px;
    border-radius:11px;
    padding:8px;
  }
}
/* ===== /PRACTICE REPORT ===== */

/* ===== PRACTICE REPORTS LIST ===== */
.dmxPracticeReportsList{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.dmxPracticeReportRow{
  position:relative;
  display:grid;
  grid-template-columns:minmax(170px, 1fr) minmax(300px, 1.4fr) 34px;
  gap:12px;
  align-items:center;
  padding:14px 14px 18px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.58);
  text-decoration:none;
  color:inherit;
  overflow:hidden;
}

.dmxPracticeReportRow:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(15,23,42,.10);
}

.dmxPracticeReportRowMain strong{
  display:block;
  font-size:15px;
  font-weight:1000;
}

.dmxPracticeReportRowMain span{
  display:block;
  margin-top:3px;
  font-size:12px;
  font-weight:800;
  color:var(--dmx-muted, #64748b);
}

.dmxPracticeReportRowStats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}

.dmxPracticeReportRowStats span{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:6px 9px;
  background:rgba(148,163,184,.12);
  font-size:12px;
  font-weight:900;
  color:var(--dmx-muted, #64748b);
}

.dmxPracticeReportRowStats b{
  color:var(--dmx-text, #0f172a);
}

.dmxPracticeReportRowGo{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--dmx-muted, #64748b);
}

.dmxPracticeReportRowMeter{
  --p:0%;
  position:absolute;
  left:14px;
  right:14px;
  bottom:8px;
  height:5px;
  border-radius:999px;
  background:rgba(148,163,184,.16);
  overflow:hidden;
}

.dmxPracticeReportRowMeter i{
  display:block;
  width:var(--p);
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#2563eb,#0ea5e9);
}

.dmxPracticeReportRow.complete .dmxPracticeReportRowMeter i{
  background:linear-gradient(90deg,#16a34a,#22c55e);
}

.dmxPracticeReportRow.stopped .dmxPracticeReportRowMeter i,
.dmxPracticeReportRow.incomplete .dmxPracticeReportRowMeter i{
  background:linear-gradient(90deg,#f59e0b,#f97316);
}

[data-theme="dark"] .dmxPracticeReportRow{
  background:rgba(15,23,42,.44);
}

@media (max-width:760px){
  .dmxPracticeReportRow{
    grid-template-columns:1fr 24px;
    gap:8px;
    padding:11px 11px 17px;
    border-radius:14px;
  }

  .dmxPracticeReportRowStats{
    grid-column:1 / -1;
    justify-content:flex-start;
    gap:5px;
  }

  .dmxPracticeReportRowStats span{
    font-size:10px;
    padding:5px 7px;
  }

  .dmxPracticeReportRowMain strong{
    font-size:13px;
  }

  .dmxPracticeReportRowMain span{
    font-size:10px;
  }

  .dmxPracticeReportRowMeter{
    left:11px;
    right:11px;
    bottom:6px;
    height:4px;
  }
}
/* ===== /PRACTICE REPORTS LIST ===== */

/* ===== PRACTICE REPORTS MOBILE FIX ===== */
@media (max-width:760px){
  .dmxPracticeReportRow{
    display:block!important;
    position:relative!important;
    padding:12px 12px 18px!important;
    border-radius:15px!important;
  }

  .dmxPracticeReportRowMain{
    padding-right:34px!important;
  }

  .dmxPracticeReportRowMain strong{
    font-size:14px!important;
    line-height:1.15!important;
  }

  .dmxPracticeReportRowMain span{
    font-size:11px!important;
    line-height:1.25!important;
    margin-top:4px!important;
  }

  .dmxPracticeReportRowGo{
    position:absolute!important;
    top:12px!important;
    right:12px!important;
    width:28px!important;
    height:28px!important;
    border-radius:999px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:rgba(148,163,184,.12)!important;
    font-size:15px!important;
  }

  .dmxPracticeReportRowStats{
    display:grid!important;
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
    gap:6px!important;
    justify-content:stretch!important;
    margin-top:10px!important;
  }

  .dmxPracticeReportRowStats span{
    width:100%!important;
    min-width:0!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:10px!important;
    line-height:1!important;
    padding:7px 6px!important;
  }

  .dmxPracticeReportRowMeter{
    left:12px!important;
    right:12px!important;
    bottom:7px!important;
    height:5px!important;
  }
}

@media (max-width:380px){
  .dmxPracticeReportRow{
    padding:10px 10px 17px!important;
  }

  .dmxPracticeReportRowGo{
    top:10px!important;
    right:10px!important;
    width:26px!important;
    height:26px!important;
    font-size:14px!important;
  }

  .dmxPracticeReportRowStats{
    gap:5px!important;
  }

  .dmxPracticeReportRowStats span{
    font-size:9px!important;
    padding:6px 5px!important;
  }

  .dmxPracticeReportRowMeter{
    left:10px!important;
    right:10px!important;
    bottom:6px!important;
    height:4px!important;
  }
}
/* ===== /PRACTICE REPORTS MOBILE FIX ===== */

/* ===== PRACTICE REPORT CTA + DARK FIX ===== */
.dmxPracticeCta{
  margin-top:18px;
  padding:18px;
  border-radius:22px;
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid rgba(37,99,235,.18);
  background:
    radial-gradient(circle at 15% 20%, rgba(59,130,246,.18), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(239,246,255,.84));
  box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.dmxPracticeCtaIcon{
  width:48px;
  height:48px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#0ea5e9);
  box-shadow:0 10px 22px rgba(37,99,235,.22);
  font-size:20px;
}

.dmxPracticeCtaText{
  flex:1;
  min-width:0;
}

.dmxPracticeCtaText h3{
  margin:0 0 4px;
  font-size:17px;
  line-height:1.2;
  font-weight:1000;
  color:var(--dmx-text, #0f172a);
}

.dmxPracticeCtaText p{
  margin:0;
  font-size:13px;
  line-height:1.4;
  font-weight:750;
  color:var(--dmx-muted, #64748b);
}

[data-theme="dark"] .dmxPracticeReport,
[data-theme="dark"] .dmxPracticeReports{
  color:#e5e7eb;
}

[data-theme="dark"] .dmxPracticeReportSummary > div{
  background:rgba(255,255,255,.06);
  border-color:rgba(148,163,184,.24);
}

[data-theme="dark"] .dmxPracticeReportSummary span,
[data-theme="dark"] .dmxPracticeReportItemTop span,
[data-theme="dark"] .dmxPracticeReportAnswers span,
[data-theme="dark"] .dmxPracticeReportExplanation span,
[data-theme="dark"] .dmxPracticeReportRowMain span,
[data-theme="dark"] .dmxPracticeReportRowStats span{
  color:#cbd5e1;
}

[data-theme="dark"] .dmxPracticeReportSummary strong,
[data-theme="dark"] .dmxPracticeReportQuestion,
[data-theme="dark"] .dmxPracticeReportAnswers strong,
[data-theme="dark"] .dmxPracticeReportItemTop strong,
[data-theme="dark"] .dmxPracticeReportRowMain strong,
[data-theme="dark"] .dmxPracticeReportRowStats b{
  color:#f8fafc;
}

[data-theme="dark"] .dmxPracticeReportItem{
  background:rgba(15,23,42,.78);
  border-color:rgba(148,163,184,.24);
}

[data-theme="dark"] .dmxPracticeReportItem.ok{
  background:linear-gradient(135deg, rgba(34,197,94,.16), rgba(15,23,42,.82));
  border-color:rgba(34,197,94,.34);
}

[data-theme="dark"] .dmxPracticeReportItem.bad{
  background:linear-gradient(135deg, rgba(239,68,68,.17), rgba(15,23,42,.82));
  border-color:rgba(239,68,68,.36);
}

[data-theme="dark"] .dmxPracticeReportItem.timeout{
  background:linear-gradient(135deg, rgba(245,158,11,.18), rgba(15,23,42,.82));
  border-color:rgba(245,158,11,.38);
}

[data-theme="dark"] .dmxPracticeReportAnswers > div{
  background:rgba(2,6,23,.42);
  border-color:rgba(148,163,184,.22);
}

[data-theme="dark"] .dmxPracticeReportExplanation{
  background:rgba(2,6,23,.36);
}

[data-theme="dark"] .dmxPracticeReportExplanation p{
  color:#e5e7eb;
}

[data-theme="dark"] .dmxPracticeReportRow{
  background:rgba(15,23,42,.78);
  border-color:rgba(148,163,184,.24);
}

[data-theme="dark"] .dmxPracticeReportRow:hover{
  box-shadow:0 14px 32px rgba(0,0,0,.28);
}

[data-theme="dark"] .dmxPracticeReportRowStats span,
[data-theme="dark"] .dmxPracticeReportRowGo{
  background:rgba(255,255,255,.07)!important;
}

[data-theme="dark"] .dmxPracticeCta{
  border-color:rgba(96,165,250,.30);
  background:
    radial-gradient(circle at 15% 20%, rgba(59,130,246,.24), transparent 35%),
    linear-gradient(135deg, rgba(15,23,42,.92), rgba(30,41,59,.86));
  box-shadow:0 14px 34px rgba(0,0,0,.26);
}

[data-theme="dark"] .dmxPracticeCtaText h3{
  color:#f8fafc;
}

[data-theme="dark"] .dmxPracticeCtaText p{
  color:#cbd5e1;
}

@media (max-width:680px){
  .dmxPracticeCta{
    padding:13px;
    border-radius:17px;
    gap:10px;
    align-items:flex-start;
  }

  .dmxPracticeCtaIcon{
    width:40px;
    height:40px;
    border-radius:14px;
    font-size:17px;
  }

  .dmxPracticeCtaText h3{
    font-size:14px;
  }

  .dmxPracticeCtaText p{
    font-size:12px;
  }

  .dmxPracticeCta .dmxBtn{
    width:100%;
    justify-content:center;
    margin-top:4px;
  }

  .dmxPracticeCta{
    flex-wrap:wrap;
  }

  .dmxPracticeCtaText{
    flex:1 1 calc(100% - 52px);
  }
}
/* ===== /PRACTICE REPORT CTA + DARK FIX ===== */

/* ===== NIVELES PRACTICE BUTTON + POPUP ===== */
.dmxMapHeadActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.dmxMapHeadActions .dmxMapHeadBtn{
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:46px!important;
  padding:12px 18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  white-space:nowrap!important;
  line-height:1!important;
  text-align:center!important;
}

.dmxMapHeadActions .dmxMapHeadBtn span{
  display:inline!important;
  white-space:nowrap!important;
}

.dmxMapHeadActions button.dmxBtn{
  border:0;
  cursor:pointer;
  font-family:inherit;
}

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

.dmxPracticePremiumModal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,6,23,.68);
  backdrop-filter:blur(8px);
}

.dmxPracticePremiumModal .dmxStatsPaywallPopup{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  width:min(760px, 100%)!important;
  max-height:calc(100vh - 36px);
  overflow:auto;
}

.dmxPracticePremiumClose{
  position:absolute;
  top:14px;
  right:14px;
  z-index:3;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.dmxPracticePremiumClose:hover{
  background:rgba(255,255,255,.2);
}

@media (max-width:760px){
  .dmxMapHeadActions{
    width:100%;
    justify-content:stretch;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .dmxMapHeadActions .dmxMapHeadBtn{
    width:100%!important;
    min-height:42px!important;
    padding:11px 10px!important;
    font-size:13px!important;
  }
}

@media (max-width:380px){
  .dmxMapHeadActions{
    grid-template-columns:1fr;
  }
}
/* ===== /NIVELES PRACTICE BUTTON + POPUP ===== */

/* ===== NIVELES PRACTICE INLINE GATE ===== */
.dmxPracticeGate[hidden]{
  display:none!important;
}

.dmxPracticeGate{
  position:relative;
  margin:16px 0 18px;
  padding:24px;
  border-radius:24px;
  overflow:hidden;
  text-align:center;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 18% 0%, rgba(59,130,246,.38), transparent 38%),
    radial-gradient(circle at 96% 0%, rgba(245,158,11,.22), transparent 34%),
    linear-gradient(135deg, rgba(18,24,38,.96), rgba(35,48,85,.96));
  box-shadow:0 22px 58px rgba(2,6,23,.28);
}

.dmxPracticeGate::before{
  content:"";
  position:absolute;
  inset:-80px;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 10%, rgba(58,130,255,.35), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(255,196,86,.20), transparent 30%);
}

.dmxPracticeGate > *{
  position:relative;
  z-index:1;
}

.dmxPracticeGateClose{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.12);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.dmxPracticeGateClose:hover{
  background:rgba(255,255,255,.20);
}

.dmxPracticeGateBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.20);
  font-weight:900;
  letter-spacing:.04em;
  margin-bottom:12px;
}

.dmxPracticeGate h2{
  margin:0 0 10px;
  font-size:clamp(26px, 4vw, 42px);
  line-height:1.05;
  font-weight:1000;
  color:#fff;
}

.dmxPracticeGate p{
  max-width:720px;
  margin:0 auto 18px;
  font-size:clamp(15px, 2vw, 19px);
  line-height:1.42;
  color:rgba(255,255,255,.88);
}

.dmxPracticeGateFeatures{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin:18px 0;
}

.dmxPracticeGateFeatures span{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:54px;
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  font-weight:900;
  color:#fff;
}

.dmxPracticeGateActions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}

.dmxPracticeGateActions .dmxBtn{
  min-width:220px;
}

@media (max-width:720px){
  .dmxPracticeGate{
    padding:20px 14px;
    border-radius:20px;
    margin:12px 0 16px;
  }

  .dmxPracticeGate h2{
    font-size:26px;
    padding:0 30px;
  }

  .dmxPracticeGate p{
    font-size:14px;
  }

  .dmxPracticeGateFeatures{
    grid-template-columns:1fr;
    gap:8px;
  }

  .dmxPracticeGateFeatures span{
    min-height:44px;
    font-size:13px;
  }

  .dmxPracticeGateActions .dmxBtn{
    width:100%;
    min-width:0;
  }
}
/* ===== /NIVELES PRACTICE INLINE GATE ===== */

/* ===== NIVELES PRACTICE FLOATING GATE ===== */
body.dmxModalOpen{
  overflow:hidden;
}

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

.dmxPracticeGateOverlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,6,23,.74);
  backdrop-filter:blur(8px);
  overflow:hidden;
}

.dmxPracticeGate{
  position:relative;
  width:min(760px, 100%);
  max-height:calc(100dvh - 36px);
  padding:28px 24px;
  border-radius:28px;
  overflow:hidden;
  text-align:center;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 18% 0%, rgba(59,130,246,.38), transparent 38%),
    radial-gradient(circle at 96% 0%, rgba(245,158,11,.22), transparent 34%),
    linear-gradient(135deg, rgba(18,24,38,.98), rgba(35,48,85,.98));
  box-shadow:0 28px 90px rgba(0,0,0,.46);
}

.dmxPracticeGate::before{
  content:"";
  position:absolute;
  inset:-80px;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 10%, rgba(58,130,255,.34), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(255,196,86,.20), transparent 30%);
}

.dmxPracticeGate > *{
  position:relative;
  z-index:1;
}

.dmxPracticeGateClose{
  position:absolute;
  top:14px;
  right:14px;
  z-index:3;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.dmxPracticeGateClose:hover{
  background:rgba(255,255,255,.20);
}

.dmxPracticeGateBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.20);
  font-weight:900;
  letter-spacing:.04em;
  margin-bottom:12px;
}

.dmxPracticeGate h2{
  margin:0 0 10px;
  padding:0 34px;
  font-size:clamp(28px, 4.2vw, 44px);
  line-height:1.05;
  font-weight:1000;
  color:#fff;
}

.dmxPracticeGate p{
  max-width:660px;
  margin:0 auto 18px;
  font-size:clamp(15px, 1.9vw, 19px);
  line-height:1.42;
  color:rgba(255,255,255,.88);
}

.dmxPracticeGateFeatures{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin:18px 0;
}

.dmxPracticeGateFeatures span{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:54px;
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  font-weight:900;
  color:#fff;
}

.dmxPracticeGateActions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}

.dmxPracticeGateActions .dmxBtn{
  min-width:220px;
}

@media (max-width:720px){
  .dmxPracticeGateOverlay{
    padding:12px;
    align-items:center;
  }

  .dmxPracticeGate{
    width:100%;
    padding:22px 14px 16px;
    border-radius:22px;
  }

  .dmxPracticeGateClose{
    width:34px;
    height:34px;
    top:10px;
    right:10px;
  }

  .dmxPracticeGate h2{
    font-size:26px;
    padding:0 34px;
  }

  .dmxPracticeGate p{
    font-size:14px;
    margin-bottom:14px;
  }

  .dmxPracticeGateFeatures{
    grid-template-columns:1fr;
    gap:8px;
    margin:14px 0;
  }

  .dmxPracticeGateFeatures span{
    min-height:42px;
    font-size:13px;
    padding:9px;
  }

  .dmxPracticeGateActions{
    gap:8px;
  }

  .dmxPracticeGateActions .dmxBtn{
    width:100%;
    min-width:0;
  }
}

@media (max-width:380px){
  .dmxPracticeGate h2{
    font-size:23px;
  }

  .dmxPracticeGateBadge{
    font-size:12px;
    padding:7px 12px;
  }
}
/* ===== /NIVELES PRACTICE FLOATING GATE ===== */

/* ===== PRACTICE GATE ACTIONS 2 COL ===== */
.dmxPracticeGateActions{
  display:grid!important;
  grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  gap:12px!important;
  width:100%!important;
  max-width:680px!important;
  margin:18px auto 0!important;
}

.dmxPracticeGateActions .dmxBtn{
  width:100%!important;
  min-width:0!important;
  justify-content:center!important;
  white-space:nowrap!important;
  text-align:center!important;
}

@media (max-width:520px){
  .dmxPracticeGateActions{
    gap:8px!important;
  }

  .dmxPracticeGateActions .dmxBtn{
    padding-left:10px!important;
    padding-right:10px!important;
    font-size:13px!important;
  }
}

@media (max-width:360px){
  .dmxPracticeGateActions{
    grid-template-columns:1fr!important;
  }
}
/* ===== /PRACTICE GATE ACTIONS 2 COL ===== */

/* ===== PAYWALL ACTIONS 2 COL FINAL ===== */
.dmxStatsPaywallPopup .dmxStatsPaywallActions,
.dmxPracticeGate .dmxPracticeGateActions{
  display:grid!important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)!important;
  gap:12px!important;
  width:100%!important;
  max-width:720px!important;
  margin:18px auto 0!important;
  align-items:stretch!important;
  justify-content:stretch!important;
}

.dmxStatsPaywallPopup .dmxStatsPaywallActions > *,
.dmxPracticeGate .dmxPracticeGateActions > *{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
}

.dmxStatsPaywallPopup .dmxStatsPaywallActions .dmxBtn,
.dmxPracticeGate .dmxPracticeGateActions .dmxBtn{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  text-align:center!important;
  white-space:nowrap!important;
  padding-left:12px!important;
  padding-right:12px!important;
}

@media (max-width:520px){
  .dmxStatsPaywallPopup .dmxStatsPaywallActions,
  .dmxPracticeGate .dmxPracticeGateActions{
    gap:8px!important;
  }

  .dmxStatsPaywallPopup .dmxStatsPaywallActions .dmxBtn,
  .dmxPracticeGate .dmxPracticeGateActions .dmxBtn{
    font-size:13px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
}

@media (max-width:340px){
  .dmxStatsPaywallPopup .dmxStatsPaywallActions,
  .dmxPracticeGate .dmxPracticeGateActions{
    grid-template-columns:1fr!important;
  }
}
/* ===== /PAYWALL ACTIONS 2 COL FINAL ===== */





/* ===== MODO PRACTICA TEXT ONLY ===== */
.dmxPricing .dmxPlanList li .dmxPlanFeatureTextFocus{
  color:#1BB0F6!important;
  font-weight:1000!important;
  text-shadow:0 0 14px rgba(37,99,235,.16);
}

[data-theme="dark"] .dmxPricing .dmxPlanList li .dmxPlanFeatureTextFocus{
  color:#1BB0F6!important;
  text-shadow:0 0 16px rgba(147,197,253,.22);
}

/* anula estilos anteriores del destaque visual */
.dmxPricing .dmxPlanList li.dmxPlanFeatureFocus{
  background:transparent!important;
  border:0!important;
  padding:0!important;
  border-radius:0!important;
  transform:none!important;
}

.dmxPricing .dmxPlanList li i.dmxPlanFeatureIconFocus{
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  background:none!important;
  box-shadow:none!important;
  animation:none!important;
  color:inherit!important;
  filter:none!important;
}
/* ===== /MODO PRACTICA TEXT ONLY ===== */

/* ===== PORTADA VIDEO REAL 9:16 FINAL ===== */
.dmxHomeV2VideoOnlyWrap{
  width:min(100%, 390px)!important;
  max-width:390px!important;
  aspect-ratio:9 / 16!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  border-radius:6px!important;
  overflow:hidden!important;
}

.dmxHomeV2VideoOnlyWrap::before,
.dmxHomeV2VideoOnlyWrap::after{
  border-radius:6px!important;
}

.dmxHomeV2OnlyVideo{
  display:block!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:9 / 16!important;
  object-fit:cover!important;
  border-radius:4px!important;
}

@media (max-width:760px){
  .dmxHomeV2VideoOnlyWrap{
    width:min(100%, 330px)!important;
    max-width:330px!important;
  }
}
/* ===== /PORTADA VIDEO REAL 9:16 FINAL ===== */

/* ===== PORTADA VIDEO SIN LINEAS NEGRAS ===== */
.dmxHomeV2VideoOnlyWrap{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}

.dmxHomeV2VideoOnlyWrap::before,
.dmxHomeV2VideoOnlyWrap::after{
  content:none!important;
  display:none!important;
}

.dmxHomeV2OnlyVideo{
  width:calc(100% + 4px)!important;
  height:calc(100% + 4px)!important;
  max-width:none!important;
  margin:-2px!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  object-fit:cover!important;
}
/* ===== /PORTADA VIDEO SIN LINEAS NEGRAS ===== */

/* ===== PORTADA VIDEO MOBILE CENTER WIDE ===== */
.dmxHomeV2VideoOnlyWrap{
  margin-left:auto!important;
  margin-right:auto!important;
  justify-self:center!important;
  align-self:center!important;
}

@media (max-width:760px){
  .dmxHomeV2VideoOnlyWrap{
    width:min(94vw, 430px)!important;
    max-width:430px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
  }

  .dmxHomeV2AppMock.dmxHomeV2VideoOnlyWrap{
    display:block!important;
  }
}
/* ===== /PORTADA VIDEO MOBILE CENTER WIDE ===== */

/* ===== PORTADA VIDEO MOBILE FORCE CENTER ===== */
@media (max-width:760px){
  .dmxHomeV2AppMock.dmxHomeV2VideoOnlyWrap,
  .dmxHomeV2VideoOnlyWrap{
    position:relative!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:78vw!important;
    max-width:360px!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    justify-self:center!important;
    align-self:center!important;
  }

  .dmxHomeV2OnlyVideo{
    width:calc(100% + 4px)!important;
    height:calc(100% + 4px)!important;
    max-width:none!important;
    margin:-2px!important;
    object-fit:cover!important;
  }
}
/* ===== /PORTADA VIDEO MOBILE FORCE CENTER ===== */

/* ===== PORTADA VIDEO MOBILE REAL CENTER ===== */
@media (max-width:760px){
  .dmxHomeV2HeroMedia,
  .dmxHomeV2HeroVisual,
  .dmxHomeV2Right,
  .dmxHomeV2Visual{
    width:100%!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
  }

  .dmxHomeV2AppMock.dmxHomeV2VideoOnlyWrap,
  .dmxHomeV2VideoOnlyWrap{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    width:78vw!important;
    max-width:360px!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    justify-self:center!important;
    align-self:center!important;
  }
}
/* ===== /PORTADA VIDEO MOBILE REAL CENTER ===== */

/* ===== HOME MOBILE 2 COL COMPACT ===== */
.dmxHomeV2Actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:14px!important;
  align-items:stretch!important;
}

.dmxHomeV2Actions .dmxBtn{
  width:100%!important;
  min-width:0!important;
  justify-content:center!important;
  text-align:center!important;
}

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

  .dmxHomeV2Actions .dmxBtn{
    min-height:58px!important;
    padding:14px 10px!important;
    border-radius:18px!important;
    font-size:16px!important;
    line-height:1.1!important;
  }

  .dmxHomeV2Actions .dmxBtn i{
    font-size:16px!important;
  }

  .dmxHomeV2Trust{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
  }

  .dmxHomeV2Trust > div{
    min-height:96px!important;
    padding:18px!important;
    border-radius:22px!important;
  }

  .dmxHomeV2Trust strong{
    font-size:36px!important;
    line-height:1!important;
  }

  .dmxHomeV2Trust span{
    font-size:16px!important;
    line-height:1.15!important;
  }
}
/* ===== /HOME MOBILE 2 COL COMPACT ===== */

/* ===== HOME DASHBOARD MOBILE 2 COL ===== */
@media (max-width:760px){
  .dmxHomeV2DashStats{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
  }

  .dmxHomeV2DashStats > div{
    min-height:112px!important;
    padding:18px!important;
    border-radius:22px!important;
  }

  .dmxHomeV2DashStats strong{
    font-size:38px!important;
    line-height:1!important;
  }

  .dmxHomeV2DashStats span{
    font-size:15px!important;
    line-height:1.15!important;
  }
}
/* ===== /HOME DASHBOARD MOBILE 2 COL ===== */
/* ===== HOME DASHBOARD FORCE 2 COL MOBILE FINAL ===== */
@media (max-width:760px){
  .dmxHomeV2 .dmxHomeV2Dashboard .dmxHomeV2DashStats{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    gap:12px!important;
    width:100%!important;
  }

  .dmxHomeV2 .dmxHomeV2Dashboard .dmxHomeV2DashStats > div{
    grid-column:auto!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    flex:none!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-height:112px!important;
    padding:18px!important;
    border-radius:22px!important;
  }

  .dmxHomeV2 .dmxHomeV2Dashboard .dmxHomeV2DashStats > div strong{
    font-size:38px!important;
    line-height:1!important;
  }

  .dmxHomeV2 .dmxHomeV2Dashboard .dmxHomeV2DashStats > div span{
    font-size:15px!important;
    line-height:1.15!important;
  }
}
/* ===== /HOME DASHBOARD FORCE 2 COL MOBILE FINAL ===== */
/* ===== HOME DASHBOARD MOBILE TEXT CENTER ===== */
@media (max-width:760px){
  .dmxHomeV2 .dmxHomeV2Dashboard .dmxHomeV2DashStats > div{
    align-items:center!important;
    text-align:center!important;
  }

  .dmxHomeV2 .dmxHomeV2Dashboard .dmxHomeV2DashStats > div strong,
  .dmxHomeV2 .dmxHomeV2Dashboard .dmxHomeV2DashStats > div span{
    text-align:center!important;
    width:100%!important;
  }
}
/* ===== /HOME DASHBOARD MOBILE TEXT CENTER ===== */
/* ===== HOME TRUST MOBILE SYMMETRY ===== */
/* En PC ocultar la cuarta etiqueta agregada solo para simetría móvil */
.dmxHomeV2Trust > div:nth-child(4){
  display:none!important;
}

/* Centrar textos de las etiquetas superiores */
.dmxHomeV2Trust > div{
  text-align:center!important;
  align-items:center!important;
  justify-content:center!important;
}

.dmxHomeV2Trust > div strong,
.dmxHomeV2Trust > div span{
  text-align:center!important;
  width:100%!important;
}

@media (max-width:760px){
  .dmxHomeV2Trust{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }

  .dmxHomeV2Trust > div:nth-child(4){
    display:flex!important;
  }

  .dmxHomeV2Trust > div{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }
}
/* ===== /HOME TRUST MOBILE SYMMETRY ===== */
/* ===== HOME HIDE LIVE STRIP MOBILE ===== */
@media (max-width:760px){
  .dmxHomeV2LiveStrip{
    display:none!important;
  }
}
/* ===== /HOME HIDE LIVE STRIP MOBILE ===== */
/* ===== HOME HERO MOBILE COPY PADDING FINAL ===== */
@media (max-width:900px){
  .dmxHomeV2 .dmxHomeV2Hero{
    padding-left:18px!important;
    padding-right:18px!important;
    box-sizing:border-box!important;
  }

  .dmxHomeV2 .dmxHomeV2Copy{
    width:100%!important;
    max-width:100%!important;
    padding-left:14px!important;
    padding-right:14px!important;
    box-sizing:border-box!important;
  }

  .dmxHomeV2 .dmxHomeV2Copy h1,
  .dmxHomeV2 .dmxHomeV2Copy p{
    padding-left:0!important;
    padding-right:0!important;
    margin-left:0!important;
    margin-right:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
}
/* ===== /HOME HERO MOBILE COPY PADDING FINAL ===== */
/* ===== HOME HIDE BADGE MOBILE ===== */
@media (max-width:900px){
  .dmxHomeV2Badge{
    display:none!important;
  }
}
/* ===== /HOME HIDE BADGE MOBILE ===== */
/* ===== HOME CARD ICONS CENTER MOBILE ===== */
@media (max-width:900px){
  .dmxHomeV2Card .dmxHomeV2CardIcon{
    margin-left:auto!important;
    margin-right:auto!important;
  }
}
/* ===== /HOME CARD ICONS CENTER MOBILE ===== */

/* ===== HOME H1 MOBILE 2 LINES ===== */
@media (min-width:901px){
  .dmxHomeV2TitleLine{
    display:inline!important;
    white-space:normal!important;
  }
}

@media (max-width:900px){
  .dmxHomeV2 .dmxHomeV2Copy h1{
    font-size:clamp(30px, 8.8vw, 52px)!important;
    line-height:.98!important;
    letter-spacing:-.055em!important;
    max-width:100%!important;
    overflow:visible!important;
    text-wrap:balance!important;
  }

  .dmxHomeV2 .dmxHomeV2Copy h1 .dmxHomeV2TitleLine{
    display:block!important;
    white-space:nowrap!important;
  }
}
/* ===== /HOME H1 MOBILE 2 LINES ===== */
/* ===== HOME VIDEO SHADOW / DARK GLOW ===== */
.dmxHomeV2VideoOnlyWrap{
  box-shadow:
    0 26px 70px rgba(0,0,0,.38),
    0 12px 32px rgba(2,6,23,.28),
    0 0 0 1px rgba(255,255,255,.08)!important;
}

.dmxHomeV2OnlyVideo{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important;
}

@media (max-width:900px){
  .dmxHomeV2VideoOnlyWrap{
    box-shadow:
      0 22px 58px rgba(0,0,0,.42),
      0 10px 26px rgba(2,6,23,.32),
      0 0 0 1px rgba(255,255,255,.08)!important;
  }
}
/* ===== /HOME VIDEO SHADOW / DARK GLOW ===== */
/* ===== RESTART MODAL BUTTONS 2 COL MOBILE ===== */
@media (max-width:900px){
  .dmxRestartModal div:has(> [data-restart-cancel]):has(> [data-restart-accept]),
  .dmxRestartModalActions,
  .dmxRestartActions,
  .dmxRestartButtons{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    align-items:stretch!important;
  }

  .dmxRestartModal [data-restart-cancel],
  .dmxRestartModal [data-restart-accept],
  [data-restart-cancel],
  [data-restart-accept]{
    width:100%!important;
    min-width:0!important;
    min-height:58px!important;
    justify-content:center!important;
    text-align:center!important;
    margin:0!important;
  }
}
/* ===== /RESTART MODAL BUTTONS 2 COL MOBILE ===== */


/* ===== RESTART CONFIRM BUTTONS 2 COL FINAL ===== */
.dmxRestartConfirmActions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  align-items:stretch!important;
}

.dmxRestartConfirmActions .btn{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  min-height:58px!important;
  justify-content:center!important;
  text-align:center!important;
}

@media (max-width:900px){
  .dmxRestartConfirmActions{
    grid-template-columns:1fr 1fr!important;
  }
}
/* ===== /RESTART CONFIRM BUTTONS 2 COL FINAL ===== */
/* ===== STATS PAYWALL BUTTON ORDER ===== */
.dmxStatsPaywallActions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:16px!important;
}

.dmxStatsPaywallActions a[href*="niveles"],
.dmxStatsPaywallActions a[href*="desarrollo"],
.dmxStatsPaywallActions .dmxBtn[href*="niveles"],
.dmxStatsPaywallActions .dmxBtn[href*="desarrollo"]{
  order:1!important;
}

.dmxStatsPaywallActions a[href*="precios"],
.dmxStatsPaywallActions .dmxBtn[href*="precios"]{
  order:2!important;
}
/* ===== /STATS PAYWALL BUTTON ORDER ===== */

/* ===== MODAL PLAN BUTTON RIGHT ===== */
.dmxModalActionsPlanRight{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  align-items:stretch!important;
}

.dmxModalActionsPlanRight > a,
.dmxModalActionsPlanRight > button,
.dmxModalActionsPlanRight > form{
  min-width:0!important;
}

.dmxModalActionsPlanRight > a:not(.dmxModalPlanButtonRight),
.dmxModalActionsPlanRight > button:not(.dmxModalPlanButtonRight),
.dmxModalActionsPlanRight > form:not(:has(.dmxModalPlanButtonRight)){
  order:1!important;
}

.dmxModalActionsPlanRight .dmxModalPlanButtonRight,
.dmxModalActionsPlanRight > form:has(.dmxModalPlanButtonRight){
  order:2!important;
}

.dmxModalActionsPlanRight .dmxModalPlanButtonRight{
  width:100%!important;
  justify-content:center!important;
  text-align:center!important;
}
/* ===== /MODAL PLAN BUTTON RIGHT ===== */

/* ===== GUEST DEMO UNLOCK MODAL ===== */
.dmxGuestDemoModalOverlay{
  position:fixed;
  inset:0;
  z-index:9998;
  display:grid;
  place-items:center;
  padding:22px;
  background:rgba(2,6,23,.62);
  backdrop-filter:blur(10px);
}

.dmxGuestDemoModal{
  width:min(100%, 520px);
  border-radius:28px;
  padding:28px;
  background:var(--card, #fff);
  color:var(--text, #0f172a);
  box-shadow:0 28px 90px rgba(0,0,0,.34);
  border:1px solid rgba(148,163,184,.22);
}

.dmxGuestDemoBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  color:#0f766e;
  background:rgba(20,184,166,.12);
  margin-bottom:14px;
}

.dmxGuestDemoModal h2{
  margin:0 0 10px;
  font-size:clamp(24px, 5vw, 34px);
  line-height:1.05;
}

.dmxGuestDemoModal p{
  margin:0;
  color:var(--muted, #64748b);
  font-size:17px;
  line-height:1.45;
}

.dmxGuestDemoActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:22px;
}

.dmxGuestDemoActions .dmxBtn{
  width:100%;
  justify-content:center;
  min-height:58px;
}

html[data-theme="dark"] .dmxGuestDemoModal,
[data-theme="dark"] .dmxGuestDemoModal{
  background:#0f172a;
  color:#f8fafc;
  border-color:rgba(148,163,184,.22);
}

html[data-theme="dark"] .dmxGuestDemoModal p,
[data-theme="dark"] .dmxGuestDemoModal p{
  color:#cbd5e1;
}

html[data-theme="dark"] .dmxGuestDemoBadge,
[data-theme="dark"] .dmxGuestDemoBadge{
  color:#99f6e4;
  background:rgba(20,184,166,.16);
}

@media (max-width:520px){
  .dmxGuestDemoModal{
    padding:24px;
    border-radius:24px;
  }

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

  .dmxGuestDemoActions .dmxBtn{
    min-width:0;
    padding-left:10px;
    padding-right:10px;
  }
}
/* ===== /GUEST DEMO UNLOCK MODAL ===== */

/* ===== GUEST DEMO TITLE CHECK ===== */
.dmxGuestDemoTitle{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}

.dmxGuestDemoCheck{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  background:linear-gradient(135deg,#22c55e,#14b8a6)!important;
  box-shadow:0 0 0 6px rgba(34,197,94,.14), 0 12px 26px rgba(20,184,166,.24)!important;
  animation:dmxGuestDemoCheckPulse 1.25s ease-in-out infinite!important;
}

.dmxGuestDemoCheck i{
  font-size:20px!important;
}

@keyframes dmxGuestDemoCheckPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.10); }
}

@media (max-width:520px){
  .dmxGuestDemoTitle{
    gap:10px!important;
  }

  .dmxGuestDemoCheck{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
  }
}
/* ===== /GUEST DEMO TITLE CHECK ===== */

/* ===== GUEST DEMO TITLE CHECK BELOW ===== */
.dmxGuestDemoTitle{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:16px!important;
  text-align:center!important;
}

.dmxGuestDemoCheck{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  background:linear-gradient(135deg,#22c55e,#14b8a6)!important;
  box-shadow:0 0 0 8px rgba(34,197,94,.14), 0 14px 30px rgba(20,184,166,.26)!important;
  animation:dmxGuestDemoCheckPulse 1.25s ease-in-out infinite!important;
}

.dmxGuestDemoCheck i{
  font-size:27px!important;
}

@media (max-width:520px){
  .dmxGuestDemoCheck{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
  }

  .dmxGuestDemoCheck i{
    font-size:25px!important;
  }
}
/* ===== /GUEST DEMO TITLE CHECK BELOW ===== */
/* ===== GUEST DEMO CHECK MORE SPACE ===== */
.dmxGuestDemoTitle{
  gap:24px!important;
  margin-bottom:18px!important;
}

.dmxGuestDemoCheck{
  width:76px!important;
  height:76px!important;
  min-width:76px!important;
  margin-top:6px!important;
  margin-bottom:14px!important;
  box-shadow:
    0 0 0 12px rgba(34,197,94,.13),
    0 18px 38px rgba(20,184,166,.30)!important;
}

.dmxGuestDemoCheck i{
  font-size:36px!important;
}

@media (max-width:520px){
  .dmxGuestDemoTitle{
    gap:22px!important;
    margin-bottom:16px!important;
  }

  .dmxGuestDemoCheck{
    width:72px!important;
    height:72px!important;
    min-width:72px!important;
    margin-top:6px!important;
    margin-bottom:12px!important;
  }

  .dmxGuestDemoCheck i{
    font-size:34px!important;
  }
}
/* ===== /GUEST DEMO CHECK MORE SPACE ===== */

/* ===== GUEST TRIAL NOTICE ===== */
.dmxGuestTrialNotice{
  display:flex;
  align-items:center;
  gap:14px;
  margin:18px 0 22px;
  padding:16px 18px;
  border-radius:22px;
  background:linear-gradient(135deg, rgba(27,176,246,.12), rgba(34,197,94,.08));
  border:1px solid rgba(27,176,246,.24);
  box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.dmxGuestTrialIcon{
  width:46px;
  height:46px;
  min-width:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#1BB0F6,#22c55e);
  box-shadow:0 10px 22px rgba(27,176,246,.24);
}

.dmxGuestTrialNotice strong{
  display:block;
  font-weight:1000;
  color:var(--text,#0f172a);
  margin-bottom:3px;
}

.dmxGuestTrialNotice p{
  margin:0;
  color:var(--muted,#64748b);
  line-height:1.35;
}

.dmxGuestTrialNotice a{
  color:#1BB0F6!important;
  font-weight:1000;
  text-decoration:none;
}

.dmxGuestTrialNotice a:hover{
  text-decoration:underline;
}

[data-theme="dark"] .dmxGuestTrialNotice,
html[data-theme="dark"] .dmxGuestTrialNotice{
  background:linear-gradient(135deg, rgba(27,176,246,.14), rgba(34,197,94,.09));
  border-color:rgba(27,176,246,.28);
  box-shadow:0 16px 38px rgba(0,0,0,.26);
}

[data-theme="dark"] .dmxGuestTrialNotice strong,
html[data-theme="dark"] .dmxGuestTrialNotice strong{
  color:#f8fafc;
}

[data-theme="dark"] .dmxGuestTrialNotice p,
html[data-theme="dark"] .dmxGuestTrialNotice p{
  color:#cbd5e1;
}

@media (max-width:900px){
  .dmxGuestTrialNotice{
    margin:16px 14px 20px;
    padding:15px;
    border-radius:20px;
    align-items:flex-start;
  }

  .dmxGuestTrialIcon{
    width:42px;
    height:42px;
    min-width:42px;
  }
}
/* ===== /GUEST TRIAL NOTICE ===== */


/* =========================================================
   ACCOUNT APP CLEAN FINAL
   /cuenta/ — menú tipo app móvil, sobrio y consistente
   ========================================================= */

/* ---------- Shell ---------- */
.dmxAccountApp{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:18px 0 8px;
}

.dmxAccountApp *,
.dmxAccountApp *::before,
.dmxAccountApp *::after{
  box-sizing:border-box;
}

/* ---------- Header ---------- */
.dmxAccountAppHeader{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 42px;
  align-items:center;
  gap:13px;
  min-height:86px;
  padding:16px;
  margin:0 0 14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:0 8px 22px rgba(15,23,42,.07);
}

.dmxAccountAppHeader h1{
  margin:0;
  font-size:1.55rem;
  line-height:1.08;
  letter-spacing:-.035em;
  color:var(--text);
}

.dmxAccountAppHeader p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:.92rem;
  font-weight:750;
  line-height:1.25;
}

.dmxAccountAppAvatar,
.dmxAccountBack,
.dmxAccountLogoutMini{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  text-decoration:none;
  line-height:1;
}

.dmxAccountAppAvatar{
  width:52px;
  height:52px;
  min-width:52px;
  min-height:52px;
  background:linear-gradient(135deg,#43d400,#1bb0f6);
  color:#fff;
  font-size:1.28rem;
}

.dmxAccountBack,
.dmxAccountLogoutMini{
  background:rgba(15,23,42,.055);
  border:1px solid var(--border);
  color:var(--text);
  font-size:.95rem;
}

.dmxAccountBack + .dmxAccountAppAvatar{
  display:none;
}

/* ---------- Resumen inicial ---------- */








/* ---------- Menú principal ---------- */
.dmxAccountAppMenu{
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:0 8px 22px rgba(15,23,42,.07);
}

.dmxAccountAppMenu a{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 18px;
  align-items:center;
  gap:12px;
  min-height:76px;
  padding:16px 17px;
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid var(--border);
}

.dmxAccountAppMenu a:last-child{
  border-bottom:0;
}

.dmxAccountAppMenu a > i{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(67,212,0,.10);
  color:#43d400;
  font-size:1.05rem;
  line-height:1;
}

.dmxAccountAppMenu a > span{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.dmxAccountAppMenu a strong{
  color:var(--text);
  font-size:1rem;
  font-weight:950;
  line-height:1.15;
}

.dmxAccountAppMenu a em{
  color:var(--muted);
  font-size:.88rem;
  font-style:normal;
  font-weight:720;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dmxAccountAppMenu a b{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:.8rem;
  line-height:1;
}

/* ---------- Panel interno ---------- */
.dmxAccountAppPanel{
  padding:18px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:0 8px 22px rgba(15,23,42,.07);
}

.dmxAccountAppRows{
  margin-bottom:16px;
}

/* ---------- Formularios ---------- */
.dmxAccountApp .dmxAccountForm{
  display:grid;
  grid-template-columns:1fr;
  gap:13px;
}

.dmxAccountApp .dmxAccountForm label{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0;
  color:var(--text);
  font-size:.9rem;
  font-weight:850;
}

.dmxAccountApp .dmxAccountForm label > i{
  display:inline-flex;
  width:18px;
  margin-right:6px;
  color:#43d400;
  text-align:center;
  justify-content:center;
}

.dmxAccountApp .authInput{
  width:100%;
  min-height:46px;
}

.dmxAccountApp .dmxBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
}

.dmxAccountCodeBox,
.dmxAccountSecurity{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--border);
}

.dmxAccountSecurity h2{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 2px;
  color:var(--text);
  font-size:1.08rem;
  letter-spacing:-.02em;
}

.dmxAccountSecurity h2 i{
  color:#43d400;
}

/* ---------- Suscripción ---------- */
.dmxAccountPlanCard{
  padding:16px;
  margin-bottom:16px;
  background:rgba(15,23,42,.03);
  border:1px solid var(--border);
  border-radius:20px;
}

.dmxAccountPlanCard p{
  margin:12px 0 0;
  color:var(--muted);
  font-size:.94rem;
  font-weight:780;
  line-height:1.45;
}

.dmxAccountApp .dmxAccountActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* ---------- Listas de selección ---------- */
.dmxAccountChoiceList{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:16px;
}

.dmxAccountChoiceList label{
  position:relative;
  display:grid;
  grid-template-columns:24px 42px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:76px;
  padding:14px 15px;
  background:rgba(15,23,42,.03);
  border:1px solid var(--border);
  border-radius:18px;
  cursor:pointer;
}

.dmxAccountChoiceList input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:#43d400;
}

.dmxAccountChoiceList label > i{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(67,212,0,.10);
  color:#43d400;
  font-size:1.05rem;
  line-height:1;
}

.dmxAccountChoiceList span{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.dmxAccountChoiceList strong{
  color:var(--text);
  font-size:1rem;
  font-weight:950;
  line-height:1.15;
}

.dmxAccountChoiceList em{
  color:var(--muted);
  font-size:.88rem;
  font-style:normal;
  font-weight:720;
  line-height:1.28;
}

.dmxAccountChoiceList label.is-active{
  background:rgba(67,212,0,.08);
  border-color:rgba(67,212,0,.50);
}

/* ---------- Dark mode ---------- */
html[data-theme="dark"] .dmxAccountAppHeader,
html[data-theme="dark"] .dmxAccountAppMenu,
html[data-theme="dark"] .dmxAccountAppPanel,
[data-theme="dark"] .dmxAccountAppHeader,
[data-theme="dark"] .dmxAccountAppMenu,
[data-theme="dark"] .dmxAccountAppPanel{
  background:#101827;
  border-color:rgba(148,163,184,.18);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}

html[data-theme="dark"] .dmxAccountBack,
html[data-theme="dark"] .dmxAccountLogoutMini,
html[data-theme="dark"] .dmxAccountPlanCard,
html[data-theme="dark"] .dmxAccountChoiceList label,
[data-theme="dark"] .dmxAccountBack,
[data-theme="dark"] .dmxAccountLogoutMini,
[data-theme="dark"] .dmxAccountPlanCard,
[data-theme="dark"] .dmxAccountChoiceList label{
  background:rgba(15,23,42,.86);
  border-color:rgba(148,163,184,.18);
}

html[data-theme="dark"] .dmxAccountChoiceList label.is-active,
[data-theme="dark"] .dmxAccountChoiceList label.is-active{
  background:rgba(6,78,59,.48);
  border-color:rgba(67,212,0,.42);
}

/* ---------- Desktop ---------- */
@media(min-width:900px){
  .dmxAccountApp{
    max-width:860px;
    padding-top:24px;
  }

  .dmxAccountAppHeader{
    min-height:92px;
    padding:18px;
  }

  .dmxAccountAppMenu a{
    padding:18px 20px;
  }

  .dmxAccountAppPanel{
    padding:24px;
  }

  .dmxAccountAppForm{
    grid-template-columns:1fr 1fr;
    gap:14px;
  }

  .dmxAccountAppForm .dmxBtn,
  .dmxAccountCodeBox,
  .dmxAccountSecurity{
    grid-column:1 / -1;
  }
}

/* ---------- Mobile ---------- */
@media(max-width:520px){
  .dmxAccountApp{
    padding-top:8px;
  }

  .dmxAccountAppHeader{
    grid-template-columns:48px minmax(0,1fr) 40px;
    gap:10px;
    min-height:78px;
    padding:13px;
    border-radius:20px;
  }

  .dmxAccountAppAvatar{
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
    font-size:1.2rem;
  }

  .dmxAccountBack,
  .dmxAccountLogoutMini{
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
  }

  .dmxAccountAppHeader h1{
    font-size:1.35rem;
  }

  .dmxAccountAppHeader p{
    font-size:.84rem;
  }

  .dmxAccountAppPanel,
  .dmxAccountAppMenu,
    .dmxAccountAppPanel{
    padding:14px;
  }

  .dmxAccountAppMenu a{
    min-height:72px;
    padding:14px;
  }

  .dmxAccountAppMenu a > i,
  .dmxAccountChoiceList label > i{
    width:38px;
    height:38px;
    border-radius:13px;
  }

  .dmxAccountChoiceList label{
    grid-template-columns:22px 38px minmax(0,1fr);
    min-height:72px;
    padding:13px;
  }
}


/* =========================================================
   PROFILE INLINE EDIT
   ========================================================= */
.dmxProfilePanel{
  padding:0;
  overflow:hidden;
}

.dmxProfileList{
  display:grid;
  gap:0;
}

.dmxProfileEditRow{
  display:block;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  border-bottom:1px solid var(--border);
}

.dmxProfileEditRow:last-child{
  border-bottom:0;
}

.dmxProfileRead{
  display:grid;
  grid-template-columns:minmax(0,1fr) 40px;
  align-items:center;
  gap:12px;
  min-height:72px;
  padding:15px 16px;
}

.dmxProfileStaticRow .dmxProfileRead{
  grid-template-columns:1fr;
}

.dmxProfileRead div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.dmxProfileRead span{
  color:var(--muted);
  font-size:.78rem;
  font-weight:900;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.055em;
}

.dmxProfileRead strong{
  color:var(--text);
  font-size:1rem;
  font-weight:950;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dmxProfileEditBtn{
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(15,23,42,.045);
  color:var(--muted);
  cursor:pointer;
  line-height:1;
}

.dmxProfileEditBtn:hover{
  color:var(--text);
  background:rgba(67,212,0,.10);
  border-color:rgba(67,212,0,.35);
}

.dmxProfileEdit{
  display:none;
  padding:0 16px 16px;
}

.dmxProfileEditRow.is-editing .dmxProfileRead{
  display:none;
}

.dmxProfileEditRow.is-editing .dmxProfileEdit,
.dmxProfileEditAlways{
  display:grid;
  gap:12px;
  padding:16px;
}

.dmxProfileEdit label{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0;
  color:var(--text);
  font-size:.9rem;
  font-weight:850;
}

.dmxProfileEdit .authInput{
  width:100%;
  min-height:46px;
}

.dmxProfileEditActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.dmxProfileEditActions .dmxBtn{
  min-height:42px;
}

html[data-theme="dark"] .dmxProfileEditBtn,
[data-theme="dark"] .dmxProfileEditBtn{
  background:rgba(15,23,42,.85);
  border-color:rgba(148,163,184,.18);
}

@media(min-width:900px){
  .dmxProfilePanel{
    padding:0;
  }

  .dmxProfileRead{
    min-height:76px;
    padding:16px 20px;
  }

  .dmxProfileEditRow.is-editing .dmxProfileEdit,
  .dmxProfileEditAlways{
    padding:18px 20px 20px;
  }

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

  .dmxProfileEditActions{
    justify-content:flex-start;
  }
}

@media(max-width:520px){
  .dmxProfileRead{
    min-height:68px;
    padding:13px 14px;
  }

  .dmxProfileRead strong{
    font-size:.95rem;
  }

  .dmxProfileEditBtn{
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
  }

  .dmxProfileEditRow.is-editing .dmxProfileEdit,
  .dmxProfileEditAlways{
    padding:14px;
  }
}

/* =========================================================
   PROFILE INLINE EDIT BUTTONS RESPONSIVE
   ========================================================= */
.dmxProfileEditActions{
  display:grid;
  grid-template-columns:repeat(2, minmax(140px, auto));
  justify-content:end;
  align-items:center;
  gap:10px;
  width:100%;
}

.dmxProfileEditActions .dmxBtn{
  width:auto;
  min-width:140px;
  white-space:nowrap;
}

@media(max-width:520px){
  .dmxProfileEditActions{
    grid-template-columns:1fr 1fr;
    justify-content:stretch;
  }

  .dmxProfileEditActions .dmxBtn{
    width:100%;
    min-width:0;
  }
}

/* =========================================================
   PROFILE INLINE EDIT BUTTON ORDER
   Guardar / Actualizar siempre a la derecha
   ========================================================= */
.dmxProfileEditActions .dmxBtn:not(.dmxBtnPrimary){
  order:1;
  grid-column:1;
}

.dmxProfileEditActions .dmxBtnPrimary{
  order:2;
  grid-column:2;
}

.dmxProfileEditActions .dmxBtn:only-child,
.dmxProfileEditActions .dmxBtnPrimary:only-child{
  grid-column:2;
}

/* =========================================================
   APPEARANCE FLAT SELECT
   ========================================================= */
.dmxAppearancePanel{
  padding:18px;
}

.dmxAppearanceForm{
  display:grid;
  gap:14px;
}

.dmxAppearanceSelectCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:72px;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(15,23,42,.028);
}

.dmxAppearanceSelectInfo{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.dmxAppearanceSelectInfo > i{
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:rgba(67,212,0,.10);
  color:#43d400;
  line-height:1;
}

.dmxAppearanceSelectInfo div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.dmxAppearanceSelectInfo strong{
  color:var(--text);
  font-size:.98rem;
  font-weight:950;
  line-height:1.15;
}

.dmxAppearanceSelectInfo span{
  color:var(--muted);
  font-size:.86rem;
  font-weight:720;
  line-height:1.25;
}

.dmxAppearanceSelectWrap{
  width:180px;
  min-width:180px;
  display:flex !important;
  flex-direction:column;
  gap:6px;
  margin:0 !important;
}

.dmxAppearanceSelectWrap > span{
  color:var(--muted);
  font-size:.72rem;
  font-weight:900;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.055em;
}

.dmxAppearanceSelect{
  height:42px !important;
  min-height:42px !important;
  border-radius:13px !important;
  font-weight:900;
  cursor:pointer;
}

.dmxAppearanceForm .dmxBtnPrimary{
  justify-self:end;
  min-width:180px;
}

html[data-theme="dark"] .dmxAppearanceSelectCard,
[data-theme="dark"] .dmxAppearanceSelectCard{
  background:rgba(15,23,42,.86);
  border-color:rgba(148,163,184,.18);
}

@media(max-width:520px){
  .dmxAppearancePanel{
    padding:14px;
  }

  .dmxAppearanceSelectCard{
    gap:10px;
    padding:12px;
  }

  .dmxAppearanceSelectInfo span{
    display:none;
  }

  .dmxAppearanceSelectWrap{
    width:132px;
    min-width:132px;
  }

  .dmxAppearanceForm .dmxBtnPrimary{
    justify-self:stretch;
    width:100%;
    min-width:0;
  }
}

/* =========================================================
   APPEARANCE COMPACT SELECT FIX
   ========================================================= */
.dmxAppearanceSelectCard{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 150px !important;
  align-items:center !important;
  gap:12px !important;
  min-height:64px !important;
  padding:12px !important;
}

.dmxAppearanceSelectInfo{
  min-width:0 !important;
}

.dmxAppearanceSelectInfo > i{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  border-radius:13px !important;
  font-size:1rem !important;
}

.dmxAppearanceSelectInfo strong{
  font-size:1.05rem !important;
  line-height:1.1 !important;
  font-weight:950 !important;
  white-space:nowrap !important;
}

.dmxAppearanceSelectInfo span{
  font-size:.82rem !important;
  line-height:1.22 !important;
}

.dmxAppearanceSelectWrap{
  width:150px !important;
  min-width:150px !important;
  max-width:150px !important;
  gap:5px !important;
}

.dmxAppearanceSelectWrap > span{
  font-size:.68rem !important;
}

.dmxAppearanceSelect{
  width:100% !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 38px 0 14px !important;
  border-radius:13px !important;
  font-size:.95rem !important;
  line-height:40px !important;
}

@media(max-width:520px){
  .dmxAppearanceSelectCard{
    grid-template-columns:minmax(0,1fr) 126px !important;
    gap:10px !important;
    min-height:58px !important;
    padding:10px !important;
  }

  .dmxAppearanceSelectInfo{
    gap:10px !important;
  }

  .dmxAppearanceSelectInfo > i{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
  }

  .dmxAppearanceSelectInfo strong{
    font-size:1rem !important;
  }

  .dmxAppearanceSelectInfo span{
    display:none !important;
  }

  .dmxAppearanceSelectWrap{
    width:126px !important;
    min-width:126px !important;
    max-width:126px !important;
  }

  .dmxAppearanceSelect{
    height:38px !important;
    min-height:38px !important;
    padding-left:12px !important;
    padding-right:34px !important;
    font-size:.9rem !important;
  }
}

/* =========================================================
   ACCOUNT ICONS + NOTIFICATIONS ORDER FIX
   ========================================================= */

/* Centrado real de contenedores con Font Awesome */
.dmxAccountApp .dmxAccountAppAvatar,
.dmxAccountApp .dmxAccountBack,
.dmxAccountApp .dmxAccountLogoutMini,
.dmxAccountApp .dmxAccountAppMenu a > i,
.dmxAccountApp .dmxAccountChoiceList label > i,
.dmxAccountApp .dmxAppearanceSelectInfo > i,
.dmxAccountApp .dmxProfileEditBtn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1 !important;
  overflow:hidden !important;
}

.dmxAccountApp .dmxAccountAppAvatar i,
.dmxAccountApp .dmxAccountBack i,
.dmxAccountApp .dmxAccountLogoutMini i,
.dmxAccountApp .dmxProfileEditBtn i,
.dmxAccountApp .dmxBtn i,
.dmxAccountApp .dmxNotice i{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  margin:0 !important;
  transform:none !important;
}

/* Menú principal de cuenta: icono / texto / flecha */
.dmxAccountApp .dmxAccountAppMenu a{
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 18px !important;
  align-items:center !important;
  gap:12px !important;
}

.dmxAccountApp .dmxAccountAppMenu a > i{
  grid-column:1 !important;
}

.dmxAccountApp .dmxAccountAppMenu a > span{
  grid-column:2 !important;
  min-width:0 !important;
}

.dmxAccountApp .dmxAccountAppMenu a > b{
  grid-column:3 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Notificaciones: icono izquierda, texto centro, checkbox derecha */
.dmxAccountApp .dmxAccountChoiceList label{
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 24px !important;
  grid-template-areas:"ico txt chk" !important;
  align-items:center !important;
  gap:12px !important;
  min-height:74px !important;
  text-align:left !important;
}

.dmxAccountApp .dmxAccountChoiceList label > i{
  grid-area:ico !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  margin:0 !important;
}

.dmxAccountApp .dmxAccountChoiceList label > span{
  grid-area:txt !important;
  min-width:0 !important;
  align-items:flex-start !important;
  text-align:left !important;
}

.dmxAccountApp .dmxAccountChoiceList label > input[type="checkbox"]{
  grid-area:chk !important;
  justify-self:center !important;
  align-self:center !important;
  width:20px !important;
  height:20px !important;
  margin:0 !important;
}

.dmxAccountApp .dmxAccountChoiceList label strong,
.dmxAccountApp .dmxAccountChoiceList label em{
  text-align:left !important;
}

@media(max-width:520px){
  .dmxAccountApp .dmxAccountChoiceList label{
    grid-template-columns:38px minmax(0,1fr) 22px !important;
    gap:10px !important;
    min-height:70px !important;
  }

  .dmxAccountApp .dmxAccountChoiceList label > i{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }
}

/* =========================================================
   ACCOUNT HEADER STABLE FIX
   ========================================================= */
.dmxAccountAppHeader{
  display:grid !important;
  grid-template-columns:52px minmax(0,1fr) 42px !important;
  align-items:center !important;
  gap:13px !important;
}

.dmxAccountAppHeader > .dmxAccountBack,
.dmxAccountAppHeader > .dmxAccountAppAvatar{
  grid-column:1 !important;
  grid-row:1 !important;
}

.dmxAccountAppHeader > .dmxAccountAppTitle{
  grid-column:2 !important;
  grid-row:1 !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}

.dmxAccountAppHeader > .dmxAccountLogoutMini{
  grid-column:3 !important;
  grid-row:1 !important;
}

.dmxAccountAppTitle h1,
.dmxAccountAppTitle p{
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.dmxAccountAppTitle h1{
  white-space:nowrap !important;
}

.dmxAccountAppTitle p{
  white-space:normal !important;
  line-height:1.2 !important;
}

.dmxAccountBack + .dmxAccountAppAvatar{
  display:flex !important;
}

@media(max-width:520px){
  .dmxAccountAppHeader{
    grid-template-columns:48px minmax(0,1fr) 40px !important;
    gap:10px !important;
  }
}

/* =========================================================
   APPEARANCE AUTO SAVE
   ========================================================= */
.dmxAppearanceForm .dmxBtnPrimary{
  display:none !important;
}
.dmxAppearanceSelectWrap{
  gap:0 !important;
}
.dmxAppearanceSelectWrap > span{
  display:none !important;
}
.dmxAppearanceSelect{
  margin:0 !important;
}

/* =========================================================
   NOTIFICATIONS CHECKBOX ONLY CLICK
   ========================================================= */
.dmxNotifyChoiceList .dmxNotifyCheckItem{
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 24px !important;
  grid-template-areas:"ico txt chk" !important;
  align-items:center !important;
  gap:12px !important;
  min-height:74px !important;
  padding:14px 15px !important;
  border:1px solid var(--border) !important;
  border-radius:18px !important;
  background:rgba(15,23,42,.03) !important;
  text-align:left !important;
  cursor:default !important;
}

.dmxNotifyChoiceList .dmxNotifyCheckItem > i{
  grid-area:ico !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:14px !important;
  background:rgba(67,212,0,.10) !important;
  color:#43d400 !important;
}

.dmxNotifyChoiceList .dmxNotifyCheckItem > span{
  grid-area:txt !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  align-items:flex-start !important;
  text-align:left !important;
}

.dmxNotifyChoiceList .dmxNotifyCheckItem > input[type="checkbox"]{
  grid-area:chk !important;
  justify-self:center !important;
  align-self:center !important;
  width:20px !important;
  height:20px !important;
  margin:0 !important;
  cursor:pointer !important;
  accent-color:#43d400 !important;
}

html[data-theme="dark"] .dmxNotifyChoiceList .dmxNotifyCheckItem,
[data-theme="dark"] .dmxNotifyChoiceList .dmxNotifyCheckItem{
  background:rgba(15,23,42,.86) !important;
  border-color:rgba(148,163,184,.18) !important;
}

@media(max-width:520px){
  .dmxNotifyChoiceList .dmxNotifyCheckItem{
    grid-template-columns:38px minmax(0,1fr) 22px !important;
    gap:10px !important;
    min-height:70px !important;
  }

  .dmxNotifyChoiceList .dmxNotifyCheckItem > i{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }
}

/* =========================================================
   ACCOUNT LOGOUT MENU ITEM
   ========================================================= */
.dmxAccountAppMenu a.dmxAccountLogoutListItem > i{
  background:rgba(239,68,68,.10) !important;
  color:#ef4444 !important;
}

.dmxAccountAppMenu a.dmxAccountLogoutListItem strong{
  color:#ef4444 !important;
}

/* =========================================================
   SUBSCRIPTION BUTTONS RIGHT
   ========================================================= */
.dmxSubscriptionPanel .dmxAccountActions,
.dmxSubscriptionPanel .dmxManageActions{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  width:100% !important;
}

.dmxSubscriptionPanel .dmxManageBox > .dmxBtn,
.dmxSubscriptionPanel .dmxManageBox > a.dmxBtn{
  float:right !important;
}

.dmxSubscriptionPanel .dmxManageBox::after{
  content:"" !important;
  display:block !important;
  clear:both !important;
}

.dmxSubscriptionPanel .dmxAccountActions .dmxBtn,
.dmxSubscriptionPanel .dmxManageActions .dmxBtn,
.dmxSubscriptionPanel .dmxManageActions button{
  width:auto !important;
  min-width:170px !important;
}

@media(max-width:520px){
  .dmxSubscriptionPanel .dmxAccountActions,
  .dmxSubscriptionPanel .dmxManageActions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    justify-content:stretch !important;
  }

  .dmxSubscriptionPanel .dmxAccountActions .dmxBtn,
  .dmxSubscriptionPanel .dmxManageActions .dmxBtn,
  .dmxSubscriptionPanel .dmxManageActions button{
    width:100% !important;
    min-width:0 !important;
  }

  .dmxSubscriptionPanel .dmxManageBox > .dmxBtn,
  .dmxSubscriptionPanel .dmxManageBox > a.dmxBtn{
    float:none !important;
    width:100% !important;
  }
}

/* =========================================================
   SUBSCRIPTION ACTION ORDER
   ========================================================= */
.dmxSubscriptionPanel .dmxAccountActions > :not(a[href*="precios"]){
  order:1 !important;
}

.dmxSubscriptionPanel .dmxAccountActions > a[href*="precios"]{
  order:2 !important;
}

/* =========================================================
   MOBILE 9X16 TYPOGRAPHY SCALE

   CLAVE DEL AJUSTE GLOBAL:
   - Base visual móvil: relación 9:16.
   - Usa --dmx-mobile-visual-width para mantener proporciones similares
     entre teléfonos pequeños, normales y grandes.
   - Esta regla define la escala general de TODA la app en móvil.
   - No aumentar aquí agresivamente porque afecta toda la interfaz.

   NO TOCAR si solo se quiere ajustar cuestionarios.
   Para cuestionarios de alta resolución, usar el bloque:
   HIGH RES MOBILE QUESTION ONLY BOOST.
   ========================================================= */
@media (max-width:760px){
  :root{
    --dmx-mobile-vh-ref:100vh;
    --dmx-mobile-visual-width:min(100vw, calc(var(--dmx-mobile-vh-ref) * .5625));
    --dmx-mobile-type-scale:clamp(.92, calc(var(--dmx-mobile-visual-width) / 390), 1.13);
  }

  @supports (height:100svh){
    :root{
      --dmx-mobile-vh-ref:100svh;
    }
  }

  html{
    font-size:calc(16px * var(--dmx-mobile-type-scale)) !important;
    -webkit-text-size-adjust:100% !important;
    text-size-adjust:100% !important;
  }

  body,
  button,
  input,
  select,
  textarea{
    font-size:1rem !important;
    -webkit-text-size-adjust:100% !important;
    text-size-adjust:100% !important;
  }

  h1,
  .dmxPageHead h1,
  .dmxStageHeader h1,
  .dmxAccountAppTitle h1,
  .dmxHomeV2Hero h1,
  .dmxHero h1{
    font-size:calc(30px * var(--dmx-mobile-type-scale)) !important;
    line-height:1.06 !important;
  }

  h2,
  .dmxCard h2,
  .dmxPanel h2,
  .dmxAccountAppPanel h2,
  .dmxResult h2,
  .dmxQuestion h2,
  .dmxQuestion h3,
  .dmxQuestionText{
    font-size:calc(25px * var(--dmx-mobile-type-scale)) !important;
    line-height:1.12 !important;
  }

  h3,
  .dmxCard h3,
  .dmxPanel h3{
    font-size:calc(21px * var(--dmx-mobile-type-scale)) !important;
    line-height:1.16 !important;
  }

  p,
  label,
  .dmxMuted,
  .dmxPageHead p,
  .dmxStageHeader p,
  .dmxAccountAppTitle p,
  .dmxCard p,
  .dmxPanel p,
  .dmxQuestionTop,
  .dmxQuestionTop > div,
  .dmxQuestionTop strong{
    font-size:calc(16px * var(--dmx-mobile-type-scale)) !important;
    line-height:1.32 !important;
  }

  small,
  em,
  .dmxSmall,
  .dmxHint,
  .dmxMeta,
  .dmxBadge,
  .dmxPill{
    font-size:calc(14px * var(--dmx-mobile-type-scale)) !important;
    line-height:1.25 !important;
  }

  .dmxBtn,
  .btn,
  button.dmxBtn,
  a.dmxBtn{
    font-size:calc(17px * var(--dmx-mobile-type-scale)) !important;
    line-height:1.15 !important;
  }

  .dmxBtn span,
  .btn span{
    font-size:inherit !important;
    line-height:inherit !important;
  }

  .dmxOption,
  .dmxOption span,
  .dmxOptionText,
  .dmxAnswerOption,
  .dmxAnswerOption span,
  [data-answer],
  [data-answer] span{
    font-size:calc(16px * var(--dmx-mobile-type-scale)) !important;
    line-height:1.16 !important;
  }

  .dmxOption b,
  .dmxAnswerOption b,
  [data-answer] b{
    font-size:calc(13px * var(--dmx-mobile-type-scale)) !important;
  }

  .dmxAccountAppMenu a span strong{
    font-size:calc(20px * var(--dmx-mobile-type-scale)) !important;
    line-height:1.12 !important;
  }

  .dmxAccountAppMenu a span em,
  .dmxNav a,
  .dmxTopNav a,
  .dmxBottomNav a{
    font-size:calc(15px * var(--dmx-mobile-type-scale)) !important;
    line-height:1.2 !important;
  }

  [data-question-timer],
  [data-practice-countdown]{
    font-size:calc(18px * var(--dmx-mobile-type-scale)) !important;
    line-height:1 !important;
  }
}

/* =========================================================
   HIGH DPI MOBILE TYPOGRAPHY BOOST

   Ajuste de respaldo para móviles con DPR alto.
   Sirve como apoyo, pero la detección principal queda en JS con
   html.dmxHiResMobile porque CSS no siempre puede distinguir bien
   resolución física real vs pixeles CSS.

   No subir demasiado: puede agrandar móviles que ya se ven correctos.
   ========================================================= */
@media (max-width:760px) and (min-resolution:2.75dppx){
  :root{
    --dmx-mobile-type-scale:clamp(1.08, calc(var(--dmx-mobile-visual-width) / 355), 1.20) !important;
  }
}

@media (max-width:760px) and (-webkit-min-device-pixel-ratio:2.75){
  :root{
    --dmx-mobile-type-scale:clamp(1.08, calc(var(--dmx-mobile-visual-width) / 355), 1.20) !important;
  }
}

/* =========================================================
   HIGH RES MOBILE QUESTION ONLY BOOST

   AJUSTE FINAL QUE QUEDÓ CORRECTO:
   - Solo aplica cuando JS agrega html.dmxHiResMobile.
   - Solo aumenta la PREGUNTA del cuestionario.
   - NO cambia respuestas, botones, cards ni textos globales.
   - Motivo: en móviles alta gama las respuestas ya quedaron bien,
     pero la pregunta se veía casi del mismo tamaño.

   NO MOVER respuestas aquí.
   NO cambiar a max-width general sin clase dmxHiResMobile.
   ========================================================= */
@media (max-width:760px){
  html.dmxHiResMobile #qaShell [data-question-id] h2,
  html.dmxHiResMobile #qaShell [data-question-id] h3,
  html.dmxHiResMobile #qaShell .dmxQuestionText,
  html.dmxHiResMobile #qaShell .dmxQuestion > h2,
  html.dmxHiResMobile #qaShell .dmxQuestion > h3{
    font-size:calc(30px * var(--dmx-mobile-type-scale, 1)) !important;
    line-height:1.08 !important;
    font-weight:900 !important;
    letter-spacing:-.04em !important;
  }
}

/* =========================================================
   NIVEL ETAPAS MAQUETA
   Solo afecta /nivel/{n}/etapas/. No tocar .dmxMap/.dmxMission.
   ========================================================= */
.dmxStagePickerHead{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:center;
  margin-bottom:22px;
}

.dmxStagePickerBack{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  box-shadow:var(--shadow-soft);
  text-decoration:none;
}

.dmxStagePickerGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:16px;
}

.dmxStagePickCard{
  min-height:230px;
  padding:18px;
  border-radius:28px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.dmxStagePickNumber{
  width:54px;
  height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:22px;
  color:white;
  background:linear-gradient(180deg,#38bdf8,#0284c7);
  box-shadow:0 8px 0 rgba(2,132,199,.35);
}

.dmxStagePickCard.done .dmxStagePickNumber{
  background:linear-gradient(180deg,#74d63b,#43c900);
  box-shadow:0 8px 0 rgba(58,144,24,.35);
}

.dmxStagePickBody{flex:1}
.dmxStagePickBody h2{margin:0 0 10px;font-size:24px;line-height:1.05}
.dmxStagePickMeta{display:flex;flex-wrap:wrap;gap:8px}

.dmxStagePickMeta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(148,163,184,.12);
  color:var(--muted);
  font-weight:900;
  font-size:13px;
  line-height:1;
}

.dmxStagePickCard > .dmxBtn{width:100%;justify-content:center}
.dmxStagePickCard.locked{opacity:.74}
.dmxStagePickLocked{cursor:not-allowed!important}

@media(max-width:760px){
  .dmxStagePickerHead{grid-template-columns:48px 1fr;gap:12px;margin-bottom:16px}
  .dmxStagePickerBack{width:48px;height:48px;border-radius:16px}
  .dmxStagePickerGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .dmxStagePickCard{min-height:190px;padding:12px;border-radius:22px;gap:10px}
  .dmxStagePickNumber{width:42px;height:42px;border-radius:15px;font-size:calc(17px * var(--dmx-mobile-type-scale, 1));box-shadow:0 6px 0 rgba(2,132,199,.35)}
  .dmxStagePickBody h2{font-size:calc(18px * var(--dmx-mobile-type-scale, 1))}
  .dmxStagePickMeta{gap:6px}
  .dmxStagePickMeta span{font-size:calc(10px * var(--dmx-mobile-type-scale, 1));padding:5px 7px}
  .dmxStagePickCard > .dmxBtn{min-height:38px;font-size:calc(12px * var(--dmx-mobile-type-scale, 1));padding:8px}
}

/* =========================================================
   NIVELES: PROGRESO MISMA ESTRUCTURA
   Los niveles started deben verse estructuralmente igual que el resto.
   Solo cambia el color del globo, botón y etiqueta de progreso.
   No tocar fondo, borde, padding, sombras ni layout de la tarjeta.
   ========================================================= */
.dmxMap .dmxMission.started{
  background:var(--card) !important;
  border-color:var(--border) !important;
  box-shadow:var(--shadow-soft) !important;
}

.dmxMap .dmxMission.started .dmxNode{
  background:linear-gradient(180deg,#fbbf24,#f59e0b) !important;
  color:#fff !important;
  border-bottom-color:#d97706 !important;
  box-shadow:none !important;
}


.dmxMap .dmxMission.started .dmxProgressTag,
.dmxMap .dmxMission.started .dmxScoreTag{
  background:rgba(245,158,11,.16) !important;
  color:#b45309 !important;
  border-color:rgba(245,158,11,.28) !important;
}

/* =========================================================
   NIVELES: CONTINUAR ESTRUCTURA ORIGINAL

   Regla definitiva:
   - NO toca Repasar.
   - NO cambia tamaño, padding, radio, sombra ni layout.
   - Comenzar queda con la estructura original de .dmxBtnEnter.
   - Continuar usa la MISMA estructura original de .dmxBtnEnter.
   - Solo cambia color y borde inferior del estado started.
   ========================================================= */
.dmxMap .dmxMission.started .dmxBtnEnter{
  background:#f5a90b !important;
  color:#fff !important;
  border-bottom-color:#d97706 !important;
}

/* =========================================================
   NIVELES: BOTONES FULL WIDTH SOLO <=600PX
   Antes el cambio ocurría cerca de 900px. Ahora la vista horizontal
   de /niveles/ se mantiene hasta 601px; desde 600px baja a full width.
   ========================================================= */
@media (min-width:601px){
  .dmxMap .dmxMission{
    grid-template-columns:auto 1fr auto !important;
  }

  .dmxMap .dmxMission > form,
  .dmxMap .dmxMission > a.dmxBtn,
  .dmxMap .dmxMission > .dmxLockedBtn{
    width:auto !important;
    max-width:none !important;
    grid-column:auto !important;
    justify-self:end !important;
  }

  .dmxMap .dmxMission .dmxBtn,
  .dmxMap .dmxMission .dmxLockedBtn{
    width:auto !important;
  }
}

@media (max-width:600px){
  .dmxMap .dmxMission > form,
  .dmxMap .dmxMission > a.dmxBtn,
  .dmxMap .dmxMission > .dmxLockedBtn{
    width:100% !important;
  }

  .dmxMap .dmxMission .dmxBtn,
  .dmxMap .dmxMission .dmxLockedBtn{
    width:100% !important;
  }
}

/* =========================================================
   NIVEL ETAPAS MISMO DISEÑO QUE NIVELES
   Solo afecta /nivel/{n}/etapas/.
   No toca /niveles/ ni .dmxMap/.dmxMission.
   ========================================================= */

.dmxStagePickerGrid{
  position:relative;
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
}

.dmxStagePickerGrid::before{
  content:"";
  position:absolute;
  left:42px;
  top:28px;
  bottom:28px;
  width:10px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(74,222,128,.22),rgba(56,189,248,.22),rgba(99,102,241,.18));
  z-index:0;
}

.dmxStagePickCard{
  position:relative;
  z-index:1;
  min-height:120px !important;
  padding:22px !important;
  border-radius:30px !important;
  background:var(--card) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow-soft) !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  gap:22px !important;
  align-items:center !important;
}

.dmxStagePickNumber{
  width:78px !important;
  height:78px !important;
  min-width:78px !important;
  min-height:78px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:30px !important;
  font-weight:950 !important;
  line-height:1 !important;
  color:#fff !important;
  background:var(--dmx-blue) !important;
  box-shadow:0 8px 0 #0b83bd !important;
}

.dmxStagePickCard.done .dmxStagePickNumber{
  background:var(--dmx-green) !important;
  box-shadow:0 8px 0 var(--dmx-green2) !important;
}

.dmxStagePickCard.locked .dmxStagePickNumber{
  background:#94a3b8 !important;
  box-shadow:0 8px 0 #64748b !important;
}

.dmxStagePickBody{
  min-width:0 !important;
  flex:none !important;
}

.dmxStagePickBody h2{
  margin:0 0 12px !important;
  font-size:30px !important;
  line-height:1.05 !important;
  letter-spacing:-.04em !important;
  color:var(--text) !important;
}

.dmxStagePickMeta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:center !important;
}

.dmxStagePickMeta span{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:8px 13px !important;
  border-radius:999px !important;
  background:rgba(148,163,184,.12) !important;
  color:var(--muted) !important;
  font-size:15px !important;
  line-height:1 !important;
  font-weight:950 !important;
  white-space:nowrap !important;
}

.dmxStagePickCard > .dmxBtn{
  justify-self:end !important;
  width:auto !important;
  min-width:170px !important;
  min-height:56px !important;
  padding:0 24px !important;
  border-radius:22px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  line-height:1 !important;
  font-weight:950 !important;
}

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

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

.dmxStagePickLocked{
  background:#e5e7eb !important;
  color:#64748b !important;
  border-bottom-color:#cbd5e1 !important;
  cursor:not-allowed !important;
}

html[data-theme="dark"] .dmxStagePickLocked,
[data-theme="dark"] .dmxStagePickLocked{
  background:#1f2937 !important;
  color:#94a3b8 !important;
  border-bottom-color:#111827 !important;
}

@media (max-width:600px){
  .dmxStagePickerGrid{
    gap:14px !important;
  }

  .dmxStagePickerGrid::before{
    left:30px;
    width:8px;
  }

  .dmxStagePickCard{
    min-height:0 !important;
    padding:18px !important;
    border-radius:26px !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    gap:16px !important;
  }

  .dmxStagePickNumber{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    min-height:58px !important;
    font-size:calc(22px * var(--dmx-mobile-type-scale,1)) !important;
    box-shadow:0 7px 0 #0b83bd !important;
  }

  .dmxStagePickCard.done .dmxStagePickNumber{
    box-shadow:0 7px 0 var(--dmx-green2) !important;
  }

  .dmxStagePickCard.locked .dmxStagePickNumber{
    box-shadow:0 7px 0 #64748b !important;
  }

  .dmxStagePickBody h2{
    font-size:calc(23px * var(--dmx-mobile-type-scale,1)) !important;
    margin-bottom:10px !important;
  }

  .dmxStagePickMeta{
    gap:7px !important;
  }

  .dmxStagePickMeta span{
    font-size:calc(12px * var(--dmx-mobile-type-scale,1)) !important;
    padding:7px 10px !important;
  }

  .dmxStagePickCard > .dmxBtn{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
    min-height:52px !important;
    margin-top:2px !important;
    border-radius:20px !important;
    font-size:calc(16px * var(--dmx-mobile-type-scale,1)) !important;
  }
}

/* =========================================================
   NIVEL ETAPAS ENTRADA OFICIAL
   Solo afecta /nivel/{n}/etapas/.
   Mantiene el diseño del botón aunque ahora sea POST.
   ========================================================= */

.dmxStagePickActionForm{
  margin:0 !important;
  justify-self:end !important;
  width:auto !important;
}

.dmxStagePickActionForm > .dmxBtn{
  width:auto !important;
  min-width:170px !important;
  min-height:56px !important;
  padding:0 24px !important;
  border-radius:22px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  line-height:1 !important;
  font-weight:950 !important;
}

.dmxStageReviewModalOverlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(15,23,42,.58);
  backdrop-filter:blur(10px);
}

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

.dmxStageReviewModal{
  width:min(520px,100%);
  border-radius:30px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:0 24px 90px rgba(0,0,0,.28);
  padding:26px;
  text-align:center;
}

.dmxStageReviewIcon{
  width:66px;
  height:66px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 14px;
  color:#fff;
  background:linear-gradient(180deg,#fbbf24,#f59e0b);
  font-size:28px;
}

.dmxStageReviewModal h2{
  margin:0 0 10px;
  font-size:28px;
  line-height:1.05;
  letter-spacing:-.04em;
}

.dmxStageReviewModal p{
  margin:0;
  color:var(--muted);
  font-weight:750;
  line-height:1.45;
}

.dmxStageReviewActions{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:22px;
}

@media(max-width:600px){
  .dmxStagePickActionForm{
    grid-column:1 / -1 !important;
    width:100% !important;
  }

  .dmxStagePickActionForm > .dmxBtn{
    width:100% !important;
    min-width:0 !important;
    min-height:52px !important;
    border-radius:20px !important;
    font-size:calc(16px * var(--dmx-mobile-type-scale,1)) !important;
  }

  .dmxStageReviewActions{
    flex-direction:column;
  }

  .dmxStageReviewActions .dmxBtn{
    width:100%;
  }
}

/* =========================================================
   REPASAR MODAL BOTONES 2 COLUMNAS
   Fuerza Volver/Aceptar en 2 columnas siempre.
   ========================================================= */
.dmxStageReviewActions{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:12px !important;
  align-items:stretch !important;
}

.dmxStageReviewActions > form{
  margin:0 !important;
  min-width:0 !important;
  width:100% !important;
}

.dmxStageReviewActions > .dmxBtn,
.dmxStageReviewActions > form > .dmxBtn{
  width:100% !important;
  min-width:0 !important;
  justify-content:center !important;
  white-space:nowrap !important;
}

/* =========================================================
   NIVEL ETAPAS BOTON PRACTICAR
   Solo afecta botones Practicar/Rehacer en etapas superadas.
   - Desde 700px hacia abajo: ambos botones ocupan 100% de su columna.
   - Siempre 2 columnas.
   - Solo bajo 350px se permite apilar.
   ========================================================= */
.dmxStagePickActions{
  justify-self:end !important;
  display:grid !important;
  grid-template-columns:auto auto !important;
  gap:10px !important;
  align-items:center !important;
}

.dmxStagePickActions .dmxStagePickActionForm{
  justify-self:auto !important;
  grid-column:auto !important;
  width:auto !important;
  min-width:0 !important;
}

.dmxStagePickActions .dmxBtn{
  min-width:150px !important;
}

@media(max-width:850px){
  .dmxStagePickActions{
    grid-column:1 / -1 !important;
    width:100% !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  }

  .dmxStagePickActions .dmxStagePickActionForm{
    grid-column:auto !important;
    width:100% !important;
    min-width:0 !important;
  }

  .dmxStagePickActions .dmxBtn{
    width:100% !important;
    min-width:0 !important;
  }
}

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

/* =========================================================
   NIVEL ETAPAS TEXTO EXACTO NIVELES
   Copia los tamaños reales de /niveles/ hacia /nivel/{n}/etapas/.
   ========================================================= */

.dmxStagePickBody h2{
  font-size:24px !important;
  letter-spacing:-.035em !important;
  line-height:normal !important;
}

.dmxStagePickMeta{
  gap:8px !important;
}

.dmxStagePickMeta span{
  padding:6px 10px !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:normal !important;
}

@media(max-width:760px){
  .dmxStagePickBody h2{
    font-size:22px !important;
    line-height:1.08 !important;
  }

  .dmxStagePickMeta{
    gap:6px !important;
  }

  .dmxStagePickMeta span{
    font-size:11px !important;
    padding:5px 8px !important;
  }
}

/* =========================================================
   NIVEL ETAPAS COLORES EXACTOS NIVELES
   Aplica a /nivel/{n}/etapas/ la misma lógica visual de /niveles/:
   - Disponible/Comenzar: azul en botón.
   - Superado/Rehacer: verde en botón.
   - En progreso/Continuar: naranja.
   - Bloqueado: gris.
   Solo afecta /etapas/.
   ========================================================= */

/* Globos */
.dmxStagePickCard.open .dmxStagePickNumber{
  background:var(--dmx-blue) !important;
  color:#fff !important;
  box-shadow:0 8px 0 #0b83bd !important;
}

.dmxStagePickCard.started .dmxStagePickNumber{
  background:#f5a90b !important;
  color:#fff !important;
  border-bottom-color:#d97706 !important;
  box-shadow:none !important;
}

.dmxStagePickCard.done .dmxStagePickNumber{
  background:var(--dmx-green) !important;
  color:#fff !important;
  box-shadow:0 8px 0 var(--dmx-green2) !important;
}

.dmxStagePickCard.locked .dmxStagePickNumber{
  background:#98a2b3 !important;
  color:#fff !important;
  box-shadow:0 8px 0 #667085 !important;
}

/* Botones */
.dmxStagePickCard.open .dmxBtnBlue{
  background:var(--dmx-blue) !important;
  color:#fff !important;
  border-bottom-color:#0b83bd !important;
}

.dmxStagePickCard.started .dmxBtnBlue{
  background:#f5a90b !important;
  color:#fff !important;
  border-bottom-color:#d97706 !important;
}

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

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

/* Etiquetas */
.dmxStagePickCard.started .dmxStagePickMeta span{
  background:rgba(245,158,11,.16) !important;
  color:#b45309 !important;
  border-color:rgba(245,158,11,.28) !important;
}

.dmxStagePickCard.done .dmxStagePickMeta span{
  background:rgba(34,197,94,.14) !important;
  color:#15803d !important;
  border-color:rgba(34,197,94,.24) !important;
}

.dmxStagePickCard.open .dmxStagePickMeta span{
  background:rgba(14,165,233,.12) !important;
  color:#0369a1 !important;
  border-color:rgba(14,165,233,.22) !important;
}

.dmxStagePickCard.locked .dmxStagePickMeta span{
  background:rgba(148,163,184,.14) !important;
  color:#64748b !important;
  border-color:rgba(148,163,184,.24) !important;
}

/* =========================================================
   NIVEL ETAPAS COLOR NOTA
   Copia exacta de colores de /niveles/ para la etiqueta "{n}/10":
   10/10 verde, 9/10 azul, 8/10 amarillo, 7/10 naranja.
   ========================================================= */
.dmxStagePickMeta span.dmxStageScoreTag{
  border:0 !important;
  font-weight:950 !important;
}

.dmxStagePickMeta span.dmxStageScoreTag.dmxScore100{
  background:var(--dmx-green) !important;
  color:#fff !important;
}

.dmxStagePickMeta span.dmxStageScoreTag.dmxScore90{
  background:var(--dmx-blue) !important;
  color:#fff !important;
}

.dmxStagePickMeta span.dmxStageScoreTag.dmxScore80{
  background:linear-gradient(180deg,#ffd95a 0%, #ffca28 100%) !important;
  color:#5c3b00 !important;
}

.dmxStagePickMeta span.dmxStageScoreTag.dmxScore70{
  background:#f97316 !important;
  color:#fff !important;
}

.dmxStagePickMeta span.dmxStageScoreTag.dmxScoreBad{
  background:#ef4444 !important;
  color:#fff !important;
}

/* =========================================================
   NIVEL ETAPAS ESTADO REPROBADO
   Etapas con puntaje oficial menor a 7/10.
   ========================================================= */
.dmxStagePickCard.failed .dmxStagePickNumber{
  background:#ef4444 !important;
  color:#fff !important;
  box-shadow:0 8px 0 #b91c1c !important;
}

.dmxStagePickCard.failed .dmxBtnBlue,
.dmxStagePickCard.failed .dmxBtn{
  background:#ef4444 !important;
  color:#fff !important;
  border-bottom-color:#b91c1c !important;
}

.dmxStagePickCard.failed .dmxStagePickMeta span{
  background:rgba(239,68,68,.12) !important;
  color:#b91c1c !important;
  border-color:rgba(239,68,68,.22) !important;
}

.dmxStagePickCard.failed .dmxStagePickMeta span.dmxStageScoreTag.dmxScoreBad{
  background:#ef4444 !important;
  color:#fff !important;
  border-color:#b91c1c !important;
}

/* =========================================================
   NIVEL ETAPAS BOTON INFORME
   Practicar / Informe / Rehacer en etapas superadas.
   ========================================================= */
.dmxStagePickActions{
  grid-template-columns:auto auto auto !important;
}

.dmxStagePickReportBtn{
  text-decoration:none !important;
  justify-content:center !important;
  min-width:150px !important;
}

@media(max-width:850px){
  .dmxStagePickActions{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important;
  }

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

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

/* =========================================================
   NIVEL ETAPAS BOTON INFORME BLANCO
   El botón Informe debe diferenciarse de Practicar/Rehacer.
   ========================================================= */
.dmxStagePickActions .dmxStagePickReportBtn{
  background:#fff !important;
  color:var(--text) !important;
  border:1px solid rgba(148,163,184,.35) !important;
  border-bottom:4px solid rgba(148,163,184,.55) !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .dmxStagePickActions .dmxStagePickReportBtn{
  background:#f8fafc !important;
  color:#0f172a !important;
}

/* =========================================================
   NIVEL ETAPAS BOTON INFORME BLANCO FINAL
   Debe pisar colores de .done/.dmxBtnBlue.
   ========================================================= */
.dmxStagePickCard.done .dmxStagePickActions a.dmxStagePickReportBtn,
.dmxStagePickActions a.dmxStagePickReportBtn{
  background:#fff !important;
  background-image:none !important;
  color:#0f172a !important;
  border:1px solid rgba(148,163,184,.40) !important;
  border-bottom:4px solid rgba(148,163,184,.60) !important;
  box-shadow:none !important;
}

.dmxStagePickCard.done .dmxStagePickActions a.dmxStagePickReportBtn i,
.dmxStagePickCard.done .dmxStagePickActions a.dmxStagePickReportBtn span,
.dmxStagePickActions a.dmxStagePickReportBtn i,
.dmxStagePickActions a.dmxStagePickReportBtn span{
  color:#0f172a !important;
}

/* =========================================================
   NIVEL ETAPAS BOTONES NO CRECEN EN MOBILE
   Evita que Practicar / Informe / Rehacer / Comenzar / Continuar
   aumenten de tamaño al entrar en <=760px.
   ========================================================= */
@media(max-width:760px){
  .dmxStagePickCard > .dmxBtn,
  .dmxStagePickActionForm > .dmxBtn,
  .dmxStagePickActions .dmxBtn,
  .dmxStagePickReportBtn{
    font-size:15px !important;
    line-height:1 !important;
  }

  .dmxStagePickCard > .dmxBtn span,
  .dmxStagePickActionForm > .dmxBtn span,
  .dmxStagePickActions .dmxBtn span,
  .dmxStagePickReportBtn span{
    font-size:inherit !important;
    line-height:inherit !important;
  }
}


/* =========================================================
   NIVEL ETAPAS TOOLS PRO PREMIUM SAFE
   Botones bloqueados Practicar/Informe abren aviso PRO/PREMIUM.
   ========================================================= */
.dmxStagePickActions button.dmxStagePickReportBtn{
  cursor:pointer !important;
  background:#fff !important;
  background-image:none !important;
  color:#0f172a !important;
  border:1px solid rgba(148,163,184,.40) !important;
  border-bottom:4px solid rgba(148,163,184,.60) !important;
  box-shadow:none !important;
}
.dmxStagePickActions button.dmxStagePickReportBtn i,
.dmxStagePickActions button.dmxStagePickReportBtn span{
  color:#0f172a !important;
}

/* =========================================================
   NIVEL ETAPAS MODAL PRO PREMIUM DISEÑO FINAL
   Modal sólido y mensajes específicos por botón.
   ========================================================= */

/* =========================================================
   NIVEL ETAPAS MODAL TEXTO PESO CORRECTO
   El texto normal no va en negrita. Solo PRO/PREMIUM.
   ========================================================= */

/* =========================================================
   NIVEL ETAPAS MODAL PLANES BLANCOS
   PRO/cohete y PREMIUM/corona en blanco dentro del modal.
   ========================================================= */

/* =========================================================
   NIVEL ETAPAS MODAL PRO PREMIUM BLANCO
   PRO/PREMIUM e iconos dentro del texto deben ir blancos.
   ========================================================= */

/* =========================================================
   NIVEL ETAPAS MODAL ICONOS BLANCO REAL
   Fuerza PRO/PREMIUM e iconos del texto a blanco puro.
   ========================================================= */

/* =========================================================
   NIVEL ETAPAS BOTONES GAP COMPACTO 850
   Desde 850px hacia abajo reduce espacio entre icono y texto.
   ========================================================= */
@media(max-width:850px){
  .dmxStagePickActions .dmxBtn,
  .dmxStagePickActionForm > .dmxBtn,
  .dmxStagePickReportBtn{
    gap:6px !important;
  }

  .dmxStagePickActions .dmxBtn i,
  .dmxStagePickActionForm > .dmxBtn i,
  .dmxStagePickReportBtn i{
    margin-right:0 !important;
  }
}

@media(max-width:420px){
  .dmxStagePickActions .dmxBtn,
  .dmxStagePickActionForm > .dmxBtn,
  .dmxStagePickReportBtn{
    gap:4px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
}

/* =========================================================
   NIVEL ETAPAS BOTONES TEXTO ICONOS COMPACTO 400
   Desde 400px hacia abajo reduce levemente texto e iconos.
   ========================================================= */
@media(max-width:400px){
  .dmxStagePickActions .dmxBtn,
  .dmxStagePickActionForm > .dmxBtn,
  .dmxStagePickReportBtn{
    font-size:14px !important;
  }

  .dmxStagePickActions .dmxBtn i,
  .dmxStagePickActionForm > .dmxBtn i,
  .dmxStagePickReportBtn i{
    font-size:.92em !important;
  }
}
/* =========================================================
   NIVELES MODAL MODO PRACTICA PREMIUM BLANCO
   PREMIUM/corona en negrita y blanco.
   ========================================================= */
.dmxPracticeGateOverlay[data-dmx-practice-premium-modal] p strong,
.dmxPracticeGateOverlay[data-dmx-practice-premium-modal] p i,
.dmxPracticeGateOverlay[data-dmx-practice-premium-modal] p i::before{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-weight:1000 !important;
  opacity:1 !important;
}

/* =========================================================
   NIVELES MODAL PRACTICA PREMIUM TEXTO BLANCO
   PREMIUM/corona en negrita y blanco dentro del modal.
   ========================================================= */
.dmxPracticeGateOverlay[data-dmx-practice-premium-modal] p strong,
.dmxPracticeGateOverlay[data-dmx-practice-premium-modal] p i,
.dmxPracticeGateOverlay[data-dmx-practice-premium-modal] p i::before{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-weight:1000 !important;
  opacity:1 !important;
}
/* =========================================================
   PRO JUMP LOCK BUTTONS
   Botones bloqueados por avance, no por precio base.
   ========================================================= */
button.dmxLockedBtn,
.dmxProJumpLockBtn{
  border:0 !important;
  cursor:pointer !important;
}
/* =========================================================
   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;
  }
}



/* Modo Práctica: selector de ritmo */
.dmxPracticeSetupRow{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-items:end;
  margin:0 0 4px;
}
.dmxPracticeQuestionCount{
  min-width:0;
}
.dmxPracticePaceField{
  margin:0;
  min-width:0;
}
.dmxPracticePaceOptions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.dmxPracticePaceOption{
  position:relative;
  cursor:pointer;
  color:inherit;
  min-width:0;
}
.dmxPracticePaceOption input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.dmxPracticePaceOption span{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:10px 14px;
  border:1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius:14px;
  background:color-mix(in srgb, currentColor 4%, transparent);
  color:inherit;
  font-weight:900;
  white-space:nowrap;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.dmxPracticePaceOption input:checked+span{
  border-color:color-mix(in srgb, currentColor 62%, transparent);
  background:color-mix(in srgb, currentColor 10%, transparent);
  box-shadow:0 10px 28px color-mix(in srgb, currentColor 12%, transparent), inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent);
}
.dmxPracticePaceOption input:focus-visible+span{
  outline:2px solid color-mix(in srgb, currentColor 45%, transparent);
  outline-offset:2px;
}
.dmxPracticePaceOption span:active{
  transform:scale(.985);
}
@supports not (background: color-mix(in srgb, currentColor 10%, transparent)){
  .dmxPracticePaceOption span{
    border-color:currentColor;
    background:transparent;
  }
  .dmxPracticePaceOption input:checked+span{
    border-color:currentColor;
    box-shadow:inset 0 0 0 2px currentColor;
  }
  .dmxPracticePaceOption input:focus-visible+span{
    outline:2px solid currentColor;
  }
}
@media (min-width:760px){
  .dmxPracticeSetupRow{
    grid-template-columns:minmax(220px,280px) minmax(280px,360px);
  }
}

/* Modo Práctica: layout escritorio corregido sin solapes */
@media (min-width:900px){
  .dmxPracticeHome .dmxAccountForm{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    width:100%!important;
    max-width:none!important;
    align-items:end!important;
  }

  .dmxPracticeHome .dmxPracticeSetupRow{
    display:grid!important;
    grid-template-columns:minmax(240px,320px) minmax(360px,460px)!important;
    gap:14px 18px!important;
    align-items:end!important;
    width:100%!important;
    max-width:800px!important;
    margin:0!important;
    min-width:0!important;
  }

  .dmxPracticeHome .dmxPracticeQuestionCount,
  .dmxPracticeHome .dmxPracticePaceField{
    margin:0!important;
    min-width:0!important;
  }

  .dmxPracticeHome .dmxPracticeQuestionCount .authInput{
    width:100%!important;
  }

  .dmxPracticeHome .dmxPracticePaceOptions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(170px,1fr))!important;
    gap:10px!important;
  }

  .dmxPracticeHome .dmxPracticePaceOption span{
    white-space:nowrap!important;
  }

  .dmxPracticeHome .dmxResultActions{
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:14px!important;
    width:100%!important;
    margin:0!important;
    min-width:0!important;
    white-space:nowrap!important;
  }

  .dmxPracticeHome .dmxResultActions .dmxBtn{
    flex:0 0 auto!important;
  }

  .dmxPracticeHome .dmxResultActions .dmxBtn:not(.dmxBtnPrimary){
    order:1!important;
  }

  .dmxPracticeHome .dmxResultActions .dmxBtnPrimary{
    order:2!important;
  }
}

@media (min-width:1600px){
  .dmxPracticeHome .dmxAccountForm{
    grid-template-columns:minmax(720px,800px) minmax(420px,1fr)!important;
    column-gap:28px!important;
  }

  .dmxPracticeHome .dmxPracticeSetupRow{
    grid-column:1!important;
    max-width:800px!important;
  }

  .dmxPracticeHome .dmxResultActions{
    grid-column:2!important;
    justify-self:end!important;
    align-self:end!important;
    width:auto!important;
  }
}

/* Modo Práctica: cuenta regresiva inicial */
.dmxPracticeStartScreen{
  min-height:min(680px, calc(100vh - 170px));
  display:grid;
  place-items:center;
  padding:clamp(18px, 4vw, 42px);
  animation:dmxPracticeStartEnter .28s ease both;
}
.dmxPracticeStartHero{
  width:min(760px, 100%);
  position:relative;
  overflow:hidden;
  border-radius:28px;
  padding:clamp(24px, 5vw, 46px);
  text-align:center;
  color:inherit;
  border:1px solid color-mix(in srgb, #38bdf8 34%, currentColor 16%);
  background:
    radial-gradient(circle at 18% 10%, color-mix(in srgb, #38bdf8 32%, transparent), transparent 34%),
    radial-gradient(circle at 86% 18%, color-mix(in srgb, #f59e0b 24%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, #2563eb 16%, transparent), color-mix(in srgb, #14b8a6 12%, transparent));
  box-shadow:
    0 24px 70px color-mix(in srgb, #2563eb 18%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #ffffff 12%, transparent);
}
.dmxPracticeStartHero::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:conic-gradient(from 90deg, transparent, color-mix(in srgb, #38bdf8 22%, transparent), transparent, color-mix(in srgb, #f59e0b 18%, transparent), transparent);
  animation:dmxPracticeStartGlow 5s linear infinite;
  opacity:.72;
}
.dmxPracticeStartHero>*{
  position:relative;
  z-index:1;
}
.dmxPracticeStartOrbit{
  width:112px;
  height:112px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  position:relative;
  border-radius:999px;
  background:linear-gradient(135deg, #2563eb, #14b8a6);
  color:#fff;
  box-shadow:0 18px 45px color-mix(in srgb, #2563eb 34%, transparent);
}
.dmxPracticeStartOrbit i{
  font-size:42px;
  animation:dmxPracticeStartPulse 1s ease-in-out infinite;
}
.dmxPracticeStartOrbit span{
  position:absolute;
  inset:-8px;
  border:2px solid color-mix(in srgb, #38bdf8 62%, transparent);
  border-radius:999px;
  animation:dmxPracticeStartRing 1.8s ease-out infinite;
}
.dmxPracticeStartOrbit span:nth-child(2){
  animation-delay:.45s;
  border-color:color-mix(in srgb, #f59e0b 54%, transparent);
}
.dmxPracticeStartOrbit span:nth-child(3){
  animation-delay:.9s;
  border-color:color-mix(in srgb, #22c55e 48%, transparent);
}
.dmxPracticeStartBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:34px;
  padding:7px 13px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg, #f59e0b, #ef4444);
  font-weight:900;
  box-shadow:0 10px 26px color-mix(in srgb, #f59e0b 30%, transparent);
  margin-bottom:12px;
}
.dmxPracticeStartCopy h1{
  margin:0;
  font-size:clamp(2rem, 5vw, 3.5rem);
  line-height:1.02;
  letter-spacing:-.04em;
}
.dmxPracticeStartCopy p{
  width:min(560px, 100%);
  margin:12px auto 22px;
  font-weight:750;
  opacity:.84;
}
.dmxPracticeStartTimer{
  --dmx-start-progress:100%;
  width:112px;
  height:112px;
  margin:0 auto 22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle, color-mix(in srgb, Canvas 86%, transparent) 55%, transparent 57%),
    conic-gradient(#22c55e var(--dmx-start-progress), color-mix(in srgb, currentColor 14%, transparent) 0);
  color:inherit;
  box-shadow:0 18px 45px color-mix(in srgb, #22c55e 22%, transparent);
}
.dmxPracticeStartTimer strong{
  font-size:2.8rem;
  line-height:1;
  letter-spacing:-.05em;
}
.dmxPracticeStartTimer span{
  font-size:.9rem;
  opacity:.72;
  margin-left:2px;
}
.dmxPracticeStartTrack{
  width:min(520px, 100%);
  height:10px;
  margin:0 auto 18px;
  border-radius:999px;
  overflow:hidden;
  background:color-mix(in srgb, currentColor 12%, transparent);
}
.dmxPracticeStartTrack i{
  display:block;
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #2563eb, #14b8a6, #22c55e);
  transition:width .35s ease;
}
.dmxPracticeStartSteps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.dmxPracticeStartSteps span{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:9px 10px;
  border-radius:999px;
  background:color-mix(in srgb, currentColor 7%, transparent);
  border:1px solid color-mix(in srgb, currentColor 13%, transparent);
  opacity:.58;
  font-weight:850;
  font-size:.9rem;
  transition:opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease;
}
.dmxPracticeStartSteps span.is-active{
  opacity:1;
  transform:translateY(-2px);
  border-color:color-mix(in srgb, #38bdf8 42%, currentColor 12%);
  background:linear-gradient(135deg, color-mix(in srgb, #2563eb 18%, transparent), color-mix(in srgb, #14b8a6 14%, transparent));
}
@keyframes dmxPracticeStartEnter{
  from{opacity:0; transform:translateY(12px) scale(.985)}
  to{opacity:1; transform:none}
}
@keyframes dmxPracticeStartPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
@keyframes dmxPracticeStartRing{
  0%{opacity:.85; transform:scale(.88)}
  100%{opacity:0; transform:scale(1.35)}
}
@keyframes dmxPracticeStartGlow{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@supports not (background: color-mix(in srgb, #38bdf8 20%, transparent)){
  .dmxPracticeStartHero{
    background:linear-gradient(135deg, #1d4ed8, #0f766e);
    color:#fff;
  }
  .dmxPracticeStartTrack{
    background:rgba(255,255,255,.2);
  }
}
@media (max-width:560px){
  .dmxPracticeStartScreen{
    min-height:calc(100vh - 120px);
    padding:18px 0;
  }
  .dmxPracticeStartHero{
    border-radius:22px;
    padding:24px 16px;
  }
  .dmxPracticeStartSteps{
    grid-template-columns:1fr;
  }
}


/* Modo Práctica: progreso inicial continuo */
.dmxPracticeStartTimer{
  will-change:background;
}
.dmxPracticeStartTrack i{
  transition:none!important;
  will-change:width;
}

/* Modo Práctica: centrar número del contador inicial */
.dmxPracticeStartTimer{
  position:relative!important;
  display:block!important;
}
.dmxPracticeStartTimer strong{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-58%)!important;
  margin:0!important;
  line-height:1!important;
}
.dmxPracticeStartTimer span{
  position:absolute!important;
  left:50%!important;
  top:72%!important;
  transform:translateX(-50%)!important;
  margin:0!important;
  line-height:1!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_PLAN_MODAL_TITLE_PERIOD_SUP_V51N25 */
.dmxPlanPeriodSup{
  font-size:.52em;
  font-weight:800;
  line-height:1;
  vertical-align:super;
  text-transform:lowercase;
  margin-left:.18em;
  letter-spacing:.01em;
  color:inherit;
}
.dmxPlanChangeTitle .dmxPlanPeriodSup,
.dmxPlanChangeModalTitle .dmxPlanPeriodSup,
[data-dmx-pricing-plan-change-title] .dmxPlanPeriodSup{
  position:relative;
  top:-.08em;
}

/* DMX_ACCOUNT_PLAN_CARD_GLOBAL_CSS_V51P3 */
.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCard.dmxAccountPlanCardV51P2{
  position:relative!important;
  overflow:hidden!important;
  display:block!important;
  margin-bottom:20px!important;
  padding:24px!important;
  border-radius:28px!important;
  border:1px solid rgba(148,163,184,.24)!important;
  background:
    radial-gradient(circle at 0% 0%, rgba(14,165,233,.14), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(248,251,255,.96))!important;
  box-shadow:0 20px 52px rgba(15,23,42,.075)!important;
  color:#0f172a!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCard.dmxAccountPlanCardV51P2.is-free{
  background:
    radial-gradient(circle at 0% 0%, rgba(34,197,94,.12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(248,250,252,.96))!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCard.dmxAccountPlanCardV51P2::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.56), transparent 42%);
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCard.dmxAccountPlanCardV51P2 > *{
  position:relative;
  z-index:1;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardTop{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:18px!important;
  margin-bottom:20px!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardHead{
  min-width:0!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardEyebrow{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  margin-bottom:12px!important;
  color:#64748b!important;
  font-size:.78rem!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardEyebrow i{
  color:#0284c7!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardV51P2.is-free .dmxAccountPlanCardEyebrow i{
  color:#16a34a!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardTitleRow{
  display:flex!important;
  flex-direction:column!important;
  gap:9px!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardPlanTitle{
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
  color:#075985!important;
  font-size:2rem!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:.045em!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardV51P2.is-free .dmxAccountPlanCardPlanTitle{
  color:#166534!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanNameInline{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  color:inherit!important;
  font-weight:950!important;
  line-height:1!important;
  white-space:nowrap!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanNameInline i{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:.82em!important;
  color:inherit!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanPeriodText{
  color:inherit!important;
  font-weight:850!important;
  text-transform:lowercase!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardBilling{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  width:max-content!important;
  max-width:100%!important;
  padding:8px 12px!important;
  border-radius:999px!important;
  background:rgba(14,165,233,.10)!important;
  color:#0369a1!important;
  font-size:.9rem!important;
  font-weight:850!important;
  line-height:1!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardStatus{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:40px!important;
  padding:10px 14px!important;
  border-radius:999px!important;
  font-size:.86rem!important;
  font-weight:950!important;
  line-height:1!important;
  white-space:nowrap!important;
  border:1px solid transparent!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardStatus.is-active{
  color:#047857!important;
  background:#d1fae5!important;
  border-color:rgba(16,185,129,.20)!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardStatus.is-scheduled{
  color:#9a3412!important;
  background:#ffedd5!important;
  border-color:#fed7aa!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardStatus.is-warning{
  color:#92400e!important;
  background:#fef3c7!important;
  border-color:#fde68a!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardStatus.is-free{
  color:#166534!important;
  background:#dcfce7!important;
  border-color:rgba(34,197,94,.24)!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardGrid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  margin-bottom:16px!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardInfoBox{
  display:flex!important;
  align-items:flex-start!important;
  gap:12px!important;
  min-width:0!important;
  padding:16px!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.78)!important;
  border:1px solid rgba(148,163,184,.18)!important;
  box-shadow:0 10px 26px rgba(15,23,42,.035)!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardInfoIcon{
  flex:0 0 auto!important;
  width:42px!important;
  height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:15px!important;
  background:#e0f2fe!important;
  color:#0369a1!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardV51P2.is-free .dmxAccountPlanCardInfoIcon{
  background:#dcfce7!important;
  color:#16a34a!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardInfoLabel{
  margin-bottom:5px!important;
  color:#64748b!important;
  font-size:.78rem!important;
  font-weight:950!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardInfoValue{
  color:#0f172a!important;
  font-size:.98rem!important;
  font-weight:950!important;
  line-height:1.25!important;
  overflow-wrap:anywhere!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessage{
  display:flex!important;
  align-items:flex-start!important;
  gap:14px!important;
  padding:18px!important;
  border-radius:22px!important;
  border:1px solid rgba(148,163,184,.18)!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessageIcon{
  flex:0 0 auto!important;
  width:44px!important;
  height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:16px!important;
  font-size:1.02rem!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessageTitle{
  margin-bottom:5px!important;
  color:#0f172a!important;
  font-size:1rem!important;
  font-weight:950!important;
  line-height:1.2!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessageText{
  color:#475569!important;
  font-size:.95rem!important;
  font-weight:720!important;
  line-height:1.45!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessageText strong{
  font-weight:950!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessage.is-active{
  background:rgba(240,253,244,.80)!important;
  border-color:rgba(34,197,94,.22)!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessage.is-active .dmxAccountPlanCardMessageIcon{
  background:#dcfce7!important;
  color:#047857!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessage.is-scheduled{
  background:#fff7ed!important;
  border-color:#fed7aa!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessage.is-scheduled .dmxAccountPlanCardMessageIcon{
  background:#ffedd5!important;
  color:#ea580c!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessage.is-warning{
  background:#fffbeb!important;
  border-color:#fde68a!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessage.is-warning .dmxAccountPlanCardMessageIcon{
  background:#fef3c7!important;
  color:#d97706!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessage.is-free{
  background:#f0fdf4!important;
  border-color:rgba(34,197,94,.22)!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessage.is-free .dmxAccountPlanCardMessageIcon{
  background:#dcfce7!important;
  color:#16a34a!important;
}

html[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCard.dmxAccountPlanCardV51P2,
[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCard.dmxAccountPlanCardV51P2{
  border-color:rgba(148,163,184,.22)!important;
  background:
    radial-gradient(circle at 0% 0%, rgba(14,165,233,.16), transparent 34%),
    linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,41,59,.94))!important;
  box-shadow:0 20px 52px rgba(0,0,0,.30)!important;
  color:#e5e7eb!important;
}

html[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCard.dmxAccountPlanCardV51P2.is-free,
[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCard.dmxAccountPlanCardV51P2.is-free{
  background:
    radial-gradient(circle at 0% 0%, rgba(34,197,94,.16), transparent 34%),
    linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,41,59,.94))!important;
}

html[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardEyebrow,
[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardEyebrow{
  color:#94a3b8!important;
}

html[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardPlanTitle,
[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardPlanTitle{
  color:#bae6fd!important;
}

html[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardV51P2.is-free .dmxAccountPlanCardPlanTitle,
[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardV51P2.is-free .dmxAccountPlanCardPlanTitle{
  color:#bbf7d0!important;
}

html[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardInfoBox,
[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardInfoBox{
  background:rgba(15,23,42,.62)!important;
  border-color:rgba(148,163,184,.18)!important;
}

html[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardInfoValue,
html[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessageTitle,
[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardInfoValue,
[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessageTitle{
  color:#f8fafc!important;
}

html[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardInfoLabel,
html[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessageText,
[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardInfoLabel,
[data-theme="dark"] .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessageText{
  color:#cbd5e1!important;
}

@media(max-width:680px){
  .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCard.dmxAccountPlanCardV51P2{
    padding:20px!important;
    border-radius:24px!important;
  }

  .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardTop{
    flex-direction:column!important;
    gap:14px!important;
  }

  .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardStatus{
    align-self:flex-start!important;
  }

  .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardPlanTitle{
    font-size:1.72rem!important;
  }

  .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardGrid{
    grid-template-columns:1fr!important;
  }

  .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessage{
    padding:16px!important;
  }
}

@media(max-width:420px){
  .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCard.dmxAccountPlanCardV51P2{
    padding:18px!important;
  }

  .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardInfoBox,
  .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessage{
    gap:11px!important;
  }

  .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardInfoIcon,
  .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessageIcon{
    width:40px!important;
    height:40px!important;
    border-radius:14px!important;
  }
}

/* DMX_ACCOUNT_PLAN_FREE_UPGRADE_CTA_CSS_V51P4 */
.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardV51P2.is-free ~ .dmxManageBoxNoPlanChangesV51L{
  display:none!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessageActions{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin-top:16px!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanUpgradeBtn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  min-height:46px!important;
  padding:12px 18px!important;
  border-radius:15px!important;
  border:1px solid rgba(22,163,74,.22)!important;
  background:linear-gradient(135deg,#22c55e,#16a34a)!important;
  color:#ffffff!important;
  font-size:.94rem!important;
  font-weight:950!important;
  line-height:1!important;
  text-decoration:none!important;
  box-shadow:0 12px 26px rgba(22,163,74,.22)!important;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanUpgradeBtn:hover{
  transform:translateY(-1px)!important;
  filter:saturate(1.05)!important;
  box-shadow:0 16px 34px rgba(22,163,74,.28)!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanUpgradeBtn:active{
  transform:translateY(0)!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanUpgradeBtn i{
  color:inherit!important;
}

@media(max-width:520px){
  .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanUpgradeBtn{
    width:100%!important;
  }
}

/* DMX_ACCOUNT_PLAN_UPGRADE_BTN_RIGHT_V51P5 */
.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessage > div:not(.dmxAccountPlanCardMessageIcon){
  flex:1 1 auto!important;
  min-width:0!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessageActions{
  width:100%!important;
  justify-content:flex-end!important;
}

.dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanUpgradeBtn{
  width:auto!important;
  min-width:170px!important;
}

@media(max-width:520px){
  .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanCardMessageActions{
    justify-content:flex-end!important;
  }

  .dmxAccountAppPanel.dmxSubscriptionPanel .dmxAccountPlanUpgradeBtn{
    width:auto!important;
    min-width:150px!important;
  }
}

/* DMX_PUBLIC_QUESTION_IMAGE_CSS_V54C9B */
.dmxQuestionTitleMediaV54C9B {
  display: grid;
  grid-template-columns: minmax(96px, 148px) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  align-items: center;
  margin: clamp(18px, 2.4vw, 26px) 0;
}

.dmxQuestionImageBoxV54C9B {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, .04);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .10);
}

.dmxQuestionImageV54C9B {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.dmxQuestionTextWithImageV54C9B {
  margin: 0 !important;
}

html[data-theme="dark"] .dmxQuestionImageBoxV54C9B {
  background: rgba(255,255,255,.055);
  border-color: rgba(148,163,184,.22);
  box-shadow: 0 20px 55px rgba(0,0,0,.30);
}

@media (max-width: 720px) {
  .dmxQuestionTitleMediaV54C9B {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  .dmxQuestionImageBoxV54C9B {
    border-radius: 18px;
  }
}

/* DMX_PUBLIC_QUESTION_IMAGE_MOBILE_SIDE_V54C9C: bloque max-width 460 anterior neutralizado; la imagen ya no sube encima del título. */

/* DMX_PUBLIC_QUESTION_IMAGE_MOBILE_SIDE_V54C9C */
@media (max-width: 460px) {
  .dmxQuestionTitleMediaV54C9B {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 10px !important;
    justify-items: stretch !important;
    align-items: center !important;
    text-align: left !important;
    margin: 14px 0 !important;
  }

  .dmxQuestionImageBoxV54C9B {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    border-radius: 14px !important;
  }

  .dmxQuestionTextWithImageV54C9B {
    text-align: left !important;
    line-height: 1.18 !important;
  }
}

@media (max-width: 360px) {
  .dmxQuestionTitleMediaV54C9B {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .dmxQuestionImageBoxV54C9B {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    border-radius: 12px !important;
  }
}


/* DMX_NIVELES_STATUS_TAGS_MOBILE_NO_EXTRA_SPACE_CSS_V56E_START */
/*
  Scope:
  - /niveles/: Progreso: {x}% / Completado: {x}%
  - /nivel/{n}/etapas/: Disponible / Aprobado / Reprobado

  PC intacto.
  Móvil: etiqueta arriba a la derecha.
  No agrega padding ni reserva espacio: usa el vacío real de la tarjeta.
  No redefine color, fondo ni borde: conserva clases originales y lógica visual actual.
*/
@media (max-width: 760px) {
  body .dmxPath .level,
  body .dmxStagePickerGrid .dmxStagePickCard {
    position: relative !important;
  }

  body .dmxStagePickerGrid .dmxStagePickMeta {
    position: static !important;
    min-height: 0 !important;
  }

  body .dmxPath .level .dmxProgressTag,
  body .dmxPath .level .dmxScore100,
  body .dmxPath .level .dmxScore90,
  body .dmxPath .level .dmxScore80,
  body .dmxPath .level .dmxScore70,
  body .dmxStagePickerGrid .dmxStagePickCard .dmxStageStatusTag {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 8 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    width: auto !important;
    max-width: calc(100% - 28px) !important;
    min-height: 30px !important;

    padding: 7px 10px !important;
    border-radius: 999px !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;

    text-align: center !important;
    margin: 0 !important;
  }

  body .dmxStagePickerGrid .dmxStagePickCard .dmxStageStatusTag i {
    font-size: 12px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
}

@media (max-width: 390px) {
  body .dmxPath .level .dmxProgressTag,
  body .dmxPath .level .dmxScore100,
  body .dmxPath .level .dmxScore90,
  body .dmxPath .level .dmxScore80,
  body .dmxPath .level .dmxScore70,
  body .dmxStagePickerGrid .dmxStagePickCard .dmxStageStatusTag {
    top: 12px !important;
    right: 12px !important;
    min-height: 28px !important;
    padding: 6px 9px !important;
    font-size: 11.5px !important;
  }
}
/* DMX_NIVELES_STATUS_TAGS_MOBILE_NO_EXTRA_SPACE_CSS_V56E_END */


/* 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 */