:root{
  --bg:#000000; --surface:#0a0e0c; --surface2:#121815; --line:#1f2924;
  --green:#20FF78; --green-dim:#0f5f33; --text:#EFF3EC; --muted:#8a978f;
  --warn:#FFB020;
  --display:"Exo 2","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;background:var(--bg);color:var(--text)}
body{margin:0;font-family:var(--body);font-size:15px;line-height:1.4;display:flex;justify-content:center;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button:focus-visible,input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
h1,h2,h3,p{margin:0}

.app{position:relative;width:100%;max-width:460px;height:100%;overflow:hidden;background:var(--surface)}
@media (min-width:500px){.app{border-inline:1px solid var(--line)}}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(20px + var(--safe-b))}

/* ---------- onboarding ---------- */
.ob-progress{display:flex;gap:4px;margin-bottom:18px}
.ob-progress i{flex:1;height:3px;border-radius:2px;background:var(--line)}
.ob-progress i.on{background:var(--green)}
.ob-top{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.ob-back{width:38px;height:38px;border-radius:50%;background:var(--surface2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none}
.ob-back svg{width:18px;height:18px;fill:currentColor}
.logo{font-family:var(--display);font-weight:900;font-style:italic;font-size:17px;letter-spacing:.02em}
.logo b{color:var(--green)}
.ob-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:22px}
.ob-q{font-family:var(--display);font-weight:900;font-style:italic;font-size:26px;line-height:1.15;text-transform:uppercase;text-wrap:balance}
.ob-hint{color:var(--muted);font-size:13px;margin-top:-14px}
.ob-input{width:100%;background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:16px;color:var(--text);font-size:18px;font-family:var(--body)}
.ob-input:focus{border-color:var(--green)}
.opts{display:flex;flex-direction:column;gap:10px}
.opts.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{width:100%;text-align:left;padding:16px;border-radius:14px;background:var(--surface2);border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.opt b{font-weight:600;font-size:15px}
.opt small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.opt[aria-pressed="true"]{border-color:var(--green);background:rgba(32,255,120,.08)}
.opt .chk{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none}
.opt[aria-pressed="true"] .chk{border-color:var(--green);background:var(--green)}
.ob-foot{padding-top:14px}
.btn-primary{width:100%;background:var(--green);color:#000;font-family:var(--display);font-weight:900;font-style:italic;font-size:17px;letter-spacing:.03em;text-transform:uppercase;padding:16px 20px;border-radius:14px;box-shadow:0 0 0 5px rgba(32,255,120,.14)}
.btn-primary:disabled{opacity:.4;box-shadow:none}
.btn-secondary{width:100%;background:var(--surface2);border:1px solid var(--line);color:var(--text);font-weight:600;padding:14px 20px;border-radius:14px;text-align:center}
.resumen-list{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px}
.resumen-row{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.resumen-row b{font-weight:600}

/* ---------- home ---------- */
.home-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.saludo{font-family:var(--display);font-weight:900;font-style:italic;font-size:24px;text-transform:uppercase}
.saludo b{color:var(--green)}
.week-pill{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--green);color:var(--green);border-radius:999px;padding:5px 10px}
.today-card{background:linear-gradient(160deg,rgba(32,255,120,.12),rgba(18,22,20,.4));border:1px solid var(--green-dim);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
.today-card .kicker{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.today-card h2{font-family:var(--display);font-weight:900;font-style:italic;font-size:24px;text-transform:uppercase}
.today-card .meta{color:var(--muted);font-size:13px}
.today-card .btn-primary{margin-top:10px}
.week-list{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.week-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--surface2);border:1px solid var(--line)}
.week-item.hoy{border-color:var(--green)}
.week-item .ix{font-family:var(--display);font-weight:800;font-size:13px;color:var(--muted);width:22px}
.week-item .nm{flex:1}
.week-item .nm b{display:block;font-size:14px}
.week-item .nm small{color:var(--muted);font-size:12px}
.week-item .chk{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none}
.week-item.done .chk{border-color:var(--green);background:var(--green);color:#000}
.week-item .chk svg{width:14px;height:14px;fill:currentColor}
.link-btn{background:none;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:13px;padding:10px 0;text-align:center;width:100%}

/* ---------- player (adaptado de v33) ---------- */
.player{position:absolute;inset:0;background:#000}
video#vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;transform:scale(1.05)}
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden;
  background:radial-gradient(110% 70% at 50% 100%,rgba(32,255,120,.18),transparent 60%),var(--surface)}
.ph .bars{display:flex;gap:7px;align-items:flex-end;height:80px}
.ph .bars span{width:9px;background:var(--green);border-radius:3px;height:20%;opacity:.85}
.running .ph .bars span{animation:bar .5s ease-in-out infinite alternate}
.ph .bars span:nth-child(2){animation-delay:.1s}.ph .bars span:nth-child(3){animation-delay:.2s}
.ph .bars span:nth-child(4){animation-delay:.3s}.ph .bars span:nth-child(5){animation-delay:.4s}
@keyframes bar{from{height:15%}to{height:100%}}
.ph .tag{font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}

.top{position:absolute;inset:0 0 auto 0;z-index:3;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 14px;background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.28) 65%,transparent)}
.segs{display:flex;gap:3px}
.seg{flex:1;height:3px;border-radius:2px;background:rgba(239,243,236,.2);overflow:hidden}
.seg i{display:block;height:100%;width:0;background:var(--green)}
.bar1{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}
.pill{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(239,243,236,.25);border-radius:999px;padding:4px 10px;font-variant-numeric:tabular-nums;white-space:nowrap;background:rgba(0,0,0,.35)}
.pill.day{border-color:var(--green);color:var(--green)}
.exhead{margin-top:14px;padding-right:96px}
.exhead .n{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--green);text-transform:uppercase;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.exhead h2{margin:2px 0 0;font-family:var(--display);font-weight:900;font-style:italic;font-size:28px;line-height:1;text-transform:uppercase;text-wrap:balance;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.35)}
.exhead .cue{margin-top:4px;font-size:13px;color:var(--muted);text-shadow:0 1px 3px rgba(0,0,0,.55)}

.ring{position:absolute;right:14px;top:calc(96px + env(safe-area-inset-top,0px));width:84px;height:84px;z-index:4}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .trk{stroke:rgba(239,243,236,.16)}
.ring .val{stroke:var(--green);transition:stroke .2s}
.ring.hot .val{stroke:var(--warn)}
.ring .num{position:absolute;inset:8px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;font-size:30px;font-variant-numeric:tabular-nums;background:rgba(0,0,0,.5);border-radius:50%}
.ring.hot .num{color:var(--warn)}

.bottom{position:absolute;inset:auto 0 0 0;z-index:3;padding:0 12px calc(12px + var(--safe-b));display:flex;flex-direction:column;gap:8px}
.nextup{align-self:center;padding:6px 14px;border-radius:999px;color:#3a423e;font-size:12px}
.nextup b{color:#0c1210}
.ctrl{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;justify-items:center;border-radius:30px;padding:8px 6px}
.ib{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;color:#111815}
.ib svg{width:22px;height:22px;fill:currentColor}
.ib small{font-size:10px;color:#4a534e;letter-spacing:.04em}
.ib:disabled{opacity:.3}
.play{width:68px;height:68px;border-radius:50%;background:var(--green);color:#000;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px rgba(32,255,120,.16),0 0 30px rgba(32,255,120,.3)}
.play svg{width:30px;height:30px;fill:currentColor}

.lg{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(246,248,247,.52));
  -webkit-backdrop-filter:blur(24px) saturate(190%);backdrop-filter:blur(24px) saturate(190%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.04),0 10px 34px rgba(16,24,20,.16),0 2px 6px rgba(16,24,20,.08)}
.xclose{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.35);border:1px solid rgba(239,243,236,.25);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;line-height:1}
.xclose svg{width:16px;height:16px;fill:currentColor}

.nextcard{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
  padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(118px + var(--safe-b));background:#050807;overflow:hidden}
.nc-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 60% at 50% 35%,#1a1f1c 0%,#0a0c0b 60%,#050606 100%)}
.nc-k{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.nc-media{position:relative;height:min(50vh,520px);max-width:100%;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#000;border:2px solid var(--green);box-shadow:0 0 0 6px rgba(32,255,120,.12),0 20px 60px rgba(0,0,0,.6)}
.nc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nc-name{font-family:var(--display);font-weight:900;font-style:italic;font-size:26px;line-height:1.05;text-transform:uppercase;text-wrap:balance;max-width:16ch}
.nc-cue{color:var(--muted);font-size:13px}
.nc-n{position:absolute;left:0;right:0;bottom:12px;font-family:var(--display);font-weight:900;font-style:italic;font-size:80px;line-height:.9;color:var(--green);text-shadow:0 2px 18px rgba(0,0,0,.65),0 0 30px rgba(32,255,120,.45);font-variant-numeric:tabular-nums;pointer-events:none}
.nc-n.pop{animation:pop .9s ease-out}
@keyframes pop{from{transform:scale(1.5);opacity:0}25%{opacity:1}to{transform:scale(.92);opacity:.9}}

.ov{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px 16px calc(24px + var(--safe-b));background:rgba(0,0,0,.9)}
.ov .biglogo{font-family:var(--display);font-weight:900;font-style:italic;font-size:36px;line-height:1}
.ov .biglogo b{color:var(--green)}
.stats{display:flex;gap:22px;justify-content:center}
.stats div{display:flex;flex-direction:column}
.stats b{font-family:var(--display);font-weight:900;font-size:24px;font-variant-numeric:tabular-nums}
.stats span{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.go{width:100%;max-width:320px;background:var(--green);color:#000;font-family:var(--display);font-weight:900;font-style:italic;font-size:19px;letter-spacing:.04em;text-transform:uppercase;padding:17px 20px;border-radius:14px;box-shadow:0 0 0 6px rgba(32,255,120,.14)}
.count{font-family:var(--display);font-weight:900;font-style:italic;font-size:150px;line-height:1;color:var(--green);text-shadow:0 0 50px rgba(32,255,120,.5)}
.count.small{font-size:clamp(30px,9vw,44px)}
.count.pop{animation:pop .9s ease-out}
.ov h3{font-family:var(--display);font-weight:900;font-style:italic;font-size:34px;line-height:1.1;text-transform:uppercase}
.ov h3 b{color:var(--green)}
.effort-row{display:flex;gap:10px;width:100%;max-width:340px}
.effort-btn{flex:1;padding:14px 6px;border-radius:14px;background:var(--surface2);border:1px solid var(--line);font-weight:700;font-size:13px}
.effort-btn[aria-pressed="true"]{border-color:var(--green);background:rgba(32,255,120,.12);color:var(--green)}

.quitov{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;padding:24px 18px;background:rgba(0,0,0,.42)}
.qcard{width:100%;max-width:320px;border-radius:26px;padding:22px 20px 18px;text-align:center;display:flex;flex-direction:column;gap:12px;color:#fff;
  background:linear-gradient(180deg,rgba(40,48,44,.85),rgba(18,22,20,.9));-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);border:1px solid rgba(255,255,255,.22)}
.qcard h3{font-family:var(--display);font-weight:900;font-style:italic;font-size:22px;text-transform:uppercase}
.qcard p{color:rgba(255,255,255,.8);font-size:14px}
.qbtn{width:100%;border-radius:16px;padding:15px 16px;font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.03em;text-transform:uppercase}
.qbtn.stay{background:var(--green);color:#000}
.qbtn.leave{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);color:#fff}

.scrim{position:absolute;inset:0;z-index:8;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;inset:auto 0 0 0;z-index:9;max-height:78%;display:flex;flex-direction:column;background:var(--surface);border-top:1px solid var(--line);border-radius:20px 20px 0 0;transform:translateY(102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);padding-bottom:var(--safe-b)}
.sheet.on{transform:none}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:10px auto 4px}
.sheet h4{margin:0;padding:8px 16px 10px;display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.x{width:40px;height:40px;border-radius:50%;background:var(--surface2);border:1px solid var(--line);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.scroll{overflow:auto;min-height:0;flex:1;padding:0 8px 12px;-webkit-overflow-scrolling:touch}
.done-btn{margin:0 16px 12px;padding:14px;border-radius:12px;background:var(--green);color:#000;font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;flex:none}
ol{list-style:none;margin:0;padding:0}
li button{width:100%;text-align:left;border-radius:10px;padding:10px;display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;position:relative}
li .ix{font-family:var(--display);font-weight:800;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
li .nm{font-weight:600;font-size:14px;line-height:1.2}
li .nm small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:3px}
li .d{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
li.cur button{background:var(--surface2);box-shadow:inset 3px 0 0 var(--green)}
li.cur .ix{color:var(--green)}
li.done .ix{color:var(--green-dim)}
li.done .nm{color:var(--muted)}

.set{padding:0 16px 16px;display:flex;flex-direction:column;gap:14px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.row span{font-weight:600}
.row small{display:block;color:var(--muted);font-weight:400;font-size:12px}
.sw{width:48px;height:28px;border-radius:999px;background:var(--line);position:relative;flex:none;transition:background .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--text);transition:transform .2s}
.sw[aria-pressed="true"]{background:var(--green)}
.sw[aria-pressed="true"]::after{transform:translateX(20px);background:#000}
.vol input[type=range]{width:100%}

@media (prefers-reduced-motion:reduce){.running .ph .bars span,.count.pop,.nc-n.pop{animation:none}.sheet,.scrim{transition:none}}