.ph{width:256px;height:520px;border-radius:40px;background:#1d2b3a;padding:9px;box-shadow:0 40px 60px -36px rgba(20,32,44,.6);position:relative}
.ph:before{content:"";position:absolute;top:16px;left:50%;width:70px;height:18px;margin-left:-35px;border-radius:12px;background:#1d2b3a;z-index:2}
.ph-scr{height:100%;border-radius:32px;background:var(--cream);overflow:hidden;padding:40px 14px 16px;font-size:12px;color:var(--navy);display:flex;flex-direction:column;gap:10px}
.ph-scr.app{background:#fff;padding:0;gap:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;color:#1f2d3d;display:flex;flex-direction:column}
.app .x-sb{display:flex;justify-content:space-between;align-items:center;padding:14px 22px 0;font-size:11px;font-weight:600;height:30px}
.app .x-sb-i{display:flex;align-items:flex-end;gap:2px}.app .x-sb-i i{width:3px;background:#1f2d3d;border-radius:1px}.app .x-sb-i i:nth-child(1){height:5px}.app .x-sb-i i:nth-child(2){height:7px}.app .x-sb-i i:nth-child(3){height:9px}.app .x-sb-i b{width:16px;height:8px;border-radius:2px;background:#1f2d3d;margin-left:4px}
.app .x-tb{display:flex;justify-content:space-between;align-items:center;padding:8px 14px 8px;border-bottom:1px solid #eef0f2}
.app .x-lg{width:26px;height:26px;border-radius:7px;background:url(../img/plenamente/plogo.jpg) center/cover}
.app .x-tb-r{display:flex;gap:12px;align-items:center}
.app .x-tb svg,.app .x-bn svg{width:19px;height:19px;fill:none;stroke:#1f2d3d;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.app .x-bell{position:relative;display:flex}.app .x-bell i{position:absolute;top:0;right:0;width:6px;height:6px;border-radius:50%;background:#e2483d}
.app .x-ab{flex:1;overflow:hidden;padding:8px 12px 6px;display:flex;flex-direction:column;gap:7px}
.app .x-bn{display:flex;justify-content:space-around;border-top:1px solid #eef0f2;padding:6px 0 12px;font-size:8.5px;color:#7a8592}
.app .x-bn>span{display:flex;flex-direction:column;align-items:center;gap:2px}
.app .x-bn>span.on{color:#1f2d3d;font-weight:600}
.app .x-bn svg{width:18px;height:18px;stroke:#7a8592}.app .x-bn .on svg{stroke:#1f2d3d}
.app .x-bn-i{position:relative;display:flex}.app .x-bn-i i{position:absolute;top:-1px;right:-2px;width:5px;height:5px;border-radius:50%;background:#e2483d}
.app .x-cw{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:7.5px;color:#9aa3ad;letter-spacing:.04em;margin-top:2px}
.app .x-cg{display:grid;grid-template-columns:repeat(7,1fr);row-gap:5px;text-align:center}
.app .x-cg span{position:relative;height:28px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;font-size:10.5px}
.app .x-cg span b{position:relative;z-index:1;width:22px;height:22px;line-height:22px;border-radius:50%;font-weight:500}
.app .x-cg span.cx b{color:#b6bdc5}
.app .x-cg span.cd b{background:#d9f2df}
.app .x-cg span.cd.cl:before,.app .x-cg span.cd.cr:after{content:"";position:absolute;top:9.5px;height:3px;background:#bfe6c9;width:50%}
.app .x-cg span.cd.cl:before{left:0}.app .x-cg span.cd.cr:after{right:0}
.app .x-cg span.ct b{background:#23394b;color:#fff;font-weight:700}
.app .x-cg span em{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:2px;height:5px}
.app .x-cg span em i{width:3px;height:3px;margin-top:1px;border-radius:50%;background:#3b82f6}
.app .x-cg span em i.ok{width:5px;height:5px;margin-top:0;background:none;position:relative}
.app .x-cg span em i.ok:after{content:"";position:absolute;left:1.2px;top:-.5px;width:1.6px;height:3.2px;border:solid #2fa24f;border-width:0 1.2px 1.2px 0;transform:rotate(45deg)}
.app .x-streak{display:flex;align-items:center;gap:6px;font-size:11px;border-top:1px solid #eef0f2;border-bottom:6px solid #f3f4f6;padding:8px 2px;margin:0 -12px;padding-left:14px}
.app .x-streak svg{width:15px;height:15px;fill:none;stroke:#3cae5c;stroke-width:2;stroke-linejoin:round}
.app .x-streak b{font-weight:700}
.app .x-today{display:flex;flex-direction:column;gap:7px}
.app .x-today-h{display:flex;justify-content:space-between;align-items:center;font-size:10.5px}
.app .x-today-h span{display:flex;align-items:center;gap:4px;font-size:9px;font-weight:600}
.app .x-today-h svg{width:13px;height:13px;fill:#23394b;stroke-width:2}
.app .x-vr{display:flex;align-items:center;gap:9px}
.app .x-vr img{width:84px;height:47px;border-radius:7px;object-fit:cover;flex:none}
.app .x-vr div{flex:1;min-width:0}
.app .x-vr b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:9.5px;font-weight:600;line-height:1.3;overflow:hidden}
.app .x-vr span{font-size:9px;color:#8a949e}
.app .x-vr .x-ck{width:17px;height:17px;flex:none;fill:#3cae5c;stroke-width:2}
.app .x-vr .x-pg{width:17px;height:17px;flex:none;border-radius:50%;background:conic-gradient(#23394b 70%,#e5e8eb 0);display:grid;place-items:center}
.app .x-vr .x-pg i{width:11px;height:11px;border-radius:50%;background:#fff}
.app .x-pl{display:flex;gap:5px;overflow:hidden;white-space:nowrap}
.app .x-pl span{font-size:9.5px;font-weight:600;padding:5px 9px;border-radius:7px;background:#f0f1f3;color:#1f2d3d}
.app .x-pl span.on{background:#23394b;color:#fff}
.app .x-sh{display:flex;justify-content:space-between;font-size:11px;font-weight:700;margin-top:4px}
.app .x-sh span{color:#9aa3ad;font-weight:400}
.app .x-gr{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.app .x-th{position:relative;display:block;border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:#e9ecef}
.app .x-th img{width:100%;height:100%;object-fit:cover;display:block}
.app .x-th em{position:absolute;right:4px;bottom:4px;font-style:normal;font-size:8px;font-weight:600;color:#fff;background:rgba(20,28,38,.62);border-radius:4px;padding:2px 4px;display:flex;align-items:center;gap:2px}
.app .x-th em svg{width:9px;height:9px;fill:none;stroke:#fff;stroke-width:2}
.app .x-ls{display:flex;justify-content:space-between;align-items:center;font-size:10px;padding:8px 10px;border:1px solid #eef0f2;border-radius:9px}
.app .x-ls-n{font-weight:600}.app .x-ls-c{color:#8a949e;font-size:9px}
.app .x-off{display:flex;align-items:center;gap:5px;font-size:9.5px;color:#3f7a3a;font-weight:600;margin:2px 0}
.app .x-off svg{width:12px;height:12px;fill:#3f7a3a}
.app .x-ch{font-size:14px;font-weight:700;margin-top:2px}
.app .x-po{border:1px solid #eef0f2;border-radius:10px;padding:9px 10px}
.app .x-po-h{display:flex;gap:7px;align-items:center}
.app .x-av{width:24px;height:24px;border-radius:50%;background:#23394b;color:#fff;font-size:8.5px;font-weight:700;display:grid;place-items:center;flex:none}
.app .x-av.x-c2{background:#9fb38f}
.app .x-po-h b{display:block;font-size:10px}.app .x-po-h span{font-size:8.5px;color:#8a949e}
.app .x-po p{margin:6px 0;font-size:10px;line-height:1.4}
.app .x-po-f{display:flex;gap:14px;font-size:8.5px;color:#7a8592;border-top:1px solid #f1f2f4;padding-top:6px}
.app .x-ab>*,.ph-scr.app>*{flex-shrink:0}.app .x-ab{flex:1 1 auto;min-height:0}
.app .x-cmp{border:1px solid #e3e6ea;border-radius:8px;padding:7px 9px;font-size:9.5px;color:#8a949e}
.app .x-chips{display:flex;gap:4px;overflow:hidden;white-space:nowrap}
.app .x-chips span{font-size:8.5px;padding:4px 7px;border-radius:999px;background:#f0f1f3}
.app .x-chips span.on{background:#23394b;color:#fff}

/* Tarjeta «Sigue practicando en Plenamente»: foto de la esterilla + móvil, como en la portada */
.nx-c{position:relative;width:100%;max-width:460px;justify-self:center;aspect-ratio:9/10}
.next-card .nx-c>img{position:absolute;right:0;top:0;width:80%;height:94%;aspect-ratio:auto;object-fit:cover;object-position:41% 100%;border-radius:24px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.nx-c .phw{position:absolute;left:0;bottom:0;width:150px;aspect-ratio:256/520}
.nx-c .phw .ph{position:absolute;left:0;top:0;transform-origin:top left;transform:scale(var(--phs,.59))}
@media (max-width:640px){.nx-c{max-width:none}.nx-c .phw{width:128px}}