:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F6F9; --ink:#14213D; --ink-2:#4A5568; --ink-3:#8592A6; --line:#E2E7EE;
  --brand:#1D3F72; --brand-2:#2B5797; --brand-soft:#EAF0F8; --brand-ink:#163360;
  --gain:#1B7A52; --gain-2:#23935F; --gain-bg:#E8F5EE; --gain-ink:#0F5132;
  --loss:#C53030; --loss-bg:#FDECEC; --loss-ink:#8B1D1D;
  --warn:#B7791F; --warn-bg:#FDF5E6; --warn-ink:#7A4E0E;
  --shadow:0 1px 2px rgba(20,33,61,.05);
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;overflow-x:clip}   /* clip y no hidden: hidden rompía los botones fijos (sticky) */
body{
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.shake{animation:shake .45s ease}

/* ---------- campos ---------- */
.input{display:flex;align-items:center;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:0 14px;transition:border-color .15s,background .15s}
.input:focus-within{border-color:var(--brand);background:var(--surface)}
.input .pre{color:var(--ink-3);font-weight:650;flex:none}
.input input{flex:1;min-width:0;width:100%;border:0;background:transparent;outline:none;padding:13px 6px;font-size:17px;font-weight:650}
.input.text input{padding-left:0;font-weight:600}
.input.big input{font-size:24px;font-weight:780;padding:15px 6px}

.opt{display:flex;gap:14px;align-items:center;text-align:left;width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:15px 16px;margin-bottom:10px;box-shadow:var(--shadow);transition:.15s}
.opt .em{font-size:26px;flex:none;width:36px;text-align:center}
.opt b{display:block;font-size:16.5px}
.opt span{font-size:14px;color:var(--ink-3)}
.opt.on{border-color:var(--brand);background:var(--brand-soft)}
.opt:active{transform:scale(.99)}
.opt .chk{margin-left:auto;width:22px;height:22px;border-radius:5px;border:2px solid var(--line);flex:none;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:900}
.opt.on .chk{background:var(--brand);border-color:var(--brand)}
.opt.multi{padding:13px 14px}
.opt.multi .em{font-size:22px;width:30px}
.opt.multi b{font-size:15.5px}

.btn{border:0;border-radius:10px;padding:16px 18px;font-weight:780;font-size:17px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s,opacity .15s;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.4;pointer-events:none}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--brand) 85%,transparent)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.btn-text{background:none;color:var(--brand);font-weight:700;font-size:15px;padding:12px}
.btn-block{width:100%}

/* ---------- quiz ---------- */
.quiz{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:calc(14px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom))}
.q-top{display:flex;align-items:center;gap:12px;height:44px}
.q-back{border:1.5px solid var(--line);background:var(--surface);width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none}
.q-back svg{width:20px;height:20px}
.q-prog{flex:1;height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.q-prog i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .35s ease}
.q-step{display:none;flex-direction:column;flex:1;padding-top:18px;animation:fade .3s ease}
.q-step.on{display:flex}
.q-step h1{font-size:30px;line-height:1.12;letter-spacing:-.03em;margin:0 0 10px;font-weight:840}
.q-step h2{font-size:25px;line-height:1.15;letter-spacing:-.025em;margin:0 0 8px;font-weight:820}
.q-step p.lead{font-size:16px;color:var(--ink-2);margin:0 0 20px}
.q-grow{flex:1;min-height:20px}
.q-foot{display:flex;flex-direction:column;gap:6px;padding-top:16px}
.q-sticky{position:sticky;bottom:0;padding-bottom:calc(4px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 30%)}
.hero-logo{width:72px;height:72px;border-radius:18px;margin:28px 0 22px}
@media (max-height:700px){.hero-logo{width:56px;height:56px;border-radius:14px;margin:6px 0 14px}}   /* navegador de Instagram: que el botón se vea sin scrollear */
.t-head{display:flex;justify-content:space-between;align-items:center}
.t-head .kicker{margin-bottom:0}
.t-pague{border:0;padding:6px 0;font-size:14px}
.t-sub{margin:10px 0 14px;font-size:15px;color:var(--ink-2)}
.kicker{align-self:flex-start;background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:12.5px;padding:6px 12px;border-radius:6px;margin-bottom:12px;letter-spacing:.04em}
.ticks{list-style:none;padding:0;margin:0 0 8px}
.ticks li{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:15.5px;color:var(--ink-2)}
.ticks li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:var(--gain-bg);color:var(--gain);font-weight:900;font-size:13px;display:grid;place-items:center;margin-top:1px}
.count{font-size:13.5px;font-weight:700;color:var(--ink-3);margin:-8px 0 12px}

