/* ============================================================================
 * manual.css — Sistema de diseño del MANUAL de producto (reutilizable, 19 prods).
 * Tokens + componentes (Hero, StatCard, Mech, Comparison, Steps, Timeline,
 * BodyMap, Checklist, Workflow, Cards). Pantalla = 3 hojas A4; print = 3 págs.
 * Datos por producto: ver cada página de guía (pilotos) o BD (fuente única).
 * ==========================================================================*/
:root{
  --m-navy:#0B1F4E;--m-ink:#1B2536;--m-soft:#5A6678;--m-line:#E6E2D6;
  --m-paper:#FAF8F2;--m-card:#FCFBF7;--m-gold:#C08A2E;--m-goldbg:#F6EEDD;
  --m-teal:#2E8B86;--m-tealbg:#E0EDEC;--m-cat:var(--m-gold);
}
.m-shell{background:#ECEAE2;min-height:100vh;padding:24px 12px 60px;font-family:'Montserrat',system-ui,sans-serif;color:var(--m-ink);}
.m-bar{max-width:210mm;margin:0 auto 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.m-bar .b{display:flex;align-items:center;gap:9px;}
.m-bar .b img{height:30px;}
.m-bar .b strong{font-weight:800;font-size:13px;letter-spacing:1px;color:var(--m-navy);line-height:.95;}
.m-bar .b small{display:block;font-size:6px;letter-spacing:2px;color:var(--m-gold);}
.m-bar a.dl{background:var(--m-navy);color:#fff;text-decoration:none;font-size:12px;font-weight:700;padding:9px 16px;border-radius:99px;}
.m-bar a.back{color:var(--m-soft);text-decoration:none;font-size:12px;font-weight:600;}
.serif{font-family:'Cormorant Garamond',Georgia,serif;}.mono{font-family:'JetBrains Mono',monospace;}

.page{width:210mm;min-height:297mm;margin:0 auto 22px;padding:13mm 13mm 18mm;position:relative;background:var(--m-paper);box-shadow:0 10px 40px rgba(11,31,78,.12);overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.top{display:flex;justify-content:space-between;align-items:flex-start;}
.brand{display:flex;align-items:center;gap:10px;}.brand img{height:40px;}
.brand .bt strong{display:block;font-weight:800;font-size:16px;letter-spacing:1px;color:var(--m-navy);line-height:.95;}
.brand .bt small{display:block;font-size:6.5px;letter-spacing:3px;color:var(--m-gold);font-weight:600;margin-top:2px;}
.pageno{background:var(--m-navy);color:#fff;border-radius:99px;font-size:8.5px;font-weight:700;letter-spacing:1px;padding:6px 14px;}
.phead{display:flex;align-items:center;gap:12px;}
.phead .pn{background:var(--m-navy);color:#fff;font-family:'Cormorant Garamond',serif;font-weight:700;font-size:22px;width:42px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;}
.phead h2{font-size:22px;font-weight:800;color:var(--m-navy);letter-spacing:.5px;line-height:1;}
.phead p{font-size:9.5px;color:var(--m-soft);margin-top:2px;}

/* HERO */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:10px;margin-top:8px;}
.hero h1{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:60px;color:var(--m-navy);line-height:.9;letter-spacing:-1px;}
.hero .tri{font-weight:700;font-size:16px;color:var(--m-gold);margin-top:8px;line-height:1.25;}
.hero .intro{font-size:11px;color:var(--m-soft);line-height:1.5;margin-top:10px;}
.pills{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.pill{display:flex;align-items:center;gap:7px;border:1px solid var(--m-line);background:#fff;border-radius:10px;padding:9px 14px;font-size:9.5px;font-weight:600;}
.pill svg{width:16px;height:16px;color:var(--m-navy);}
.heroimg{display:flex;align-items:center;justify-content:center;position:relative;}
.heroimg img{max-height:180px;filter:drop-shadow(0 16px 26px rgba(11,31,78,.18));z-index:1;}
.heroimg .dna{position:absolute;right:-4mm;top:0;width:110px;height:190px;opacity:.5;}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(3,1fr) .92fr;gap:9px;margin-top:14px;}
.stat{background:var(--m-card);border:1px solid var(--m-line);border-radius:13px;padding:11px 12px;}
.stat .ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:7px;}
.stat .ic svg{width:19px;height:19px;color:#fff;}
.ic.navy{background:var(--m-navy);}.ic.teal{background:var(--m-teal);}.ic.gold{background:var(--m-gold);}
.stat .big{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:29px;line-height:1;}
.stat .big small{font-size:14px;}
.stat .lbl{font-size:8px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;margin-top:4px;line-height:1.25;}
.stat .sub{font-size:7.5px;color:var(--m-soft);margin-top:3px;line-height:1.3;}
.stat.ruo{background:transparent;border:none;}
.stat.ruo .ic{background:#EEF1F6;}.stat.ruo .ic svg{color:var(--m-navy);}
.stat.ruo p{font-size:8px;color:var(--m-soft);line-height:1.45;margin-top:4px;}

/* MECH */
.sectag{text-align:center;font-family:'Cormorant Garamond',serif;font-weight:700;font-size:16px;color:var(--m-navy);}
.sectag.l{text-align:left;}
.seclead{text-align:center;font-size:8.5px;color:var(--m-soft);margin:2px 0 10px;}
.mech-wrap{margin-top:13px;display:grid;grid-template-columns:1.55fr .9fr;gap:14px;}
.mech{display:flex;align-items:flex-start;gap:4px;}
.mcard{flex:1;text-align:center;}
.hex{width:56px;height:62px;margin:0 auto 6px;}.hex svg{width:100%;height:100%;}
.mcard h4{font-size:11px;font-weight:700;}.mcard p{font-size:7.8px;color:var(--m-soft);line-height:1.35;margin-top:3px;}
.arr{align-self:center;color:var(--m-navy);font-size:15px;padding-top:18px;}
.result{text-align:center;}
.rcircle{width:92px;height:92px;margin:0 auto 6px;border:1px solid var(--m-line);border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;}
.rtag{font-family:'JetBrains Mono';font-size:8px;letter-spacing:1.5px;color:var(--m-gold);font-weight:700;margin-bottom:6px;}
.result p{font-size:10px;font-weight:700;color:var(--m-navy);line-height:1.3;}

/* BENEFITS + COMPARISON */
.low{display:grid;grid-template-columns:1fr 1.25fr;gap:16px;margin-top:13px;}
.benlist{list-style:none;}
.benlist li{display:flex;gap:8px;align-items:flex-start;font-size:9.5px;color:var(--m-soft);margin-bottom:7px;line-height:1.3;}
.benlist svg{width:15px;height:15px;color:var(--m-teal);flex:none;margin-top:1px;}
.oneline{background:var(--m-goldbg);border:1px solid #E7D3A6;border-radius:11px;padding:11px 13px;margin-top:6px;}
.oneline h4{font-size:9px;font-weight:800;color:var(--m-gold);letter-spacing:.5px;margin-bottom:4px;}
.oneline p{font-size:8.3px;color:var(--m-soft);line-height:1.45;}
.cmp h3{text-align:center;font-size:11px;font-weight:800;letter-spacing:.3px;margin-bottom:8px;}
table.ct{width:100%;border-collapse:collapse;font-size:8px;}
.ct th{padding:6px 5px;font-size:7.5px;font-weight:700;color:var(--m-soft);text-align:center;border-bottom:1px solid var(--m-line);}
.ct th.reta{background:var(--m-navy);color:#fff;border-radius:7px 7px 0 0;}
.ct td{padding:6px 5px;text-align:center;border-bottom:1px solid var(--m-line);color:var(--m-soft);vertical-align:middle;}
.ct td.lab{text-align:left;font-weight:700;color:var(--m-ink);font-size:7.8px;}
.ct td.reta{background:#FBF6EA;color:var(--m-gold);font-weight:800;font-size:9px;}
.stars{color:var(--m-gold);letter-spacing:1px;font-size:9px;}.stars .dim{color:#C9C6BC;}
.bar{height:5px;border-radius:3px;background:#E4E0D4;margin-top:3px;overflow:hidden;}.bar i{display:block;height:100%;border-radius:3px;}

/* STEPS (reconstitución) */
.steps6{display:flex;gap:3px;align-items:flex-start;margin-top:8px;}
.st{flex:1;text-align:center;}
.st .n{width:26px;height:26px;border-radius:50%;background:var(--m-navy);color:#fff;font-family:'JetBrains Mono';font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;}
.st p{font-size:7.5px;color:var(--m-soft);line-height:1.3;padding:0 2px;}
.stsep{color:var(--m-line);align-self:center;padding-top:8px;font-size:14px;}
.twocol{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;margin-top:12px;align-items:start;}
table.kv{width:100%;border-collapse:collapse;font-size:8.5px;}
.kv td{padding:6px 8px;border-bottom:1px solid var(--m-line);}
.kv td:first-child{color:var(--m-soft);}.kv td:last-child{font-weight:700;text-align:right;color:var(--m-ink);}
.kv tr:first-child td{background:var(--m-navy);color:#fff;font-weight:700;border:none;}
.conc{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--m-card);border:1px solid var(--m-line);border-radius:11px;padding:12px;}
.conc .v{text-align:center;font-size:8px;color:var(--m-soft);}
.conc .v b{display:block;font-size:13px;color:var(--m-navy);font-family:'Cormorant Garamond';}
.conc .op{font-size:18px;color:var(--m-gold);font-weight:700;}
.note{font-size:8px;color:var(--m-soft);margin-top:8px;background:var(--m-goldbg);border:1px solid #E7D3A6;border-radius:9px;padding:9px 11px;}

/* TIMELINE titulación */
.tline{margin-top:8px;}
.tl2{display:flex;align-items:center;gap:11px;padding:7px 0;border-bottom:1px solid var(--m-line);}
.tl2 .dot{width:13px;height:13px;border-radius:50%;flex:none;border:3px solid var(--m-gold);}
.tl2 .wk{flex:1;font-size:9px;}.tl2 .wk b{display:block;color:var(--m-ink);font-size:10px;}.tl2 .wk span{color:var(--m-soft);font-size:8px;letter-spacing:.5px;}
.tl2 .dose{font-family:'Cormorant Garamond';font-weight:700;font-size:20px;color:var(--m-gold);}
.gold-card{background:var(--m-goldbg);border:1px solid #E7D3A6;border-radius:11px;padding:11px 13px;margin-top:10px;}
.gold-card h4{font-size:9.5px;font-weight:800;color:var(--m-gold);margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.gold-card p{font-size:8.5px;color:var(--m-soft);line-height:1.45;}

/* BODY MAP */
.bodywrap{display:flex;gap:12px;align-items:center;}
.bodywrap svg{width:78px;flex:none;}
.sitelist{font-size:9px;}
.sitelist .s{display:flex;align-items:center;gap:7px;margin-bottom:8px;}
.sitelist .s i{width:11px;height:11px;border-radius:50%;flex:none;}
.sitelist .s b{font-size:10px;}.sitelist .s span{color:var(--m-soft);font-size:8px;}
.qsteps{list-style:none;counter-reset:q;}
.qsteps li{counter-increment:q;position:relative;padding:5px 0 5px 24px;font-size:8.5px;color:var(--m-soft);border-bottom:1px solid var(--m-line);line-height:1.35;}
.qsteps li::before{content:counter(q);position:absolute;left:0;top:5px;width:16px;height:16px;background:var(--m-gold);color:#fff;border-radius:50%;font-size:8px;font-weight:700;font-family:'JetBrains Mono';display:flex;align-items:center;justify-content:center;}
.cal{display:flex;gap:5px;margin:6px 0 8px;}
.cal span{width:21px;height:21px;border-radius:50%;border:1px solid var(--m-line);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:var(--m-soft);}
.cal span.on{background:var(--m-gold);color:#fff;border-color:var(--m-gold);}
.minirow{display:flex;gap:8px;align-items:flex-start;font-size:8.5px;color:var(--m-soft);margin-bottom:6px;line-height:1.35;}
.minirow b{color:var(--m-ink);}
.minirow svg{width:14px;height:14px;flex:none;color:var(--m-gold);margin-top:1px;}

/* CHECKLIST grid */
.checks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px;}
.chk{background:var(--m-card);border:1px solid var(--m-line);border-radius:10px;padding:9px;position:relative;text-align:center;}
.chk svg.ico{width:24px;height:24px;color:var(--m-navy);margin-bottom:4px;}
.chk b{display:block;font-size:8px;color:var(--m-ink);line-height:1.25;}
.chk .ok{position:absolute;top:6px;right:6px;width:14px;height:14px;background:var(--m-teal);border-radius:50%;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;}

/* FLOW circles */
.flow{display:flex;align-items:flex-start;gap:2px;margin-top:8px;}
.fnode{flex:1;text-align:center;}
.fnode .c{width:42px;height:42px;border:1.5px solid var(--m-navy);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 5px;color:var(--m-navy);}
.fnode .c svg{width:20px;height:20px;}
.fnode b{display:block;font-size:8.5px;color:var(--m-ink);}
.fnode span{font-size:7.3px;color:var(--m-soft);line-height:1.25;display:block;margin-top:2px;}
.farr{align-self:center;color:var(--m-gold);padding-top:14px;font-size:12px;}

/* side-effect cards */
.efx{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px;}
.efc{background:var(--m-card);border:1px solid var(--m-line);border-radius:10px;padding:10px;text-align:center;}
.efc .ic{width:34px;height:34px;border-radius:50%;background:var(--m-tealbg);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;}
.efc .ic svg{width:18px;height:18px;color:var(--m-teal);}
.efc h5{font-size:8.5px;font-weight:700;color:var(--m-ink);line-height:1.2;}
.efc .qh{font-size:7.5px;color:var(--m-gold);font-weight:700;margin-top:5px;}
.efc p{font-size:7.3px;color:var(--m-soft);line-height:1.3;margin-top:2px;}
.consult{background:#EAF0F8;border:1px solid #C9D9EE;border-radius:11px;padding:11px 13px;}
.consult h4{font-size:9.5px;font-weight:800;color:var(--m-navy);margin-bottom:6px;}
.consult ul{margin:0 0 0 15px;}.consult li{font-size:8.3px;color:var(--m-soft);margin-bottom:3px;}

/* monitor + habits */
.grid8{display:grid;grid-template-columns:repeat(4,1fr);gap:9px 8px;margin-top:8px;}
.mon{text-align:center;}.mon .ic{width:34px;height:34px;border:1px solid var(--m-line);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 5px;color:var(--m-navy);}
.mon .ic svg{width:17px;height:17px;}.mon b{font-size:8px;color:var(--m-ink);line-height:1.2;display:block;}
.habits{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px;}
.hab{text-align:center;}.hab .ic{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 5px;}
.hab .ic svg{width:21px;height:21px;color:#fff;}
.hab b{font-size:8.5px;display:block;}.hab span{font-size:7.3px;color:var(--m-soft);line-height:1.25;display:block;margin-top:2px;}
.quote{text-align:center;font-family:'Cormorant Garamond';font-style:italic;font-size:13px;color:var(--m-soft);margin:12px 0;}
.whatif .minirow{justify-content:space-between;}
.remember{background:var(--m-card);border:1px solid var(--m-line);border-radius:11px;padding:11px 13px;margin-top:8px;}
.remember p{font-size:8.5px;color:var(--m-soft);line-height:1.45;}
.bes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px;}
.be{text-align:center;}.be svg{width:22px;height:22px;color:var(--m-navy);}.be b{display:block;font-size:8.5px;margin-top:4px;}.be span{font-size:7.3px;color:var(--m-soft);line-height:1.25;}

/* tracker block */
.tracker{display:grid;grid-template-columns:.8fr 1.2fr .7fr;gap:12px;background:var(--m-card);border:1px solid var(--m-line);border-radius:12px;padding:13px;align-items:center;margin-top:8px;}
.phone{background:var(--m-navy);border-radius:16px;padding:12px;color:#fff;text-align:center;}
.phone .pk{font-size:7px;color:#9FB0D6;letter-spacing:1px;}.phone .pw{font-family:'Cormorant Garamond';font-size:26px;font-weight:700;}
.phone svg{width:100%;height:34px;margin-top:4px;}
.tfeat{font-size:8.5px;}.tfeat .f{display:flex;gap:7px;margin-bottom:5px;color:var(--m-soft);}.tfeat .f b{color:var(--m-ink);}
.tfeat svg{width:14px;height:14px;color:var(--m-gold);flex:none;}
.qr{text-align:center;}.qr .box{width:74px;height:74px;margin:0 auto;border:1px solid var(--m-line);border-radius:9px;display:flex;align-items:center;justify-content:center;}
.qr small{display:block;font-size:7px;color:var(--m-soft);margin-top:5px;letter-spacing:1px;}

/* strips + footer */
.strip{position:absolute;left:13mm;right:13mm;bottom:11mm;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;border-top:1px solid var(--m-line);padding-top:9px;}
.strip .it{display:flex;gap:7px;align-items:flex-start;}
.strip svg{width:16px;height:16px;color:var(--m-navy);flex:none;margin-top:1px;}
.strip b{display:block;font-size:8px;color:var(--m-ink);font-weight:700;}.strip span{font-size:7.3px;color:var(--m-soft);}
.foot{position:absolute;left:0;right:0;bottom:0;height:7mm;background:var(--m-navy);color:#fff;display:flex;align-items:center;justify-content:center;gap:16px;font-family:'JetBrains Mono';font-size:7px;letter-spacing:1px;}
.foot .d{opacity:.5;}
.sectit{font-weight:800;font-size:11px;color:var(--m-navy);letter-spacing:.3px;margin:13px 0 2px;}
.sectit .muted{color:var(--m-soft);font-weight:600;font-size:9px;}

@media print{
  .m-shell{background:#fff;padding:0;}
  .m-bar{display:none;}
  .page{margin:0;box-shadow:none;page-break-after:always;}
  .page:last-child{page-break-after:auto;}
  @page{size:A4;margin:0;}
}
@media(max-width:780px){
  .page{width:100%;min-height:0;padding:18px 14px 70px;}
  .hero,.mech-wrap,.low,.twocol,.tracker{grid-template-columns:1fr;}
  .stats,.checks,.efx,.grid8,.habits{grid-template-columns:1fr 1fr;}
  .steps6,.flow,.mech{flex-wrap:wrap;}.hero h1{font-size:44px;}
}