:root{
 --bg:#ffffff; --surface:#f5f7fe; --surface2:#eef1fb; --ink:#0f172a; --muted:#5b6478;
 --blue:#2151e0; --blue-soft:#e6ecfd; --lilac:#7c6cf0; --lilac-soft:#efecfe;
 --green:#0fa580; --green-soft:#e2f7f0; --border:#e4e8f4; --code-bg:#0e1630; --code-ink:#c9d6ff;
 --shadow:0 10px 30px rgba(23,42,110,.08); --r:14px;
}
[data-theme="dark"]{
 --bg:#0c1222; --surface:#131b31; --surface2:#1a2340; --ink:#edf0fa; --muted:#9aa3bc;
 --blue:#6f8dff; --blue-soft:#1b2648; --lilac:#a79bff; --lilac-soft:#241f47;
 --green:#35d3a8; --green-soft:#0e2b28; --border:#242e50; --code-bg:#0a1024; --code-ink:#c9d6ff;
 --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.7 'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
h1,h2,h3,h4{font-family:'Sora',sans-serif;line-height:1.25;letter-spacing:-.02em}
h1{font-size:clamp(1.7rem,4.5vw,2.6rem);margin:.4em 0}
h2{font-size:clamp(1.3rem,3vw,1.7rem);margin:1.8em 0 .6em}
h3{font-size:1.15rem;margin:1.4em 0 .5em}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:780px}
/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:18px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-family:'Sora';font-weight:700;font-size:1.05rem;color:var(--ink)}
.logo:hover{text-decoration:none}
.logo svg{flex:none}
.nav nav{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:.94rem}
.nav nav a{color:var(--ink);opacity:.85}
.nav nav a:hover{opacity:1;color:var(--blue);text-decoration:none}
#themeBtn{background:var(--surface);border:1px solid var(--border);color:var(--ink);border-radius:99px;width:38px;height:38px;cursor:pointer;font-size:1rem;display:grid;place-items:center}
#menuBtn{display:none;background:none;border:none;color:var(--ink);font-size:1.5rem;cursor:pointer}
@media(max-width:760px){
 .nav nav{position:fixed;inset:64px 0 auto 0;background:var(--bg);flex-direction:column;padding:18px;border-bottom:1px solid var(--border);display:none}
 .nav nav.open{display:flex}
 #menuBtn{display:block;margin-left:auto}
 .nav #themeBtn{margin-left:0}
}
/* ---------- hero blueprint ---------- */
.hero{position:relative;padding:70px 0 60px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:44px 44px;opacity:.5;mask-image:radial-gradient(ellipse 90% 90% at 50% 0%,#000 30%,transparent 75%)}
.hero .wrap{position:relative}
.kicker{display:inline-block;font-family:'IBM Plex Mono';font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);background:var(--blue-soft);padding:6px 12px;border-radius:99px;margin-bottom:14px}
.hero p.lead{font-size:1.15rem;color:var(--muted);max-width:640px}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-block;padding:13px 22px;border-radius:12px;font-weight:600;font-size:.98rem;border:1px solid transparent}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:hover{filter:brightness(1.08);text-decoration:none}
.btn.ghost{border-color:var(--border);color:var(--ink);background:var(--surface)}
.btn.ghost:hover{border-color:var(--blue);text-decoration:none}
/* ---------- cards ---------- */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.g2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;transition:transform .15s,box-shadow .15s;display:block;color:var(--ink)}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none;border-color:var(--blue)}
.card h3{margin:.4em 0 .3em}
.card p{color:var(--muted);font-size:.93rem;margin:.2em 0}
.badge{display:inline-block;font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.badge.blue{background:var(--blue-soft);color:var(--blue)}
.badge.lilac{background:var(--lilac-soft);color:var(--lilac)}
.badge.coral{background:rgba(239,106,90,.14);color:#d14b3b;border:1px solid rgba(239,106,90,.3)}
.badge.green{background:var(--green-soft);color:var(--green)}
.meta{font-size:.83rem;color:var(--muted);font-family:'IBM Plex Mono'}
section.block{padding:52px 0}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:22px}
.sechead a{font-size:.9rem}
/* ---------- article ---------- */
.crumb{font-size:.85rem;color:var(--muted);margin:26px 0 8px}
article .lead{font-size:1.12rem;color:var(--muted)}
.quick{border-left:4px solid var(--green);background:var(--green-soft);padding:18px 20px;border-radius:0 12px 12px 0;margin:26px 0}
.quick strong{font-family:'Sora';display:block;margin-bottom:6px;color:var(--green)}
.formula{background:var(--code-bg);color:var(--code-ink);font-family:'IBM Plex Mono';font-size:.95rem;line-height:1.8;padding:20px 22px;border-radius:12px;overflow-x:auto;margin:20px 0;position:relative}
.formula::before{content:"ƒ fórmula";position:absolute;top:10px;right:14px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#5f74c4}
.check{list-style:none;padding:0;margin:18px 0}
.check li{padding:10px 0 10px 34px;position:relative;border-bottom:1px dashed var(--border)}
.check li::before{content:"✓";position:absolute;left:4px;top:9px;width:22px;height:22px;border-radius:7px;background:var(--green-soft);color:var(--green);font-weight:700;display:grid;place-items:center;font-size:.8rem}
table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.92rem}
th{background:var(--surface2);font-family:'Sora';font-size:.85rem;text-align:left}
th,td{padding:11px 13px;border:1px solid var(--border);vertical-align:top}
tr:nth-child(even) td{background:var(--surface)}
.steps{counter-reset:s;list-style:none;padding:0;margin:18px 0}
.steps li{counter-increment:s;padding:12px 0 12px 46px;position:relative;border-bottom:1px dashed var(--border)}
.steps li::before{content:counter(s);position:absolute;left:0;top:10px;width:30px;height:30px;border-radius:10px;background:var(--blue-soft);color:var(--blue);font-family:'IBM Plex Mono';font-weight:700;display:grid;place-items:center;font-size:.85rem}
details{border:1px solid var(--border);border-radius:12px;margin:10px 0;background:var(--surface)}
details summary{padding:14px 18px;cursor:pointer;font-weight:600;font-family:'Sora';font-size:.97rem}
details div{padding:0 18px 14px;color:var(--muted)}
.note{font-size:.83rem;color:var(--muted);border-top:1px solid var(--border);margin-top:34px;padding-top:14px}
.adslot{margin:30px 0;min-height:90px;display:grid;place-items:center;background:var(--surface);border:1px dashed var(--border);border-radius:12px;color:var(--muted);font-size:.75rem;font-family:'IBM Plex Mono';letter-spacing:.08em}
/* ---------- calculadoras ---------- */
.calc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:26px;margin:26px 0}
.calc label{display:block;font-weight:600;font-size:.9rem;margin:14px 0 6px;font-family:'Sora'}
.calc input,.calc select{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-family:'IBM Plex Mono'}
.calc input:focus,.calc select:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.calc .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.calc .row{grid-template-columns:1fr}}
.calc button{margin-top:20px;width:100%;padding:14px;border:none;border-radius:12px;background:var(--blue);color:#fff;font:600 1rem 'Sora';cursor:pointer}
.calc button:hover{filter:brightness(1.08)}
.result{margin-top:22px;display:none}
.result.show{display:block}
.result .big{font-family:'IBM Plex Mono';font-size:2rem;font-weight:700;color:var(--green)}
.result .rows{margin-top:10px}
.result .rows div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--border);font-size:.94rem}
.result .rows div span:last-child{font-family:'IBM Plex Mono';font-weight:600}
/* ---------- newsletter / forms ---------- */
.cta{background:linear-gradient(120deg,var(--blue-soft),var(--lilac-soft));border:1px solid var(--border);border-radius:var(--r);padding:30px;margin:44px 0;text-align:center}
.cta h3{margin-top:0}
.cta form{display:flex;gap:10px;max-width:460px;margin:16px auto 0;flex-wrap:wrap}
.cta input{flex:1;min-width:200px;padding:13px 16px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit}
.cta button{padding:13px 20px;border:none;border-radius:12px;background:var(--blue);color:#fff;font-weight:600;cursor:pointer}
.formmsg{font-size:.88rem;margin-top:10px;color:var(--green);display:none}
/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--border);margin-top:60px;padding:40px 0;background:var(--surface)}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;font-size:.9rem}
@media(max-width:700px){footer .cols{grid-template-columns:1fr}}
footer h4{margin:0 0 10px}
footer a{display:block;color:var(--muted);padding:3px 0}
footer .fin{margin-top:26px;padding-top:16px;border-top:1px solid var(--border);font-size:.8rem;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

.logo img{display:block;height:46px;width:auto}
.logo .logo-dark{display:none}
[data-theme="dark"] .logo .logo-light{display:none}
[data-theme="dark"] .logo .logo-dark{display:block}
nav a.yt-link{color:var(--ink);font-weight:700;display:inline-flex;align-items:center;gap:6px}
nav a.yt-link:hover{opacity:.85}
nav a.yt-link svg{flex:none}

/* ── Estabilidad móvil ── */
html,body{overflow-x:hidden;max-width:100%}
img,svg,video,iframe{max-width:100%;height:auto}
main table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border-collapse:collapse}
main table td,main table th{min-width:110px;overflow-wrap:break-word}
pre,code,.formula-mini,.fm-f{overflow-x:auto;max-width:100%;overflow-wrap:anywhere;-webkit-overflow-scrolling:touch}
.card,.calc,.cta{overflow-wrap:break-word;word-break:break-word;min-width:0}
.grid{min-width:0}
.grid>*{min-width:0}
a{overflow-wrap:anywhere}
input,select,textarea,button{max-width:100%;font-size:16px}
@media(max-width:720px){
 h1{font-size:1.65rem;line-height:1.25}
 h2{font-size:1.3rem}
 .wrap{padding-left:16px;padding-right:16px}
 main table{font-size:.88rem}
 pre{font-size:.8rem}
 .btnrow{flex-wrap:wrap}
 .btnrow .btn{flex:1 1 auto;text-align:center}
 #topBtn{bottom:16px;right:16px;width:42px;height:42px}
}

