/* ═══════════════════════════════════════════════════════════════
   RETOS CLÍNICOS MPH+ — "consola" (oscuro, con profundidad y movimiento).
   Un caso corto: contexto → pregunta → explicación.
   Se apoya en ../../member.css solo para la barra de miembro y la
   puerta de acceso. Solo presentación; sin pagos ni cuentas.
   Fuentes: Barlow Condensed + DM Sans.
═══════════════════════════════════════════════════════════════ */
:root {
  --bg: #08121d; --surface: #12243a; --border: rgba(255,255,255,.10);
  --text: #F2F5F8; --text-2: #C3CFDB; --text-3: #9FB0C2;
  --accent: #E03A48; --accent-d: #FF7A85; --accent-soft: rgba(224,58,72,.12);
  --green: #6FCF97; --green-soft: rgba(111,207,151,.11);
  --amber: #E8960C; --amber-ink: #F5B454; --amber-soft: rgba(232,150,12,.12);
  --ink: #0D1B2A; --ink-2: #DCE5EE;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --radius: 14px;
  --glass: linear-gradient(165deg, rgba(40,64,90,.70), rgba(20,36,54,.82));
  --glass-line: rgba(255,255,255,.10);
  --lift: 0 1px 0 rgba(255,255,255,.07) inset, 0 24px 48px -28px rgba(0,0,0,.8);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative;
  background-color: #08121d;
  background-image:
    radial-gradient(1100px 520px at 8% -6%, rgba(204,41,54,.17), transparent 70%),
    radial-gradient(900px 600px at 105% 36%, rgba(232,150,12,.07), transparent 72%),
    linear-gradient(180deg, #0b1827 0%, #08121d 55%, #070f18 100%);
}
body::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 920px; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 20%, transparent 78%);
}
body > *:not(script):not(style):not(svg):not(#mph-topbar) { position: relative; z-index: 1; }
body > .mx-gate { position: fixed; z-index: 5000; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul, ol { list-style: none; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 768px) { .container { padding: 0 18px; } }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mx-bar { background: rgba(8,18,29,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Puerta de acceso — versión estática (el script la muestra con display:flex) */
.mx-gate__card--static { display: block; }

/* Entrada */
@keyframes rt-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes rt-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rt-ecg { from { background-position-x: 0; } to { background-position-x: -240px; } }

/* ── Encabezado ─────────────────────────────────────────── */
.rt-hero { background: transparent; border-bottom: 0; padding: clamp(34px, 5vw, 64px) 0 clamp(8px, 1vw, 14px); position: relative; }
.rt-hero > .container > * { animation: rt-up .8s var(--ease) both; }
.rt-hero > .container > *:nth-child(2) { animation-delay: .07s; } .rt-hero > .container > *:nth-child(3) { animation-delay: .14s; } .rt-hero > .container > *:nth-child(4) { animation-delay: .21s; }
.rt-hero .container::after {
  content: ''; display: block; height: 48px; margin-top: 26px; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='48' viewBox='0 0 240 48'%3E%3Cpath d='M0 26h70l6-3 6 3h22l5 6 8-26 8 34 6-14h26l8-5 9 5h60' fill='none' stroke='%23E8960C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 240px 48px;
  animation: rt-ecg 5s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 80%, transparent);
  filter: drop-shadow(0 0 5px rgba(232,150,12,.6));
}
.rt-plate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 20px; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--amber-ink); }
.rt-plate .mx-seal { width: 22px; height: 22px; }
.rt-plate > span:not(.mx-seal) ~ span::before { content: '·'; margin-right: 12px; color: #5d7187; }
.rt-plate .t2 { color: var(--text-2); }
.rt-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: .94; letter-spacing: -.005em; font-size: clamp(40px, 7vw, 78px); max-width: 18ch; text-wrap: balance;
  background: linear-gradient(180deg, #fff 55%, #cdd8e3 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rt-title em { font-style: normal; -webkit-text-fill-color: #E8505D; }
.rt-lead { margin-top: 18px; max-width: 58ch; font-size: clamp(17px, 2.3vw, 20px); line-height: 1.6; color: var(--text-2); }
.rt-meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.rt-meta li { font-size: 13.5px; font-weight: 500; color: var(--text-2); background: rgba(255,255,255,.06); border: 1px solid var(--glass-line); padding: 6px 12px; border-radius: 999px; }

/* ── Cuerpo del reto ────────────────────────────────────── */
.rt-main { max-width: 820px; margin: 0 auto; padding: 0 18px clamp(56px, 7vw, 96px); }
.rt-step {
  margin-top: clamp(22px, 3vw, 34px); padding: clamp(22px, 3.6vw, 38px); background: var(--glass); border: 1px solid var(--glass-line); border-radius: 18px; box-shadow: var(--lift);
  animation: rt-up .8s var(--ease) both;
}
.rt-step:nth-of-type(2) { animation-delay: .1s; } .rt-step:nth-of-type(3) { animation-delay: .18s; }
.rt-step + .rt-step { border-top: 1px solid var(--glass-line); }
.rt-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.rt-eyebrow b { font-family: var(--font-display); font-size: 15px; letter-spacing: .1em; color: #0D1B2A; background: var(--amber); font-weight: 800; padding: 1px 9px; border-radius: 999px; }
.rt-h { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 4.4vw, 44px); line-height: 1; color: #fff; margin-bottom: 20px; }
.rt-p { font-size: clamp(17px, 2.2vw, 19px); line-height: 1.75; color: var(--ink-2); margin-bottom: 1.1em; }
.rt-p strong { color: #fff; font-weight: 600; }

/* Monitor con los signos vitales */
.rt-hero--read .container { max-width: 856px; }
.rt-vitals-w { margin: 28px 0 8px; padding: 14px 14px 16px; border-radius: 16px; border: 1px solid rgba(77,201,204,.24);
  background: radial-gradient(420px 170px at 50% 0%, rgba(77,201,204,.11), transparent 70%), linear-gradient(165deg, #0e1c2b, #091521); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.85); }
.rt-vitals-cap { display: flex; align-items: center; gap: 10px; margin: 0 2px 8px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; letter-spacing: .15em; text-transform: uppercase; color: #8fb0c9; }
.rt-vitals-cap::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #6FCF97; box-shadow: 0 0 10px #6FCF97; animation: rt-blink 1.4s ease-in-out infinite; }
@keyframes rt-blink { 50% { opacity: .25; } }
.rt-vitals-w::before { content: ''; display: block; height: 48px; margin: 0 0 10px; border-radius: 8px; background: #07111b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='48' viewBox='0 0 240 48'%3E%3Cpath d='M0 26h70l6-3 6 3h22l5 6 8-26 8 34 6-14h26l8-5 9 5h60' fill='none' stroke='%236FCF97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 50% / 240px 48px; animation: rt-ecg 3.4s linear infinite; box-shadow: 0 0 22px -8px rgba(111,207,151,.5) inset; filter: drop-shadow(0 0 4px rgba(111,207,151,.55)); }
.rt-vitals { display: flex; flex-wrap: wrap; gap: 8px; background: transparent; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
.rt-v { flex: 1 1 118px; background: linear-gradient(165deg, #172c42, #112336); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 12px 14px 11px; min-width: 0; }
.rt-v__l { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #8fb0c9; }
.rt-v__n { margin-top: 6px; font-family: var(--font-display); font-weight: 800; font-size: 34px; white-space: nowrap; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(255,255,255,.18); }
.rt-v__u { margin-top: 5px; font-size: 13px; color: #8fb0c9; }
.rt-v--pending .rt-v__n { color: #5F7388; text-shadow: none; }
.rt-v--pending .rt-v__u { color: #F5B454; font-weight: 600; }

/* Pregunta y opciones */
.rt-q { margin: 0 0 20px; padding: 18px 22px; background: rgba(255,255,255,.045); border: 1px solid var(--glass-line); border-left: 4px solid var(--accent); border-radius: 12px; font-size: clamp(18px, 2.4vw, 22px); line-height: 1.45; font-weight: 600; color: #fff; }
.rt-opts { display: grid; gap: 10px; }
.rt-opt { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 14px; align-items: start; width: 100%; text-align: left; padding: 15px 18px; min-height: 58px;
  background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1.5px solid var(--glass-line); border-radius: 14px; color: var(--ink-2); font-size: 17.5px; line-height: 1.5;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; transition: transform .22s var(--ease), border-color .2s, background .2s, box-shadow .2s; }
.rt-opt:hover { border-color: rgba(232,150,12,.6); background: linear-gradient(165deg, rgba(255,255,255,.1), rgba(255,255,255,.045)); transform: translateX(4px); }
.rt-opt:active { transform: scale(.985); }
.rt-opt__k { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #fff; transition: all .2s; }
.rt-opt:hover .rt-opt__k { border-color: var(--amber); color: var(--amber-ink); }
.rt-opt__t { padding-top: 4px; }
.rt-opt__why { display: none; grid-column: 2; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--glass-line); font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.rt-opt__tag { display: none; grid-column: 2; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.rt-opts.is-done .rt-opt { cursor: default; pointer-events: none; transform: none; box-shadow: none; }
.rt-opts.is-done .rt-opt__why { display: block; }
.rt-opts.is-done .rt-opt:not(.is-correct):not(.is-wrong) { opacity: .66; }
.rt-opt.is-correct { border-color: var(--green); background: var(--green-soft); opacity: 1 !important; box-shadow: 0 0 0 1px var(--green) inset, 0 14px 30px -18px rgba(111,207,151,.6); }
.rt-opt.is-correct .rt-opt__k { background: var(--green); border-color: var(--green); color: #07200f; }
.rt-opt.is-correct .rt-opt__tag { display: block; color: var(--green); }
.rt-opt.is-wrong { border-color: var(--accent); background: var(--accent-soft); opacity: 1 !important; }
.rt-opt.is-wrong .rt-opt__k { background: var(--accent); border-color: var(--accent); color: #fff; }
.rt-opt.is-wrong .rt-opt__tag { display: block; color: var(--accent-d); }

.rt-actions { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.rt-skip, .rt-retry { font-size: 14.5px; font-weight: 500; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.rt-skip:hover, .rt-retry:hover { color: #fff; }
.rt-note { font-size: 13.5px; color: var(--text-3); }
.rt-opts.is-done ~ .rt-actions .rt-skip, .rt-opts.is-done ~ .rt-actions .rt-note { display: none; }

.rt-verdict { display: none; margin-top: 16px; padding: 15px 20px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-line); font-size: 17px; font-weight: 600; color: #fff; outline: 0; }
.rt-verdict.is-on { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; animation: rt-in .5s var(--ease) both; }
.rt-verdict.is-ok { border-color: var(--green); background: var(--green-soft); }
.rt-verdict.is-no { border-color: rgba(224,58,72,.5); background: var(--accent-soft); }
.rt-verdict .rt-retry { font-weight: 500; }

/* Explicación (oculta hasta responder, solo con JS) */
.js .rt-reveal:not(.is-open) { display: none; }
.rt-reveal.is-open { animation: rt-in 620ms var(--ease) both; }
.rt-h3 { margin: 1.9em 0 .6em; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 25px; line-height: 1.05; color: var(--amber-ink); }
.rt-h3:first-child { margin-top: 0; }
.rt-list { margin: 0 0 1.3em; display: grid; gap: 10px; }
.rt-list li { position: relative; padding-left: 24px; font-size: clamp(16.5px, 2.1vw, 18px); line-height: 1.65; color: var(--ink-2); }
.rt-list li::before { content: ''; position: absolute; left: 4px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.rt-list li strong { color: #fff; font-weight: 600; }
.rt-take { margin: 2.2em 0 0; padding: 22px 26px 20px; background: linear-gradient(165deg, rgba(232,150,12,.14), rgba(232,150,12,.04)); border: 1px solid rgba(232,150,12,.35); border-radius: 14px; box-shadow: var(--lift); }
.rt-take__l { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .15em; text-transform: uppercase; color: var(--amber-ink); }
.rt-take__l .mx-seal { width: 20px; height: 20px; }
.rt-take .rt-list { margin: 0; }
.rt-src { margin-top: 2.4em; padding-top: 20px; border-top: 1px solid var(--glass-line); }
.rt-src__t { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 22px; color: #fff; margin-bottom: 10px; }
.rt-src ol { list-style: decimal; padding-left: 1.4em; }
.rt-src li { font-size: 14.5px; line-height: 1.55; color: var(--text-2); margin-bottom: 7px; padding-left: .3em; }
.rt-src li::marker { font-family: var(--font-display); font-weight: 700; color: var(--amber-ink); }
.rt-disc { margin-top: 1.6em; padding: 14px 18px; border: 1px solid var(--glass-line); border-left: 4px solid var(--amber); border-radius: 10px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); background: rgba(255,255,255,.04); }
.rt-disc strong { color: #fff; }

/* Anterior / siguiente */
.rt-nav { margin-top: 3em; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rt-nav a { display: grid; gap: 7px; padding: 18px 20px; background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid var(--glass-line); border-radius: 14px; transition: transform 240ms var(--ease), border-color 200ms, background 200ms; }
.rt-nav a:hover { transform: translateY(-3px); border-color: rgba(232,150,12,.55); background: linear-gradient(165deg, rgba(255,255,255,.1), rgba(255,255,255,.045)); }
.rt-nav a:last-child:not(:first-child) { text-align: right; }
.rt-nav__k { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--amber-ink); }
.rt-nav__t { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: 1; color: #fff; }
.rt-nav--solo { grid-template-columns: 1fr; }

/* ── Listado ────────────────────────────────────────────── */
.rt-how { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rt-how li { padding: 22px 24px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 16px; box-shadow: var(--lift); animation: rt-up .8s var(--ease) both; }
.rt-how li:nth-child(2) { animation-delay: .08s; } .rt-how li:nth-child(3) { animation-delay: .16s; }
.rt-how b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; color: var(--amber); margin-bottom: 8px; }
.rt-how strong { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 21px; letter-spacing: .02em; color: #fff; margin-bottom: 4px; }
.rt-how span { font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
.rt-list-w { margin-top: clamp(26px, 3vw, 40px); }
.rt-cards { display: grid; gap: 14px; }
.rt-card { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 6px 26px; align-items: center; padding: 26px 28px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 18px; box-shadow: var(--lift); overflow: hidden; transition: transform 260ms var(--ease), border-color 220ms; animation: rt-up .8s var(--ease) both; }
.rt-card:nth-child(2) { animation-delay: .08s; } .rt-card:nth-child(3) { animation-delay: .16s; } .rt-card:nth-child(4) { animation-delay: .24s; }
a.rt-card:hover { transform: translateY(-4px); border-color: rgba(232,150,12,.55); }
.rt-card::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--accent), var(--amber)); transition: width .6s var(--ease); }
a.rt-card:hover::before { width: 100%; }
.rt-card__n { font-family: var(--font-display); font-weight: 800; font-size: 72px; line-height: .85; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); font-variant-numeric: tabular-nums; transition: all .3s; }
a.rt-card:hover .rt-card__n { color: var(--amber); -webkit-text-stroke-color: var(--amber); }
.rt-card__k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-ink); }
.rt-badge { padding: 2px 10px; border-radius: 100px; background: var(--green); color: #07200f; font-size: 12.5px; letter-spacing: .08em; }
.rt-card__t { margin-top: 6px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(27px, 3.4vw, 38px); line-height: .98; color: #fff; }
.rt-card__d { margin-top: 8px; font-size: 16.5px; line-height: 1.55; color: var(--text-2); max-width: 60ch; }
.rt-card__m { margin-top: 8px; font-size: 13.5px; color: var(--text-3); }
.rt-card__go { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: #fff; white-space: nowrap; padding: 10px 18px; border-radius: 10px; background: linear-gradient(180deg, #e0394a, #b91f2c); box-shadow: 0 12px 26px -12px rgba(204,41,54,.85); }
.rt-card--soon { background: transparent; box-shadow: none; border-style: dashed; border-color: rgba(255,255,255,.18); }
.rt-card--soon .rt-card__n { -webkit-text-stroke-color: rgba(255,255,255,.25); }
.rt-card--soon .rt-card__k { color: var(--text-3); }
.rt-card--soon .rt-card__t { color: var(--text-2); font-size: 26px; }
.rt-mail { margin-top: 28px; padding: 18px 22px; border: 1px solid var(--glass-line); border-left: 4px solid var(--amber); border-radius: 12px; background: rgba(255,255,255,.045); font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.rt-mail strong { color: #fff; }

@media (max-width: 720px) {
  .rt-how { grid-template-columns: 1fr; }
  .rt-card { grid-template-columns: 1fr auto; padding: 22px 20px 22px 22px; }
  .rt-card__n { grid-column: 1 / -1; font-size: 52px; }
  .rt-card__go { display: none; }
}
@media (max-width: 640px) {
  .rt-step { padding: 20px 16px; border-radius: 16px; }
  .rt-main { padding-left: 14px; padding-right: 14px; }
  .rt-p { font-size: 17.5px; }
  .rt-nav { grid-template-columns: 1fr; }
  .rt-nav a:last-child:not(:first-child) { text-align: left; }
  .rt-opt { padding: 14px 14px; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; font-size: 16.5px; }
  .rt-v { flex: 1 1 calc(50% - 8px); }
  .rt-v__n { font-size: 32px; }
  .rt-vitals-w { padding: 12px; }
}