/* Layout: columna de trabajo (boceto → 5 áreas, cada una con su pastel) y panel "plano" fijo a la derecha */
:root{
--paper:#fbf8fd; --sheet:#ffffff; --ink:#2d2a3e; --muted:#6e6a82; --line:#e7e2ef;
--blue:#7a5cc9; --blue-soft:#efe9fb; --marigold:#f2a96b; --hl:#f8e7a4; --on-pastel:#2d2a3e;
--good:#3f9a73; --good-soft:#e4f5ec; --bad:#c8624a; --bad-soft:#fbe9e3; --grid:rgba(122,92,201,.06);
--costo:#f7c6a8; --costo-soft:#fdeee4; --costo-ink:#b5643a;
--viabilidad:#a8dcc4; --viabilidad-soft:#e6f6ee; --viabilidad-ink:#2f8a63;
--necesidad:#f4b8cf; --necesidad-soft:#fde8f0; --necesidad-ink:#b2457a;
--mercado:#a9cdf0; --mercado-soft:#e6f1fb; --mercado-ink:#2f6fae;
--venta:#f3dc8f; --venta-soft:#fcf5dc; --venta-ink:#8f7110;
--f-display:"Fredoka","Baloo 2",ui-rounded,system-ui,sans-serif;
--f-body:"Public Sans",ui-sans-serif,system-ui,sans-serif;
--f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
--paper:#19172a; --sheet:#221f36; --ink:#ece8f6; --muted:#a7a1bd; --line:#36324d;
--blue:#b9a3f2; --blue-soft:#2e2850; --marigold:#f5bb8a; --hl:#4a4020;
--good:#7fd3a8; --good-soft:#1d3a2d; --bad:#f09a82; --bad-soft:#3e2620; --grid:rgba(185,163,242,.05);
--costo-soft:#3a2b26; --costo-ink:#f7c6a8; --viabilidad-soft:#1f362c; --viabilidad-ink:#a8dcc4;
--necesidad-soft:#3a2431; --necesidad-ink:#f4b8cf; --mercado-soft:#1f2e40; --mercado-ink:#a9cdf0;
--venta-soft:#373220; --venta-ink:#f3dc8f; color-scheme:dark}}
:root[data-theme="dark"]{
--paper:#19172a; --sheet:#221f36; --ink:#ece8f6; --muted:#a7a1bd; --line:#36324d;
--blue:#b9a3f2; --blue-soft:#2e2850; --marigold:#f5bb8a; --hl:#4a4020;
--good:#7fd3a8; --good-soft:#1d3a2d; --bad:#f09a82; --bad-soft:#3e2620; --grid:rgba(185,163,242,.05);
--costo-soft:#3a2b26; --costo-ink:#f7c6a8; --viabilidad-soft:#1f362c; --viabilidad-ink:#a8dcc4;
--necesidad-soft:#3a2431; --necesidad-ink:#f4b8cf; --mercado-soft:#1f2e40; --mercado-ink:#a9cdf0;
--venta-soft:#373220; --venta-ink:#f3dc8f; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55;
background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
background-size:24px 24px;
padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:28px 64px}
.wrap{max-width:1120px;margin:0 auto}
header{display:grid;gap:12px;margin-bottom:28px}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
h1{font-family:var(--f-display);font-weight:700;font-size:clamp(36px,7vw,64px);line-height:1.02;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1 .sk{color:var(--blue)}
h1 .al{color:var(--muted);font-weight:500}
h1 .pl{background:linear-gradient(transparent 58%,var(--hl) 58%);padding:0 .08em;border-radius:4px}
.dots{display:flex;gap:6px}
.dots i{width:14px;height:14px;border-radius:50%;display:block}
.lede{max-width:62ch;color:var(--muted);margin:0}
.note{display:inline-flex;gap:8px;align-items:center;font-size:13px;background:var(--sheet);border:1px dashed var(--marigold);
padding:6px 10px;border-radius:8px;width:fit-content;max-width:100%}
.note b{color:var(--ink)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px}
button{font:inherit;cursor:pointer}
.btn{border:1px solid var(--line);background:var(--sheet);color:var(--ink);padding:8px 14px;border-radius:999px;font-weight:500}
.btn:hover{border-color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
@media (max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}}
.steps{display:grid;gap:18px;min-width:0}
section.card{--a:var(--blue-soft);--a-soft:var(--blue-soft);--a-ink:var(--blue);
background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:0 22px 22px;display:grid;gap:16px;min-width:0;overflow:hidden}
section[data-area="costo"]{--a:var(--costo);--a-soft:var(--costo-soft);--a-ink:var(--costo-ink)}
section[data-area="viabilidad"]{--a:var(--viabilidad);--a-soft:var(--viabilidad-soft);--a-ink:var(--viabilidad-ink)}
section[data-area="necesidad"]{--a:var(--necesidad);--a-soft:var(--necesidad-soft);--a-ink:var(--necesidad-ink)}
section[data-area="mercado"]{--a:var(--mercado);--a-soft:var(--mercado-soft);--a-ink:var(--mercado-ink)}
section[data-area="venta"]{--a:var(--venta);--a-soft:var(--venta-soft);--a-ink:var(--venta-ink)}
.card-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;
background:var(--a-soft);margin:0 -22px;padding:16px 22px}
.card h2{font-family:var(--f-display);font-weight:600;font-size:24px;margin:0;color:var(--a-ink);display:flex;align-items:center;gap:10px}
.card h2 small{font-family:var(--f-display);font-weight:600;font-size:15px;width:30px;height:30px;border-radius:50%;
display:grid;place-items:center;background:var(--a);color:var(--on-pastel)}
.card p.hint{margin:0;color:var(--muted);font-size:14px}
.sketch{border-style:dashed;border-color:var(--blue)}
.pill{font-family:var(--f-mono);font-size:12px;padding:3px 10px;border-radius:999px;background:var(--sheet);color:var(--a-ink);font-variant-numeric:tabular-nums}
label.q{display:grid;gap:6px;font-weight:500}
textarea,select,input[type=text],input[type=number]{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 11px;width:100%}
textarea:focus,input:focus{border-color:var(--a-ink)}
textarea{min-height:76px;resize:vertical}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.nums label{font-size:14px}
.nums input{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.rate{display:grid;gap:8px}
.rate .qt{font-weight:500}
.scale{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.scale input{position:absolute;opacity:0;pointer-events:none}
.scale label{width:40px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;font-family:var(--f-mono);cursor:pointer;background:var(--paper)}
.scale label:hover{border-color:var(--a)}
.scale input:checked+label{background:var(--a);border-color:var(--a);color:var(--on-pastel);font-weight:500}
.scale input:focus-visible+label{outline:2px solid var(--a-ink);outline-offset:2px}
.scale .ends{font-size:12px;color:var(--muted);margin-left:4px}
.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;background:var(--a-soft);border-radius:10px;padding:14px}
.calc div{display:grid;gap:2px}
.calc span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.calc b{font-family:var(--f-mono);font-weight:500;font-size:18px;font-variant-numeric:tabular-nums}
aside.plan{position:sticky;top:16px;background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:16px}
@media (max-width:900px){aside.plan{position:static}}
.plan h3{font-family:var(--f-display);font-weight:600;margin:0;font-size:22px;color:var(--blue)}
.bars{display:grid;gap:10px}
.bar{display:grid;grid-template-columns:92px minmax(0,1fr) 40px;gap:10px;align-items:center;font-size:14px}
.track{height:12px;background:var(--paper);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.fill{height:100%;border-radius:999px;transition:width .3s}
#f-costo{background:var(--costo)} #f-viabilidad{background:var(--viabilidad)} #f-necesidad{background:var(--necesidad)}
#f-mercado{background:var(--mercado)} #f-venta{background:var(--venta)}
.fill.low{background:repeating-linear-gradient(45deg,var(--bad) 0 6px,var(--bad-soft) 6px 10px)!important}
.bar b{font-family:var(--f-mono);font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:12px}
.total b{font-family:var(--f-display);font-size:44px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--blue)}
.verdict{border-radius:12px;padding:14px;display:grid;gap:6px}
.verdict.ok{background:var(--good-soft);border:1px solid var(--good)}
.verdict.no{background:var(--bad-soft);border:1px solid var(--bad)}
.verdict.wait{background:var(--paper);border:1px dashed var(--line)}
.verdict strong{font-family:var(--f-display);font-weight:600;font-size:20px}
.verdict.ok strong{color:var(--good)} .verdict.no strong{color:var(--bad)}
.verdict p{margin:0;font-size:14px}
.paths{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:6px}
.paths li{font-size:14px;padding-left:18px;position:relative}
.paths li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--muted)}
.paths li.hot{font-weight:600}
.paths li.hot::before{background:var(--marigold);border-color:var(--marigold)}
.paths li em{font-style:normal;font-weight:400;color:var(--muted);display:block;font-size:13px}
.rule{font-size:12px;color:var(--muted);margin:0}
@media (prefers-reduced-motion:reduce){.fill{transition:none}}
/* Paso 2 */
#paso2{margin-top:44px;display:grid;gap:18px}
.p2-head{display:grid;gap:8px}
.p2-head h2{font-family:var(--f-display);font-weight:700;font-size:clamp(30px,5.5vw,48px);line-height:1.05;margin:0;text-wrap:balance}
.p2-head h2 span{color:var(--blue)}
.p2-head .sub{font-family:var(--f-display);font-weight:500;font-size:20px;color:var(--muted);margin:0}
.lockmsg{display:none;align-items:center;gap:10px;background:var(--sheet);border:1px dashed var(--blue);border-radius:12px;padding:12px 16px;font-size:14px}
#paso2.locked .lockmsg{display:flex}
.p2wrap{display:grid;gap:16px;transition:opacity .3s}
.stepnav{display:flex;flex-wrap:wrap;gap:8px}
.stepnav button{--s:var(--blue-soft);--s-ink:var(--blue);border:1px solid var(--line);background:var(--sheet);color:var(--ink);border-radius:999px;padding:8px 14px;font-weight:500;display:flex;gap:8px;align-items:center}
.stepnav button i{font-style:normal;font-family:var(--f-display);font-weight:600;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--s);color:var(--s-ink);font-size:13px}
.stepnav button[aria-selected="true"]{background:var(--s);border-color:var(--s);color:var(--s-ink);font-weight:600}
.stepnav button[aria-selected="true"] i{background:var(--sheet)}
.s1{--s:var(--blue-soft)!important;--s-ink:var(--blue)!important}
.s2{--s:var(--viabilidad-soft)!important;--s-ink:var(--viabilidad-ink)!important}
.s3{--s:var(--mercado-soft)!important;--s-ink:var(--mercado-ink)!important}
.s4{--s:var(--costo-soft)!important;--s-ink:var(--costo-ink)!important}
.s5{--s:var(--hl)!important;--s-ink:var(--ink)!important}
section.card[data-step="2"]{--a:var(--viabilidad);--a-soft:var(--viabilidad-soft);--a-ink:var(--viabilidad-ink)}
section.card[data-step="3"]{--a:var(--mercado);--a-soft:var(--mercado-soft);--a-ink:var(--mercado-ink)}
section.card[data-step="4"]{--a:var(--costo);--a-soft:var(--costo-soft);--a-ink:var(--costo-ink)}
section.card[data-step="5"]{--a:var(--necesidad);--a-soft:var(--necesidad-soft);--a-ink:var(--necesidad-ink)}
section.card[data-step="6"]{--a:var(--venta);--a-soft:var(--hl);--a-ink:var(--ink)}
.s6{--s:var(--necesidad-soft)!important;--s-ink:var(--necesidad-ink)!important}
.plans{display:flex;flex-wrap:wrap;gap:8px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;max-width:560px}
.plan-card{background:var(--sheet);border:1px solid var(--blue);border-radius:14px;padding:14px 16px;display:grid;gap:4px}
.plan-card h4{font-family:var(--f-display);font-weight:600;font-size:20px;margin:0;color:var(--blue)}
.plan-card p{margin:0;font-size:14px;color:var(--muted)}
.plan-card b{font-family:var(--f-display);font-weight:700;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.plan-card p.inc{color:var(--ink);font-size:14px;margin-bottom:4px}
.plan-card p.inc b{font-family:var(--f-body);font-size:14px;font-weight:600;color:var(--blue)}
.plan-card em{font-style:normal;font-size:12px;font-weight:600;background:var(--good-soft);color:var(--good);border-radius:999px;padding:2px 8px;margin-left:6px}
.rows{display:grid;gap:10px}
.row{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 44px 12px 12px;display:grid;gap:8px;grid-template-columns:repeat(4,minmax(0,1fr))}
.row.fijo{grid-template-columns:2fr 1fr}
@media (max-width:600px){.row{grid-template-columns:repeat(2,minmax(0,1fr))}.row.fijo{grid-template-columns:minmax(0,1fr)}}
.row label{display:grid;gap:4px;font-size:12px;color:var(--muted);min-width:0}
.row .w2{grid-column:span 2}
@media (max-width:600px){.row.fijo .w2{grid-column:auto}}
.row input{padding:7px 9px;background:var(--sheet)}
.del{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--sheet);color:var(--muted);line-height:1}
.del:hover{color:var(--bad);border-color:var(--bad)}
.add{justify-self:start;border:1px dashed var(--a-ink);background:transparent;color:var(--a-ink);border-radius:999px;padding:6px 14px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:14px}
.chips input:checked+label{background:var(--a);border-color:var(--a);color:var(--on-pastel);font-weight:600}
.chips input:focus-visible+label{outline:2px solid var(--a-ink);outline-offset:2px}
.stepfoot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.plano{display:grid;gap:18px}
.pl-sec{display:grid;gap:10px;border-top:1px dashed var(--line);padding-top:16px}
.pl-sec:first-child{border-top:0;padding-top:0}
.pl-sec h3{font-family:var(--f-display);font-weight:600;font-size:22px;margin:0;display:flex;gap:10px;align-items:center}
.pl-sec h3 i{width:12px;height:12px;border-radius:50%;display:block}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpis div{background:var(--paper);border-radius:10px;padding:10px 12px;display:grid;gap:2px}
.kpis span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.kpis b{font-family:var(--f-mono);font-weight:500;font-size:18px;font-variant-numeric:tabular-nums}
.tbl{overflow-x:auto}
.tbl table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}
.tbl th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:6px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:7px 8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.tbl td.n{font-family:var(--f-mono);text-align:right}
.tbl tfoot td{font-weight:600;border-bottom:0}
.stack{display:flex;height:16px;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.stack span{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted)}
.legend span{display:flex;gap:6px;align-items:center}
.legend i{width:10px;height:10px;border-radius:3px;display:block}
.tips{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14px}
.warn{background:var(--bad-soft);border:1px solid var(--bad);border-radius:10px;padding:10px 12px;font-size:14px;margin:0}
.okmsg{background:var(--good-soft);border:1px solid var(--good);border-radius:10px;padding:10px 12px;font-size:14px;margin:0}
.quote{background:var(--paper);border-radius:10px;padding:10px 12px;font-size:14px;margin:0}
.quote b{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.chain{display:flex;flex-wrap:wrap;gap:8px;align-items:center;list-style:none;padding:0;margin:0}
.chain li{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:500}
.chain li.end{background:var(--hl);border-color:var(--hl);font-family:var(--f-display);font-weight:700}
.chain .arr{border:0;background:none;padding:0;color:var(--muted)}
.verbs{font-family:var(--f-display);font-weight:600;font-size:20px;margin:0}
.verbs span{color:var(--muted);font-weight:500}
.go{color:var(--good);font-weight:600}
.concept{display:grid;gap:10px;background:var(--paper);border-radius:12px;padding:14px 16px}
.concept h3{font-family:var(--f-display);font-weight:600;font-size:20px;margin:0;color:var(--blue)}
.concept h3 span{font-family:var(--f-body);font-weight:500;font-size:14px;color:var(--muted)}
.frases{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.frases li{background:var(--sheet);border:1px solid var(--blue-soft);border-radius:10px;padding:8px 12px 8px 34px;position:relative;font-size:14px}
.frases li::before{content:"✦";position:absolute;left:12px;top:8px;color:var(--marigold)}
.concept textarea{background:var(--sheet)}
.calbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.calbar b{font-family:var(--f-display);font-weight:600;font-size:20px}
.calbar .btn{padding:6px 14px}
.cal-wrap{overflow-x:auto}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;min-width:620px}
.ch{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:4px 6px}
.cd{background:var(--paper);border-radius:8px;min-height:84px;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:0}
.cd.empty{background:transparent}
.cd.today{outline:2px solid var(--blue)}
.dn{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.cc{font-size:11px;line-height:1.25;border-radius:6px;padding:3px 5px;overflow-wrap:anywhere}
.cc.hol{background:var(--hl);font-weight:700}
.cc.prep{border:1px dashed var(--marigold);color:var(--ink)}
.cc.post{color:var(--on-pastel);font-weight:600}
.t0{background:var(--viabilidad)!important}.t1{background:var(--mercado)!important}.t2{background:var(--necesidad)!important}.t3{background:var(--venta)!important}.t4{background:var(--costo)!important}
.legend b{color:var(--ink)}
.sub4{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.genero{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:10px 14px;width:fit-content;max-width:100%}
.genero > span{font-weight:600;font-size:14px}
.genero small{color:var(--muted);font-size:12px}
.chips.gen{--a:var(--blue-soft);--a-ink:var(--blue)}
.chips.gen input:checked+label{background:var(--blue);border-color:var(--blue);color:var(--sheet)}
.send{margin-top:36px;--a:var(--blue-soft);--a-soft:var(--blue-soft);--a-ink:var(--blue)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:var(--sheet);font-weight:600}
.copied{font-size:14px;color:var(--good);align-self:center}
.resumen{min-height:180px;font-family:var(--f-mono);font-size:12px;line-height:1.5;color:var(--muted)}