/* v21: compartir + CTA + frase */
.sharebar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:26px 0;padding:16px;border:1px dashed var(--border);border-radius:14px;background:var(--surface)}
.sharebar b{font-family:'Sora';font-size:.92rem;margin-right:4px}
.sharebar a,.sharebar button{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:99px;font-size:.85rem;font-weight:600;border:1px solid var(--border);background:var(--bg);color:var(--ink);cursor:pointer;font-family:'Inter'}
.sharebar a:hover,.sharebar button:hover{border-color:var(--blue);text-decoration:none}
.sharebar .wa{color:#128c4b}.sharebar .li{color:#0a66c2}.sharebar .fb{color:#1877f2}
.ctafinal{border:2px solid var(--blue);border-radius:var(--r);padding:24px;margin:30px 0;background:var(--blue-soft)}
.ctafinal h3{margin:0 0 8px}
.ctafinal p{margin:0 0 14px;color:var(--muted)}
.quoteband{text-align:center;padding:34px 20px;margin:10px 0}
.quoteband p{font-family:'Sora';font-weight:700;font-size:clamp(1.15rem,3vw,1.6rem);max-width:760px;margin:0 auto 8px;color:var(--ink)}
.quoteband span{color:var(--muted);font-size:.9rem;font-family:'IBM Plex Mono'}
.footquote{text-align:center;color:var(--muted);font-style:italic;font-size:.92rem;padding:14px 16px 0}
.matlist{list-style:none;padding:0;margin:14px 0}
.matlist li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed var(--border)}
.matlist input[type=checkbox]{width:20px;height:20px;margin-top:2px;accent-color:var(--blue);flex:none}
@media print{.site,header,footer,.sharebar,.ctafinal,nav,.crumb{display:none!important}}

