:root{--v:#6E4FD0;--deep:#49308F;--ink:#3B2A5E;--lil:#E9E2F8;--bg:#F7F5FB;--mut:#7A6F92;--ok:#2E9E6B;--warn:#C2563A;--r:20px;--sh:0 8px 24px rgba(73,48,143,.12)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--ink);font-family:Nunito,system-ui,sans-serif;font-size:17px;line-height:1.45}
#app{max-width:480px;margin:0 auto;min-height:100vh;padding-bottom:96px}
h1,h2,h3{font-family:Fraunces,Georgia,serif;color:var(--ink);line-height:1.15}
h1{font-size:30px}h2{font-size:24px}h3{font-size:19px}
p{margin:.35em 0}
.pad{padding:22px 20px}
.mut{color:var(--mut)}.small{font-size:14px}.center{text-align:center}
.btn{display:block;width:100%;border:0;border-radius:16px;background:var(--v);color:#fff;font:800 18px Nunito,sans-serif;padding:17px 18px;margin-top:16px;cursor:pointer;box-shadow:0 6px 18px rgba(110,79,208,.35);text-decoration:none;text-align:center}
.btn:active{transform:scale(.98)}.btn[disabled]{opacity:.45;box-shadow:none}
.btn.sec{background:#fff;color:var(--deep);border:2px solid var(--lil);box-shadow:none}
.btn.big{font-size:22px;min-height:68px}
.card{background:#fff;border-radius:var(--r);padding:18px;box-shadow:var(--sh);margin:14px 0}
.card.lil{background:var(--lil);box-shadow:none}
.card.deep{background:linear-gradient(150deg,var(--deep),var(--v));color:#fff}
.card.deep h2,.card.deep h3{color:#fff}
.pill{display:inline-block;background:var(--lil);color:var(--deep);border-radius:99px;padding:4px 12px;font-weight:800;font-size:13px}
.card.deep .pill{background:rgba(255,255,255,.18);color:#fff}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:2px solid var(--lil);border-radius:16px;padding:15px 16px;margin:10px 0;font:700 17px Nunito,sans-serif;color:var(--ink);cursor:pointer}
.opt .e{font-size:26px}.opt small{display:block;font-weight:600;color:var(--mut);font-size:14px}
.opt.on{border-color:var(--v);background:#F1ECFD}
input.txt{width:100%;border:2px solid var(--lil);border-radius:16px;padding:16px;font:700 19px Nunito,sans-serif;color:var(--ink);background:#fff;outline:none}
input.txt:focus{border-color:var(--v)}
.hero{position:relative;height:52vh;min-height:330px;overflow:hidden;border-radius:0 0 32px 32px}
.hero img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(247,245,251,1) 100%)}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:3px solid #fff;box-shadow:var(--sh)}
.avatar.xl{width:112px;height:112px}
.say{display:flex;gap:12px;align-items:flex-start}
.bubble{background:#fff;border-radius:4px 18px 18px 18px;padding:12px 14px;box-shadow:var(--sh);font-weight:600}
.dots{display:flex;gap:8px;justify-content:center;margin:18px 0}.dots i{width:9px;height:9px;border-radius:50%;background:var(--lil)}.dots i.on{background:var(--v)}
.row{display:flex;align-items:center;gap:12px}.sp{flex:1}
.list{list-style:none}.list li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #EFEAF8}.list li:last-child{border:0}
.kv{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px dashed #E2DAF4;font-weight:700}
.kv s{color:var(--mut);font-weight:600}
.tot{font-size:20px;font-weight:800}
.prog{height:10px;background:var(--lil);border-radius:99px;overflow:hidden;margin:10px 0}.prog b{display:block;height:100%;background:var(--v);border-radius:99px}
.card.deep .prog{background:rgba(255,255,255,.2)}.card.deep .prog b{background:#fff}
.ex{display:flex;gap:12px;align-items:center;padding:10px 0}
.ex .ic{width:44px;height:44px;border-radius:14px;background:var(--lil);display:grid;place-items:center;font-size:22px;flex:none}
.card.deep .ex .ic{background:rgba(255,255,255,.18)}
.done{color:var(--ok);font-weight:800}
.top{display:flex;align-items:center;gap:12px;padding:16px 20px 0}
.back{background:none;border:0;font-size:26px;color:var(--deep);cursor:pointer;padding:4px 8px 4px 0}
/* círculo de respiración */
.breath{position:relative;width:260px;height:260px;margin:26px auto;display:grid;place-items:center}
.breath .ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#B9A6F0 0%,var(--v) 70%);opacity:.9;transform:scale(.55);transition:transform 4s ease-in-out;box-shadow:0 0 60px rgba(110,79,208,.45)}
.breath .halo{position:absolute;inset:-18px;border-radius:50%;border:2px dashed #CFC2F3}
.breath .lbl{position:relative;color:#fff;font:800 20px Nunito,sans-serif;text-align:center;text-shadow:0 1px 6px rgba(0,0,0,.25)}
.breath .lbl small{display:block;font-size:34px;font-family:Fraunces,serif}
.timer{font:700 40px Fraunces,serif;text-align:center;color:var(--deep)}
.steps{counter-reset:s;list-style:none}.steps li{counter-increment:s;display:flex;gap:12px;padding:8px 0;font-weight:600}
.steps li:before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;background:var(--v);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.note{background:#FFF4EC;border-left:4px solid var(--warn);border-radius:10px;padding:10px 12px;font-weight:600;font-size:15px;margin-top:10px}
.tabs{display:flex;gap:8px;overflow:auto;padding:4px 0 8px}.tabs button{flex:none;border:0;background:#fff;border-radius:99px;padding:9px 14px;font:800 14px Nunito;color:var(--deep);box-shadow:var(--sh)}.tabs button.on{background:var(--v);color:#fff}
.nav{position:fixed;left:0;right:0;bottom:0;background:#fff;box-shadow:0 -6px 22px rgba(73,48,143,.12);display:flex;justify-content:space-around;align-items:flex-end;padding:8px 6px calc(8px + env(safe-area-inset-bottom));z-index:9}
.nav.hidden{display:none}
.nav a{flex:1;text-align:center;color:var(--mut);text-decoration:none;font:800 11px Nunito;display:flex;flex-direction:column;align-items:center;gap:3px}
.nav a .i{font-size:22px;line-height:1}
.nav a.on{color:var(--v)}
.nav a.sos .i{width:58px;height:58px;margin-top:-26px;border-radius:50%;background:linear-gradient(150deg,#E2556F,#C23A5A);color:#fff;display:grid;place-items:center;font:800 15px Nunito;box-shadow:0 8px 20px rgba(194,58,90,.4);border:4px solid #fff}
.foot{font-size:12px;color:var(--mut);text-align:center;padding:18px 24px}
.loader{width:56px;height:56px;border-radius:50%;border:6px solid var(--lil);border-top-color:var(--v);animation:sp 1s linear infinite;margin:30px auto}
@keyframes sp{to{transform:rotate(360deg)}}
.fade{animation:fd .45s ease both}@keyframes fd{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.range{width:100%;accent-color:var(--v)}
.chk{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ok);color:#fff;font-size:15px}
@media print{.nav,.btn,.top,.noprint{display:none!important}body{background:#fff}.card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}#app{max-width:none;padding:0}}
.kv>span:last-child,.kv>s{white-space:nowrap;margin-left:10px}