.loading{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px}
.spinner{width:64px;height:64px;border-radius:50%;border:6px solid var(--brand-soft);border-top-color:var(--brand);animation:spin .8s linear infinite}
.load-list{list-style:none;padding:0;margin:0;font-size:16px;color:var(--ink-3);text-align:left}
.load-list li{padding:5px 0;transition:color .2s}
.load-list li.done{color:var(--ink)}
.load-list li.done::before{content:"✓ ";color:var(--gain);font-weight:900}

/* ---------- paywall ---------- */
.pw-hero{position:relative;border-radius:14px;padding:20px;color:#fff;overflow:hidden;margin:4px 0 14px;background:var(--brand)}
.pw-hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.pw-hero small{font-size:14px;font-weight:700;opacity:.92;position:relative}
.pw-hero .big{font-size:44px;font-weight:850;letter-spacing:-.03em;line-height:1.05;margin:4px 0 6px;position:relative}
.pw-hero p{margin:0;font-size:14.5px;font-weight:550;opacity:.95;position:relative}
.pw-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;position:relative}
.pw-chips span{background:rgba(255,255,255,.14);font-size:13px;font-weight:750;padding:5px 10px;border-radius:6px}
.preview{position:relative;background:var(--surface);border-radius:14px;border:1px solid var(--line);padding:16px;margin-bottom:14px;overflow:hidden}
.preview h3{font-size:15px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.pv-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:14.5px}
.pv-row:first-of-type{border-top:0}
.pv-row .n{flex:none;width:26px;height:26px;border-radius:6px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:850;font-size:13px}
.pv-row .t{font-weight:650}
.blur{filter:blur(5.5px);user-select:none;pointer-events:none}
.pv-hook{margin:4px 0 0;font-size:14.5px;color:var(--ink-2);background:var(--brand-soft);border-radius:12px;padding:10px 12px}
.lockpill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--brand);background:var(--brand-soft);padding:3px 9px;border-radius:6px;margin-left:auto}
.pw-price{display:flex;flex-direction:column;gap:12px;background:var(--surface);border-radius:14px;padding:14px 16px;margin:6px 0 14px;border:2px solid var(--brand)}
.pw-antes{color:var(--ink-3);font-weight:700;margin-right:2px}
.pw-bar{position:sticky;bottom:0;z-index:5;margin:14px -20px 0;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -10px 24px -16px rgba(20,33,61,.35);display:flex;align-items:center;justify-content:space-between;gap:12px}
.pw-bar span{font-size:22px;font-weight:840;letter-spacing:-.02em;white-space:nowrap}
.pw-bar s{font-size:14px;font-weight:700;color:var(--ink-3)}
.pw-bar small{display:block;font-size:12.5px;font-weight:700;color:var(--gain)}
.pw-bar .btn{flex:none;padding:14px 22px;font-size:16px}
.pw-price-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pw-price .p{font-size:28px;font-weight:840;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.pw-price .p em{font-style:normal;font-size:14px;font-weight:800;color:var(--ink-3);letter-spacing:.04em;margin-top:6px}
.pw-price small{display:block;font-size:13px;color:var(--ink-3);font-weight:600}
.pw-tag{background:var(--brand);color:#fff;font-size:12px;font-weight:800;padding:5px 10px;border-radius:6px;white-space:nowrap}
.flag{width:30px;height:20px;flex:none;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.pw-mini{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:10px 0 0;border-top:1px dashed var(--line)}
.pw-mini li{font-size:13px;font-weight:650;color:var(--ink-2);display:flex;align-items:center;gap:5px}
.pw-mini li::before{content:"✓";color:var(--gain);font-weight:900}
.pw-anchor{margin:0;font-size:13.5px;color:var(--ink-2);font-weight:600}
.btn-mp{background:#009EE3;color:#fff;box-shadow:0 10px 24px -10px rgba(0,158,227,.75);font-size:17px}
.ok-check{width:24px;height:24px;border-radius:50%;background:#fff;color:#12A150;display:grid;place-items:center;flex:none}
.ok-check svg{width:15px;height:15px}
.trust-row{display:flex;justify-content:space-between;gap:6px;margin-top:10px}
.trust-row span{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--ink-2);text-align:center}
.trust-row svg{width:20px;height:20px;color:var(--gain)}
.pay-methods{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px}
.pay-methods span{font-size:12px;font-weight:700;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 10px}
.pw-secure{text-align:center;font-size:12.5px;color:var(--ink-3);margin:8px 0 0}
.guarantee{text-align:center;font-size:13.5px;color:var(--ink-3);margin:8px 0 0}
.guarantee-box{display:flex;gap:12px;align-items:center;background:var(--gain-bg);color:var(--gain-ink);border-radius:12px;padding:12px 14px;margin:14px 0 4px}
.guarantee-box .g-ico{width:38px;height:38px;border-radius:50%;background:var(--gain);color:#fff;display:grid;place-items:center;flex:none}
.guarantee-box .g-ico svg{width:22px;height:22px}
.guarantee-box b{display:block;font-size:15px}
.guarantee-box span{font-size:13.5px;font-weight:550}
.err{color:var(--loss);font-size:14px;font-weight:650;min-height:20px;margin:8px 2px 0}
.code-input input{text-transform:uppercase;letter-spacing:.08em;text-align:center;font-size:22px;font-weight:780;padding:16px 6px}

/* ---------- hoja de ruta ---------- */
#ruta{max-width:620px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom))}
.topbar{display:flex;align-items:center;gap:10px;padding-bottom:12px}
.logo{width:34px;height:34px;border-radius:10px;flex:none}
.topbar h1{font-size:17px;font-weight:760;margin:0;flex:1}
.icon-btn{border:1.5px solid var(--line);background:var(--surface);height:40px;border-radius:10px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;font-weight:750;font-size:14px;color:var(--ink)}
.icon-btn svg{width:18px;height:18px}
.r-hero{position:relative;overflow:hidden;border-radius:14px;padding:22px 20px;color:#fff;background:var(--brand);margin-bottom:14px}
.r-hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.r-hero h2{font-size:26px;line-height:1.12;letter-spacing:-.02em;margin:0 0 8px;position:relative}
.r-hero p{margin:0;font-size:15px;opacity:.95;position:relative}
.r-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;position:relative}
.r-stats div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:10px 8px;text-align:center}
.r-stats b{display:block;font-size:22px;font-weight:850;letter-spacing:-.02em}
.r-stats span{font-size:12px;font-weight:650;opacity:.92}
.sec{background:var(--surface);border-radius:14px;padding:18px 16px;border:1px solid var(--line);margin-bottom:14px}
.sec h3{font-size:19px;letter-spacing:-.01em;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.sec .sub{color:var(--ink-2);font-size:14.5px;margin:0 0 14px}
.todo{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px dashed var(--line);cursor:pointer}
.todos{list-style:none;margin:0;padding:0}
.todos .todo{cursor:default}
.todo input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:5px;border:2px solid var(--line);flex:none;margin:0;display:grid;place-items:center;cursor:pointer;background:var(--surface)}
.todo input:checked{background:var(--gain);border-color:var(--gain)}
.todo input:checked::after{content:"✓";color:#fff;font-weight:900;font-size:14px}
.todo span{font-size:15px}
.todo span small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px}
.todo input:checked+span{color:var(--ink-3);text-decoration:line-through}
.rule{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.rule:first-of-type{border-top:0}
.rule .em{font-size:20px;flex:none}
.r-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 10px}
.r-actions .btn{font-size:15px;padding:15px 10px}
.note{font-size:12.5px;color:var(--ink-3);text-align:center;padding:4px 12px 8px}

/* ---------- hoja de ruta (v4) ---------- */
.part-h{font-size:12.5px;font-weight:850;letter-spacing:.08em;color:var(--brand);margin:22px 4px 8px;text-transform:uppercase}
.hook{border-radius:14px;padding:18px;background:var(--surface);margin-bottom:14px;border:2px dashed var(--brand)}
.hook h3{margin:0 0 6px;font-size:19px}
.hook p{margin:0;color:var(--ink-2)}
.card{background:var(--surface);border-radius:12px;margin-bottom:10px;border:1.5px solid var(--line)}
.card>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;min-height:56px}
.card>summary::-webkit-details-marker{display:none}
.card .num{flex:none;width:34px;height:34px;border-radius:11px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:850}
.card .ttl{flex:1;font-weight:760;font-size:16px;line-height:1.25}
.card .ttl small{display:block;font-weight:600;color:var(--ink-3);font-size:12.5px;margin-top:2px}
.card .chev{flex:none;transition:transform .2s;color:var(--ink-3)}
.card[open] .chev{transform:rotate(180deg)}
.card-b{padding:0 16px 16px}
.card-b>p{margin:0 0 10px;color:var(--ink-2);font-size:15px}
.card.done .num{background:var(--gain);color:#fff}
.card.next{border-color:var(--brand)}
.aca{display:inline-block;background:var(--brand);color:#fff;font-size:12px;font-weight:800;padding:3px 9px;border-radius:6px;margin-top:4px}
.pro-tag{display:inline-block;background:var(--warn-bg);color:var(--warn-ink);font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:5px;margin-left:6px;vertical-align:middle}
.tip{background:var(--warn-bg);color:var(--warn-ink);border-radius:14px;padding:12px 14px;font-size:14.5px;margin:10px 0}
.cmp{margin:12px 0;background:var(--brand-soft);border-radius:14px;padding:12px 14px}
.cmp>b{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-ink);margin-bottom:4px}
.cmp>p{margin:0;font-size:15px;color:var(--ink)}
.deep{font-size:13.5px;color:var(--ink-3);margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--line)}
.ej{background:var(--surface-2);border-left:3px solid var(--brand);border-radius:8px;padding:12px 14px;margin-top:12px}
.ej-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ej-h b{font-size:13.5px;flex:1;color:var(--brand-ink)}
.ej pre{white-space:pre-wrap;word-wrap:break-word;font-family:inherit;font-size:14.5px;line-height:1.5;margin:0}
.ej pre mark{background:var(--brand-soft);color:var(--brand-ink);border-radius:5px;padding:0 3px;font-weight:650}
.copy{border:0;background:var(--brand);color:#fff;font-weight:780;font-size:13px;padding:8px 12px;border-radius:6px;flex:none;min-height:36px}
.copy.ok{background:var(--gain)}
.tambien{font-size:13px;color:var(--ink-3);margin:10px 0 0}
.tool-link{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:12px;padding:0 14px 0 8px;border-radius:8px;border:1.5px solid var(--line);color:var(--ink);font-weight:750;font-size:14px;text-decoration:none;background:var(--surface)}
.tool-link img,.pieza img{width:22px;height:22px;background:#fff;border-radius:6px;padding:2px}
.extra{border-left:3px solid var(--brand);padding:2px 0 2px 12px;margin:12px 0;font-size:14.5px}
.extra p{margin:0 0 6px}
.pro-box{background:linear-gradient(135deg,#D97757,#C2603F);color:#fff;border-radius:14px;padding:18px;margin-bottom:14px}
.pro-box h3{margin:0 0 4px;font-size:19px}
.pro-box p{margin:0 0 10px;opacity:.95;font-size:14.5px}
.pro-box ul{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:4px;font-size:14px;font-weight:650}
.pro-box li::before{content:"✓ "}
.pro-box .pro-nota{margin:12px 0 0;font-size:12.5px;opacity:.9}
.pro-box a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;background:#fff;color:#8A3A20;font-weight:800;text-decoration:none}
.pieza{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.pieza a{color:var(--ink);font-weight:800}
.pieza p{margin:2px 0 0;font-size:14px;color:var(--ink-2)}
.formula{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 10px}
.formula div{background:var(--surface-2);border-radius:8px;padding:10px 12px;font-size:13.5px;color:var(--ink-2)}
.formula b{display:block;color:var(--ink);font-size:15px}

/* ---------- recreaciones de Claude (siempre oscuras, como la app) ---------- */
.ck{--ck-bg:#1F1E1D;--ck-panel:#2A2927;--ck-line:#3D3B38;--ck-ink:#ECEAE4;--ck-ink2:#A9A69E;--ck-acc:#D97757;--ck-blue:#86A8E7;background:var(--ck-bg);color:var(--ck-ink);border-radius:16px;padding:14px;font-size:14px;margin:12px 0 6px;overflow:hidden}
.ck b{color:var(--ck-ink)}
.ck-cap{font-size:12.5px;color:var(--ink-3);margin:0 0 10px;text-align:center}
.ck-hl{box-shadow:0 0 0 2px var(--ck-acc);border-radius:10px;animation:ckpulse 1.8s ease-in-out infinite}
@keyframes ckpulse{50%{box-shadow:0 0 0 5px rgba(217,119,87,.35)}}
.ck-hello{font-family:Georgia,serif;font-size:20px;text-align:center;margin:4px 0 12px}
.ck-star{color:var(--ck-acc)}
.ck-box{border:1px solid var(--ck-line);background:var(--ck-panel);border-radius:14px;padding:12px}
.ck-ph{color:var(--ck-ink2);min-height:38px;white-space:pre-wrap;word-wrap:break-word;font-size:13.5px}
.ck-row{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap}
.ck-btn,.ck-model{background:transparent;border:0;color:var(--ck-ink);min-width:40px;min-height:40px;border-radius:9px;font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.ck-model{margin-left:auto;color:var(--ck-ink2);padding:0 6px}
.ck-model small{color:var(--ck-ink2);opacity:.8}
.ck-mic{color:var(--ck-ink2);display:inline-flex}
.ck-seg{display:inline-flex;background:#1A1918;border-radius:10px;padding:3px}
.ck-seg button{background:none;border:0;color:var(--ck-ink2);font:inherit;padding:0 12px;min-height:34px;border-radius:8px;cursor:pointer}
.ck-seg button[aria-pressed=true]{background:#3D3B38;color:var(--ck-ink)}
.ck-pop,.ck-share{background:var(--ck-panel);border:1px solid var(--ck-line);border-radius:14px;padding:6px;margin-top:8px}
.ck-item{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:8px 10px;border-radius:9px;background:none;border:0;color:var(--ck-ink);font:inherit;min-height:42px;cursor:pointer;flex-wrap:wrap}
.ck-item:hover,.ck-item[aria-pressed=true],.ck-item.on{background:#3A3935}
.ck-item small{display:block;width:100%;color:var(--ck-ink2);font-size:12.5px;margin-left:0}
.ck-ic{width:22px;text-align:center;flex:none}
.ck-explica{margin:10px 0 0;background:#2E2D2A;border-left:3px solid var(--ck-acc);padding:10px;border-radius:8px;font-size:13.5px}
.ck-note{color:var(--ck-ink2);font-size:12.5px;margin:8px 4px 2px}
.ck-pro{font-style:normal;font-size:11px;color:var(--ck-blue);border:1px solid var(--ck-blue);border-radius:999px;padding:0 6px;margin-left:6px}
.ck-split{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:560px){.ck-split{grid-template-columns:150px 1fr}}
.ck-side{display:flex;flex-direction:column;gap:2px;font-size:13px;border-right:0}
@media (max-width:559px){
  .ck-side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px;max-width:100%;padding:2px 2px 8px;border-bottom:1px solid var(--ck-line)}
  .ck-side>*{flex:none;white-space:nowrap}
  .ck-side .ck-nav{padding:5px 6px}
  .ck-logo{display:none}
  .ck-side .ck-user{display:none}
}
.ck-logo{font-family:Georgia,serif;font-size:17px;margin:0 6px 8px}
.ck-nav{display:flex;align-items:center;gap:6px;padding:6px;color:var(--ck-ink)}
.ck-user{margin-top:12px;display:flex;align-items:center;gap:6px;color:var(--ck-ink2);font-size:12.5px}
.ck-av{width:22px;height:22px;border-radius:50%;background:#3D3B38;display:grid;place-items:center;color:var(--ck-ink);font-size:11px}
.ck-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.ck-head>b{flex:1;min-width:0}
.ck-h{font-family:Georgia,serif;font-size:18px}
.ck-cta{background:#fff;color:#1F1E1D;border:0;border-radius:9px;padding:0 12px;min-height:36px;display:inline-flex;align-items:center;font:inherit;font-weight:650;cursor:pointer}
.ck-card{border:1px solid var(--ck-line);border-radius:12px;padding:12px;margin-bottom:8px}
.ck-card small,.ck-art small{display:block;color:var(--ck-ink2);font-size:12.5px;margin-top:2px}
.ck-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.ck-tabs button{background:none;border:1px solid var(--ck-line);color:var(--ck-ink2);border-radius:9px;min-height:36px;padding:0 10px;font:inherit;cursor:pointer}
.ck-tabs button[aria-selected=true]{background:#3A3935;color:var(--ck-ink);border-color:var(--ck-blue)}
.ck-field{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 6px;border-top:1px solid var(--ck-line)}
.ck-field small{display:block;color:var(--ck-ink2);font-size:12px}
.ck-field b{font-weight:600;text-align:right}
.ck-col{flex-direction:column;align-items:stretch}
.ck-area{margin:6px 0 0;background:#1A1918;border:1px solid var(--ck-line);border-radius:10px;padding:10px;color:var(--ck-ink);font-size:13px}
.ck-toggle{width:38px;height:22px;border-radius:999px;background:#3D3B38;position:relative;flex:none}
.ck-toggle::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--ck-ink2)}
.ck-con{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ck-con img{background:#fff;border-radius:5px;padding:2px}
.ck-abrir{color:var(--ck-ink2);font-size:13px;font-weight:600;text-decoration:none;margin-right:10px}
.ck-abrir:hover{color:var(--ck-ink)}
.ck-u{margin:10px 0 6px auto;background:#3A3935;border-radius:14px;padding:9px 12px;max-width:88%;width:fit-content}
.ck-tool{color:var(--ck-ink2);font-size:12.5px;margin:8px 0 4px}
.ck-c{font-family:Georgia,serif;line-height:1.5;font-size:14.5px}
.ck-c p{margin:4px 0}
.ck-c ul{margin:4px 0;padding-left:18px}
.ck-art{display:flex;align-items:center;gap:10px;border:1px solid var(--ck-line);border-radius:12px;padding:10px;margin:6px 0}
.ck-art>span:nth-child(2){flex:1;min-width:0}
.ck-art-ic{width:40px;height:40px;border-radius:9px;background:#2E2D2A;display:grid;place-items:center;flex:none}
.ck-report{background:#191817;border:1px solid var(--ck-line);border-radius:14px;padding:12px;margin-top:10px}
.ck-report h4{margin:0;font-size:18px}
.ck-report h5{margin:14px 0 8px;font-size:15px}
.ck-report>small{color:var(--ck-ink2)}
.ck-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.ck-kpis div{border:1px solid var(--ck-line);border-radius:10px;padding:8px}
.ck-kpis small{display:block;color:var(--ck-ink2);font-size:11.5px}
.ck-kpis b{font-size:clamp(12px,3.6vw,17px);white-space:nowrap}
@media (max-width:399.98px){.ck-kpis{grid-template-columns:1fr}.ck-kpis div{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:7px 10px}.ck-kpis small{display:inline}.ck-kpis b{font-size:16px}}
.ck-legend{display:flex;gap:10px;font-size:12px;color:var(--ck-ink2)}
.ck-legend span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px}
.ck-legend .e::before{background:#7BC08E}.ck-legend .s::before{background:#D9906F}.ck-legend .n::before{background:#86A8E7}
.ck-meses{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:3px;align-items:end;height:120px;margin-top:8px}
.ck-mes{display:flex;flex-direction:column;align-items:center;height:100%;font-size:9px;letter-spacing:-.04em;color:var(--ck-ink2)}
.ck-mes-b{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:1px}
.ck-mes-b i{display:block;width:30%;border-radius:2px 2px 0 0}
.ck-mes-b .e{background:#7BC08E}.ck-mes-b .s{background:#D9906F}.ck-mes-b .n{background:#86A8E7}
.ck-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.ck-chips button{border:0;border-radius:999px;min-height:32px;padding:0 11px;font:inherit;font-size:12.5px;font-weight:650;background:#2E2D2A;color:var(--ck-ink2);cursor:pointer}
.ck-chips button[aria-pressed=true]{background:var(--ck-blue);color:#13213D}
.ck-cat{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin-bottom:8px;font-size:12.5px}
@media (min-width:560px){.ck-cat{grid-template-columns:170px 1fr auto;align-items:center;gap:8px}}
.ck-cat-b{background:#2A2927;border-radius:4px;height:14px;overflow:hidden}
.ck-cat-b i{display:block;height:100%;background:#D9906F;border-radius:4px}
.ck-cat-v{color:var(--ck-ink2);white-space:nowrap}
.ck-tabla{overflow-x:auto;margin-top:12px}
.ck-tabla table{border-collapse:collapse;width:100%;font-size:12px;min-width:380px}
.ck-tabla th,.ck-tabla td{padding:6px 4px;border-bottom:1px solid var(--ck-line);text-align:right}
.ck-tabla th:first-child,.ck-tabla td:first-child{text-align:left}
@media (max-width:479.98px){.ck-tabla table{min-width:0;font-size:11px}.ck-tabla th:nth-child(5),.ck-tabla td:nth-child(5){display:none}.ck-tabla th,.ck-tabla td{padding:6px 2px}}
.ck-share b{display:block;padding:6px 10px}
.ck-invitar{display:flex;align-items:center;gap:6px;border:1px solid var(--ck-line);background:#1A1918;border-radius:10px;padding:4px 4px 4px 10px;margin:4px 6px 6px}
.ck-invitar input{flex:1;min-width:0;background:none;border:0;color:var(--ck-ink);font:inherit;font-size:14px;min-height:36px;outline:none}
.ck-invitar input::placeholder{color:var(--ck-ink2)}
.ck-rol{background:#2E2D2A;border:0;color:var(--ck-ink);border-radius:8px;min-height:36px;padding:0 10px;font:inherit;font-size:13.5px;display:inline-flex;align-items:center;gap:4px;cursor:pointer;flex:none}
.ck-share>[data-ck-invitar]{margin:0 6px 4px}
.ck-sub{display:block;color:var(--ck-ink2);font-size:12px;margin:10px 10px 2px}
.ck-ic svg{display:block;margin:0 auto}
.ck-item svg{vertical-align:-2px;margin-right:2px}

.sheet-bg{position:fixed;inset:0;z-index:60;background:rgba(10,10,15,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);width:100%;max-width:520px;border-radius:16px 16px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom));animation:fade .25s ease}
.sheet h3{margin:0 0 8px;font-size:19px}
.sheet p{margin:0 0 16px;color:var(--ink-2)}
.sheet .btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);z-index:70;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;font-weight:650;font-size:14.5px;opacity:0;pointer-events:none;transition:.25s;width:max-content;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translateX(-50%)}
.cargando{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
.cargando b{font-size:20px}
.cargando span{color:var(--ink-3);font-size:14.5px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* Portada, índice y notas del PDF: solo existen al imprimir */
.solo-print{display:none}

/* PDF: imprimir solo la hoja de ruta.
   Orden: portada (+ el gancho) · índice · Parte 1 · Parte 2 · Bonus · Reglas, cada parte en hoja nueva.
   Cada concepto, nivel, bonus y mockup va entero en una hoja: si no entra en lo que queda, pasa a la siguiente.
   El informe del Nivel 5 se imprime resumido (.solo-app) para que entre en una. */
@page{size:A4;margin:14mm 12mm 16mm;
  @bottom-left{content:"Mi Ruta IA · Cebaia";font:600 8.5pt system-ui,-apple-system,sans-serif;color:#8592A6}
  @bottom-right{content:counter(page) " / " counter(pages);font:600 8.5pt system-ui,-apple-system,sans-serif;color:#8592A6}}
@page:first{@bottom-left{content:none}@bottom-right{content:none}}
@media print{
  /* Escala de impresión: con el texto al 82 % cada nivel (con su mockup, pasos y ejemplo) entra en una hoja A4. */
  #rutaBody{zoom:.82}
  #ruta .solo-print{display:block!important}
  #ruta .solo-app{display:none!important}
  .r-hero{display:none!important}
  .portada{text-align:center;padding:38mm 8mm 14mm}
  .portada img{border-radius:16px;margin:0 auto 14px}
  .portada-marca{margin:0;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
  .portada h1{margin:10px 0 8px;font-size:34px;line-height:1.15;color:var(--ink)}
  .portada-sub{margin:0 auto;max-width:440px;font-size:16px;color:var(--ink-2)}
  .portada-datos{list-style:none;padding:0;margin:22px 0 0;display:flex;justify-content:center;gap:26px;font-size:13px;color:var(--ink-2)}
  .portada-datos b{display:block;font-size:24px;color:var(--brand)}
  .portada-fecha{margin:18px 0 0;font-size:12px;color:var(--ink-3)}
  .hook{margin-top:14mm}
  .pro-box.solo-print{break-after:page;page-break-after:always}
  #ruta>.note{display:none}
  .indice{break-after:page;page-break-after:always}
  .indice h2{font-size:24px;margin:0 0 14px;color:var(--ink)}
  .indice ol{list-style:none;margin:0;padding:0}
  .indice>ol>li{margin:0 0 12px;break-inside:avoid;page-break-inside:avoid}
  .indice>ol>li>a{display:block;font-weight:800;font-size:15px;color:var(--brand);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:4px}
  .indice ol ol li{font-size:13.5px;line-height:1.6}
  .indice ol ol a{color:var(--ink-2);text-decoration:none}
  .part-h,#reglas{break-before:page;page-break-before:always}
  .part-h{margin-top:0}
  .card,.sec,.hook,.pro-box,.ck,.ck-informe{break-inside:avoid;page-break-inside:avoid}
  /* Informe del Nivel 5 resumido: el pedido "Haceme un artifact…" y el informe (totales, gráfico y las 5 categorías más grandes). */
  .ck-informe .ck-cats .ck-cat:nth-child(n+6),
  .ck-informe>.ck-tool,.ck-informe>.ck-c,.ck-informe>.ck-art,.ck-informe>.ck-u~.ck-u{display:none!important}
  /* …y más compacto, para que el Nivel 5 entre en una hoja con margen (medido: 102 % → menos del 90 %). */
  .ck-informe>.ck-head,.ck-informe>.ck-u{display:none!important}
  .ck-informe .ck-report{margin-top:0;padding:10px}
  .ck-informe .ck-kpis{margin:6px 0}
  .ck-informe .ck-meses{height:72px}
  .ck-informe .ck-report h5{margin:8px 0 4px}
  .ck-informe .ck-cat{grid-template-columns:180px minmax(0,1fr) auto;align-items:center;gap:8px;margin-bottom:4px}
  .ck-informe .ck-cat-b{height:10px}
  .ck-note.solo-print{font-style:italic}
  :root:not(#imprimir){--bg:#fff;--surface:#fff;--surface-2:#F4F6F9;--ink:#14213D;--ink-2:#4A5568;--ink-3:#8592A6;--line:#E2E7EE;--brand:#1D3F72;--brand-2:#2B5797;--brand-soft:#EAF0F8;--brand-ink:#163360;--gain:#1B7A52;--gain-bg:#E8F5EE;--gain-ink:#0F5132;--warn-bg:#FDF5E6;--warn-ink:#7A4E0E;--shadow:none;color-scheme:light}
  body{background:#fff}
  .no-print,.toast,.copy{display:none!important}
  #ruta{max-width:none;padding:0}
  /* Si una tarjeta no entra en una hoja, igual no se corta ninguna línea: cada bloque chico va entero. */
  .sec,.r-hero,.card,.hook,.pro-box{box-shadow:none}
  .r-hero,.hook,.pro-box,.cmp,.tip,.deep,.ej,.todo,.formula>div,.pieza,.rule,.tambien,.extra p,
  .ck-item,.ck-field,.ck-card,.ck-note,.ck-cap,.ck-head,.ck-tool,.ck-user,.ck-u,.ck-c,.ck-explica,.ck-tabs,.ck-tabla tr,
  .ck-cat,.ck-chips,.ck-kpis,.ck-legend,.ck-meses,.ck-box,.ck-area,.ck-row,.ck-art,.ck-invitar,.ck-con,.ck-hello,.ck-nav,.ck-sub,
  .ck h5,.ck li,.ck p,.card summary,.card-b>p:first-child{break-inside:avoid;page-break-inside:avoid}
  .part-h,.card summary,.sec h3,.ej-h,.ck h5,.card-b>p:first-child,.ck-u{break-after:avoid;page-break-after:avoid}
  /* Si algo igual no entrara en una hoja, cada pedazo se cierra con sus bordes y su relleno. */
  .ck,.card,.sec,.ck-pop,.ck-share,.ck-report,.ck-main,.ck-box{-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .ck-cap,.card-b>:first-child{break-before:avoid;page-break-before:avoid}
  p,li{orphans:3;widows:3}
  .ck-tabla{overflow:visible}
  .ck-pop[hidden],.ck-report[hidden],.ck-share[hidden],[data-ck-panel][hidden]{display:block!important}
  .ck,.ck-report{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tool-link{display:none}
  .ck-hl{animation:none}
  .sec{border:1px solid #ddd}
  .r-hero,.pro-box{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Guardar como PDF desde el celular no conserva los links: la dirección queda escrita y se puede tocar igual. */
  .pro-box a::after{content:" · " attr(href);font-weight:650}
}
.aviso-spam{display:flex;gap:8px;align-items:flex-start;background:var(--warn-bg);color:var(--warn-ink);border-radius:10px;padding:10px 12px;margin-top:10px;font-size:13.5px;line-height:1.4}

/* ---------- pantalla Entrar (mail + código) ---------- */
.yp-aviso{background:var(--gain-bg);color:var(--gain-ink);border-radius:10px;padding:12px 14px;margin:0 0 14px;font-size:15px;font-weight:650;line-height:1.4}
.q-step .yp-spam{font-size:13.5px;color:var(--ink-3);margin:-12px 0 12px}
.yp-sin{display:flex;flex-direction:column;gap:10px;background:var(--warn-bg);color:var(--warn-ink);border-radius:12px;padding:14px}
.yp-sin p{margin:0;font-size:15px;line-height:1.4}
.yp-sin .yp-sin-txt{font-size:14px}
.yp-pie{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;font-weight:650;color:var(--ink-2)}
.code-input #qOtp{letter-spacing:.3em}
.btn-wa{background:#1A8F4C;color:#fff;box-shadow:0 10px 24px -12px rgba(26,143,76,.8)}
.btn-wa svg{width:20px;height:20px;flex:none}