/* v31: subnav contextual + interlinking */
.subnav{border-bottom:1px solid var(--border);background:var(--surface)}
.sn-row{display:flex;gap:8px;align-items:center;overflow-x:auto;padding:10px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sn-row::-webkit-scrollbar{display:none}
a.sn-lbl{flex:none;font:700 .8rem 'Sora';color:var(--ink);padding:6px 10px 6px 0;white-space:nowrap;border-right:1px solid var(--border);margin-right:2px}
a.sn-lbl:hover{color:var(--blue);text-decoration:none}
a.sn-lbl.on{color:var(--blue)}
a.sn{flex:none;font:600 .78rem 'Inter';color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:99px;padding:6px 12px;white-space:nowrap}
a.sn:hover{border-color:var(--blue);text-decoration:none}
a.sn.on{background:var(--blue);border-color:var(--blue);color:#fff}
a.sn.map{color:var(--blue);border-style:dashed;background:transparent}
.tool-cta{display:flex;gap:14px;align-items:flex-start;border:2px solid var(--green);background:var(--green-soft);border-radius:14px;padding:16px 18px;margin:26px 0}
.tool-cta .tc-ic{font-size:1.5rem;flex:none;line-height:1.2}
.tool-cta b{font-family:'Sora';display:block;margin-bottom:2px}
.tool-cta p{margin:0;font-size:.93rem;color:var(--muted)}
.rel-arts{margin:30px 0}
.rel-arts h2{font-size:1.15rem;margin:0 0 14px}

/* v33: header 2 filas + barra del diplomado con gradiente ascendente */
.nav{height:60px}
.nav nav{gap:16px}
.dipbar{border-top:1px solid var(--border)}
.dipbar-row{display:flex;gap:8px;align-items:center;overflow-x:auto;padding:9px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.dipbar-row::-webkit-scrollbar{display:none}
.dipbar-row .dlbl{flex:none;font:700 .72rem 'IBM Plex Mono';letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-right:6px;white-space:nowrap}
a.dchip{--c:#2151e0;flex:none;display:inline-flex;align-items:center;gap:6px;font:600 .8rem 'Inter';white-space:nowrap;padding:6px 13px;border-radius:99px;color:var(--c);background:color-mix(in srgb,var(--c) 11%,transparent);border:1px solid color-mix(in srgb,var(--c) 32%,transparent);transition:background .15s,color .15s,transform .15s}
a.dchip:hover{background:var(--c);color:#fff;text-decoration:none;transform:translateY(-1px)}
a.dchip.on{background:var(--c);color:#fff}
[data-theme="dark"] a.dchip{background:color-mix(in srgb,var(--c) 18%,transparent)}
[data-theme="dark"] a.dchip:hover,[data-theme="dark"] a.dchip.on{background:var(--c);color:#fff}
.d1{--c:#2151e0}.d2{--c:#4f46e5}.d3{--c:#7c6cf0}.d4{--c:#9d4fe0}.d5{--c:#c23fc7}.d6{--c:#d63d92}
.d7{--c:#e05348}.d8{--c:#e2701f}.d9{--c:#a86e00}.d10{--c:#3f8a0b}.d11{--c:#0fa580}.d12{--c:#0b7f9e}
[data-theme="dark"] .d9{--c:#e8a63a}[data-theme="dark"] .d10{--c:#7cc24a}
@media(max-width:760px){.nav{height:58px}.dipbar-row{padding:8px 0}}

/* v34: módulos del diplomado con código de color + redes */
.mod{--c:#2151e0;background:color-mix(in srgb,var(--c) 7%,var(--bg));border-color:color-mix(in srgb,var(--c) 26%,transparent);transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}
.mod:hover{background:color-mix(in srgb,var(--c) 15%,var(--bg));border-color:var(--c);transform:translateY(-3px);box-shadow:0 12px 30px color-mix(in srgb,var(--c) 22%,transparent)}
.mod::before{color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent)}
.mod::after{color:var(--c);opacity:.10}
.mod li a{color:var(--c)}
.mod .fmts span{border-color:color-mix(in srgb,var(--c) 30%,transparent);color:color-mix(in srgb,var(--c) 78%,var(--ink))}
.m1{--c:#2151e0}.m2{--c:#7c6cf0}.m3{--c:#c23fc7}.m4{--c:#e05348}.m5{--c:#a86e00}.m6{--c:#0fa580}
[data-theme="dark"] .m5{--c:#e8a63a}
[data-theme="dark"] .mod{background:color-mix(in srgb,var(--c) 10%,var(--bg))}
[data-theme="dark"] .mod:hover{background:color-mix(in srgb,var(--c) 18%,var(--bg))}
.socialrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0 4px}
.socialrow a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;border:1px solid var(--border);background:var(--bg);color:var(--ink);font:600 .85rem 'Inter'}
.socialrow a:hover{text-decoration:none;border-color:var(--blue);transform:translateY(-1px)}
.socialrow svg{flex:none}

/* v35: burbuja de chat cotizador */
#deChatBtn{position:fixed;bottom:20px;right:20px;width:58px;height:58px;border-radius:50%;border:none;background:var(--blue);color:#fff;font-size:1.55rem;cursor:pointer;box-shadow:0 10px 28px rgba(33,81,224,.35);z-index:90;display:grid;place-items:center;transition:transform .15s}
#deChatBtn:hover{transform:scale(1.07)}
#deChatBtn .cerrar{display:none}
#deChatBtn.open .abrir{display:none}
#deChatBtn.open .cerrar{display:block}
#deChatPanel{position:fixed;bottom:90px;right:20px;width:min(360px,calc(100vw - 24px));max-height:min(520px,calc(100vh - 120px));background:var(--bg);border:1px solid var(--border);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.22);z-index:90;display:none;flex-direction:column;overflow:hidden}
#deChatPanel.open{display:flex}
.dechat-head{background:var(--blue);color:#fff;padding:14px 18px;font:700 .95rem 'Sora';display:flex;align-items:center;gap:10px}
.dechat-head span{font:400 .74rem 'Inter';opacity:.85;display:block}
.dechat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:9px;background:var(--surface)}
.dechat-log .b{padding:10px 14px;border-radius:14px;max-width:86%;font-size:.92rem;line-height:1.45}
.dechat-log .bot{align-self:flex-start;background:var(--bg);border:1px solid var(--border);color:var(--ink)}
.dechat-log .yo{align-self:flex-end;background:var(--blue);color:#fff}
.dechat-opts{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 10px;background:var(--surface)}
.dechat-opts button{font:600 .82rem 'Inter';padding:8px 13px;border-radius:99px;border:1px solid var(--blue);background:var(--bg);color:var(--blue);cursor:pointer}
.dechat-opts button:hover{background:var(--blue);color:#fff}
.dechat-in{display:none;gap:8px;padding:10px 14px;border-top:1px solid var(--border);background:var(--bg)}
.dechat-in.show{display:flex}
.dechat-in input{flex:1;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;min-width:0}
.dechat-in input:focus{outline:2px solid var(--blue)}
.dechat-in button{padding:11px 15px;border:none;border-radius:10px;background:var(--blue);color:#fff;font-weight:700;cursor:pointer}
#topBtn{bottom:90px!important}
@media(max-width:480px){#deChatPanel{right:12px;bottom:84px}}

/* v36: menús desplegables en la navegación */
.dd{position:relative;display:inline-flex}
.dd>a::after{content:" ▾";font-size:.7em;opacity:.7}
.ddm{position:absolute;top:100%;left:0;min-width:240px;max-height:420px;overflow-y:auto;background:var(--bg);border:1px solid var(--border);border-top:3px solid var(--c,var(--blue));border-radius:0 0 12px 12px;box-shadow:0 16px 40px rgba(0,0,0,.16);padding:8px;display:none;flex-direction:column;z-index:95}
.dd:hover>.ddm,.dd:focus-within>.ddm{display:flex}
.ddm a{display:block;padding:8px 12px;border-radius:8px;font:600 .84rem 'Inter';color:var(--ink);white-space:nowrap}
.ddm a:hover{background:color-mix(in srgb,var(--c,var(--blue)) 10%,transparent);color:var(--c,var(--blue));text-decoration:none}
.ddm a.todo{color:var(--c,var(--blue));border-bottom:1px dashed var(--border);border-radius:8px 8px 0 0;margin-bottom:4px}
.ddm.right{left:auto;right:0}
@media(min-width:761px){
 .dipbar-row{flex-wrap:wrap;overflow:visible}
 .nav nav .dd{position:relative}
}
@media(max-width:760px){
 .ddm{display:none!important}
 .dd>a::after{content:""}
}

/* ============ v41: CÓDIGO DE COLOR SEMÁNTICO ============
   La lógica: cada color = una familia del diplomado
   🔵 azul    #2151e0  Idea y validación   (Ideador, Modelos)
   🟣 lila    #7c6cf0  Precios y números   (Precios, Indicadores)
   🩷 magenta #c23fc7  Formalización y SAT (Legal, Impuestos)
   🟠 coral   #e05348  Operación diaria    (Nómina, ERP, CRM, Logística, Dinámicas)
   🟡 ámbar   #a86e00  Dinero              (Financiamiento, Tarjetas, Ahorro)
   🟢 verde   #0fa580  Crecer e innovar    (Transf. digital, Innovación, Claude, Tendencias, Pequeña/Mediana)
   🔷 teal    #0b7f9e  Transversal         (Herramientas, Descargables, Interactivos)
*/
:root{--fam-idea:#2151e0;--fam-num:#7c6cf0;--fam-legal:#c23fc7;--fam-oper:#e05348;--fam-dinero:#a86e00;--fam-crecer:#0fa580;--fam-util:#0b7f9e}
[data-theme="dark"]{--fam-dinero:#e8a63a}
/* dipbar re-mapeada a familias (antes: gradiente posicional) */
.d1{--c:var(--fam-idea)}   /* Ideador */
.d2{--c:var(--fam-num)}    /* Precios */
.d3{--c:var(--fam-util)}   /* Herramientas */
.d4{--c:var(--fam-util)}   /* Descargables */
.d5{--c:var(--fam-num)}    /* Indicadores */
.d6{--c:var(--fam-oper)}   /* Dinámicas */
.d7{--c:var(--fam-crecer)} /* Transf. digital */
.d8{--c:var(--fam-crecer)} /* Innovación */
.d9{--c:var(--fam-dinero)} /* Ahorro */
.d10{--c:var(--fam-crecer)}/* Tendencias */
.d11{--c:var(--fam-crecer)}/* Claude */
.d12{--c:var(--fam-idea)}  /* Modelos */
/* panel de dolores re-mapeado al color de su destino */
.p1{--c:var(--fam-num)}    /* cobrar → precios */
.p2{--c:var(--fam-legal)}  /* SAT */
.p3{--c:var(--fam-util)}   /* flujo → herramienta */
.p4{--c:var(--fam-idea)}   /* idea → ideador */
.p5{--c:var(--fam-dinero)} /* dinero → financiamiento */
.p6{--c:var(--fam-crecer)} /* crecer → transf digital */
/* módulos del home ya alineados: m1..m6 = idea, num, legal, oper, dinero, crecer */
.m1{--c:var(--fam-idea)}.m2{--c:var(--fam-num)}.m3{--c:var(--fam-legal)}.m4{--c:var(--fam-oper)}.m5{--c:var(--fam-dinero)}.m6{--c:var(--fam-crecer)}
/* categorías del home: borde izquierdo en el color de su familia */
.cat{border-left:4px solid var(--c,var(--border))}
.cat.f-idea{--c:var(--fam-idea)}.cat.f-num{--c:var(--fam-num)}.cat.f-legal{--c:var(--fam-legal)}
.cat.f-oper{--c:var(--fam-oper)}.cat.f-dinero{--c:var(--fam-dinero)}.cat.f-crecer{--c:var(--fam-crecer)}
/* familia por página: chip activo de la subnav y kicker toman el color de la sección */
body[data-fam] a.sn.on{background:var(--famc);border-color:var(--famc)}
body[data-fam] a.sn-lbl.on,body[data-fam] a.sn:hover{color:var(--famc)}
body[data-fam] a.sn:hover{border-color:var(--famc);background:transparent}
body[data-fam] .kicker{color:var(--famc);background:color-mix(in srgb,var(--famc) 12%,transparent)}
body[data-fam="idea"]{--famc:var(--fam-idea)}body[data-fam="num"]{--famc:var(--fam-num)}
body[data-fam="legal"]{--famc:var(--fam-legal)}body[data-fam="oper"]{--famc:var(--fam-oper)}
body[data-fam="dinero"]{--famc:var(--fam-dinero)}body[data-fam="crecer"]{--famc:var(--fam-crecer)}
body[data-fam="util"]{--famc:var(--fam-util)}
/* leyenda del código de color */
.colorkey{display:flex;flex-wrap:wrap;gap:8px 16px;margin:14px 0 0;font:.78rem 'IBM Plex Mono';color:var(--muted)}
.colorkey span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.colorkey i{width:11px;height:11px;border-radius:4px;display:inline-block}

/* v42: fix de especificidad — las familias SÍ ganan ahora (a.dchip/a.pain declaraban --c con mayor peso) */
a.dchip.d1,a.pain.d1{--c:var(--fam-idea)}a.dchip.d2{--c:var(--fam-num)}a.dchip.d3{--c:var(--fam-util)}
a.dchip.d4{--c:var(--fam-util)}a.dchip.d5{--c:var(--fam-num)}a.dchip.d6{--c:var(--fam-oper)}
a.dchip.d7{--c:var(--fam-crecer)}a.dchip.d8{--c:var(--fam-crecer)}a.dchip.d9{--c:var(--fam-dinero)}
a.dchip.d10{--c:var(--fam-crecer)}a.dchip.d11{--c:var(--fam-crecer)}a.dchip.d12{--c:var(--fam-idea)}
a.pain.fam-idea{--c:var(--fam-idea)}a.pain.fam-num{--c:var(--fam-num)}a.pain.fam-legal{--c:var(--fam-legal)}
a.pain.fam-oper{--c:var(--fam-oper)}a.pain.fam-dinero{--c:var(--fam-dinero)}a.pain.fam-crecer{--c:var(--fam-crecer)}
a.pain.fam-util{--c:var(--fam-util)}
.hero-acciones .ac4{background:linear-gradient(120deg,#c23fc7,#d63d92)}

/* v45: infografías */
.infografia{margin:28px 0;text-align:center}
.infografia a{display:inline-block;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s}
.infografia a:hover{transform:translateY(-3px)}
.infografia img{display:block;width:100%;max-width:760px;height:auto}
.infografia figcaption{font:.82rem 'IBM Plex Mono';color:var(--muted);margin-top:10px}

/* v46: performance + accesibilidad (contraste AA) */

a.dchip{color:color-mix(in srgb,var(--c) 68%,var(--ink))}
a.dchip:hover,a.dchip.on{color:#fff;background:color-mix(in srgb,var(--c) 86%,#000)}
[data-theme="dark"] a.dchip{color:color-mix(in srgb,var(--c) 60%,var(--ink))}

/* v47: contraste AA en componentes de color */
.mod li a{color:color-mix(in srgb,var(--c) 62%,var(--ink))}
.mod::before{color:color-mix(in srgb,var(--c) 72%,var(--ink))}
a.est b{color:color-mix(in srgb,var(--c) 68%,var(--ink))}
a.pain{background:color-mix(in srgb,var(--c) 86%,#000)}
a.pain:hover{filter:none;background:color-mix(in srgb,var(--c) 75%,#000)}

/* v48: contraste AA integral en todos los componentes de color */
.badge.blue{color:color-mix(in srgb,var(--blue) 62%,var(--ink))}
.badge.green{color:color-mix(in srgb,var(--green,#0fa580) 52%,var(--ink))}
.badge.lilac{color:color-mix(in srgb,var(--lilac,#7c6cf0) 55%,var(--ink))}
.badge.coral{color:color-mix(in srgb,#d14b3b 58%,var(--ink))}
.fmt.f-herr .n{color:color-mix(in srgb,var(--green,#0fa580) 55%,var(--ink))}
.fmt.f-inter .n{color:color-mix(in srgb,var(--lilac,#7c6cf0) 58%,var(--ink))}
.fmt.f-desc .n{color:color-mix(in srgb,#d14b3b 62%,var(--ink))}
.fmt.f-art .n{color:color-mix(in srgb,var(--blue) 65%,var(--ink))}
.camino a.est b{color:color-mix(in srgb,var(--c) 60%,var(--ink))}
.sharebar a.wa{color:color-mix(in srgb,#25d366 40%,var(--ink))}
.sharebar a.fb{color:color-mix(in srgb,#1877f2 55%,var(--ink))}
.sharebar a.li{color:color-mix(in srgb,#0a66c2 62%,var(--ink))}
.tk.articulo{color:color-mix(in srgb,var(--blue) 65%,var(--ink))}
.tk.herramienta{color:color-mix(in srgb,var(--green,#0fa580) 52%,var(--ink))}
.tk.interactivo{color:color-mix(in srgb,var(--lilac,#7c6cf0) 55%,var(--ink))}
.tk.descargable{color:color-mix(in srgb,#d14b3b 58%,var(--ink))}

/* v50: videos de YouTube con facade ligera */
.yt-video{margin:28px auto;max-width:640px}
.yt-video button{position:relative;display:block;width:100%;aspect-ratio:16/9;border:none;padding:0;border-radius:14px;overflow:hidden;cursor:pointer;background:#000;box-shadow:var(--shadow)}
.yt-video button img{width:100%;height:100%;object-fit:cover;opacity:.88;display:block}
.yt-video button:hover img{opacity:1}
.yt-play{position:absolute;inset:0;margin:auto;width:68px;height:48px;background:#f00;border-radius:12px;display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.yt-play::after{content:"";border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.yt-video figcaption{font:600 .88rem 'Inter';margin:10px 0 0;text-align:center;color:var(--muted)}
.yt-video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;box-shadow:var(--shadow)}

/* v55: guía de prompts */
.prompt-ej{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--blue);border-radius:12px;padding:16px 18px;font:.84rem/1.6 'IBM Plex Mono';white-space:pre-wrap;overflow-x:auto;margin:.6em 0 1.4em}

/* v60: tablas comparativas */
.tabla{width:100%;border-collapse:collapse;margin:18px 0 24px;font-size:.9rem}
.tabla th{background:var(--surface2,var(--surface));text-align:left;font-family:'Sora';font-size:.82rem;padding:10px 12px;border-bottom:2px solid var(--blue)}
.tabla td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.tabla tr:hover td{background:var(--surface)}
.tabla .ok{color:var(--green,#0fa580);font-weight:700}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.faq details{border:1px solid var(--border);border-radius:12px;margin:10px 0;background:var(--surface)}
.faq summary{cursor:pointer;font:700 .95rem 'Sora';padding:14px 16px;list-style:none}
.faq summary::before{content:"▸ ";color:var(--blue)}
.faq details[open] summary::before{content:"▾ "}
.faq details p{padding:0 16px 14px;margin:0;font-size:.92rem}
.fuente{font:.78rem 'IBM Plex Mono';color:var(--muted)}