/* === TOKENS === */
:root {
  --ink:#1a1a18; --ink2:#4a4a46; --ink3:#888880;
  --paper:#e0d9c8; --paper2:#d3cbb8;
  --fs-base: 16px;
  --gold:#c8922a; --gold-light:#f2e4c4; --gold-dark:#7a5010;
  --teal:#2a6b6b; --teal-light:#d4eaea; --teal-dark:#1a4040;
  --coral:#c0432a; --coral-light:#f5e0da;
  --blue:#2a4e7a; --blue-light:#d4e0f0;
  --green:#2a6b48; --green-light:#d4eadf;
  --purple:#5a3a7a; --purple-light:#ead4f0;
  --border:rgba(26,26,24,0.11); --border2:rgba(26,26,24,0.18);
  --card-bg: #ffffff;
  --dark-surface: #1a1a18;
}

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:var(--paper);color:var(--ink);font-size:16px;line-height:1.7;overflow-x:hidden}

/* === TOP BAR (progress + shortcuts) === */
#topbar{background:var(--ink);border-bottom:1px solid rgba(255,255,255,0.08);position:sticky;top:0;z-index:200}
#topbar-inner{max-width:960px;margin:0 auto;padding:8px 24px;display:flex;align-items:center;gap:16px;justify-content:space-between}
#topbar-left{display:flex;flex-direction:column;gap:3px}
#topbar-title{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
#topbar-progress-track{width:180px;height:3px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden}
#topbar-progress-fill{height:100%;background:var(--gold);width:0%;transition:width .4s ease}
#topbar-label{font-size:10px;color:rgba(255,255,255,0.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
#topbar-shortcuts{display:flex;gap:5px;flex-wrap:nowrap}

/* === NAV === */
#nav{background:var(--ink);position:sticky;top:49px;z-index:199;border-bottom:2px solid rgba(255,255,255,0.06);overflow:visible}
#nav-bar{display:flex;align-items:stretch;width:100%;padding:0 12px;box-sizing:border-box;overflow:visible}
.nav-item{position:relative;flex:1;min-width:0;overflow:visible}
.nav-item.home-item{flex:0 0 auto}
.nav-btn{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;padding:12px 4px;font-family:'DM Sans',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,0.4);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.nav-btn:hover{color:rgba(255,255,255,0.75)}
.nav-btn.active{color:#fff;border-bottom-color:var(--gold)}
.nav-arrow{font-size:7px;opacity:.4;transition:transform .2s;display:inline-block}
.nav-item.open .nav-arrow{transform:rotate(180deg)}
.nav-drop{display:none;position:absolute;top:100%;left:0;min-width:270px;background:#1d1d1b;border:1px solid rgba(255,255,255,0.1);border-top:none;border-radius:0 0 8px 8px;box-shadow:0 8px 24px rgba(0,0,0,0.4);z-index:9999;max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.2) transparent}
.nav-item.open .nav-drop{display:block}
.drop-item{display:block;width:100%;padding:9px 16px;font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:300;color:rgba(255,255,255,0.6);background:none;border:none;border-bottom:1px solid rgba(255,255,255,0.05);text-align:left;cursor:pointer;line-height:1.4;transition:all .12s}
.drop-item:last-child{border-bottom:none;border-radius:0 0 8px 8px}
.drop-item:hover{background:rgba(255,255,255,0.06);color:#fff}
.drop-item.active{color:var(--gold);font-weight:500}
.drop-num{font-size:9.5px;opacity:.4;margin-right:7px;font-weight:700}
.drop-sep{height:1px;background:rgba(255,255,255,0.1);margin:3px 8px}
.drop-label{font-size:8.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,0.3);padding:7px 14px 2px}

/* === CONTENT AREA === */
#content{max-width:960px;margin:0 auto;padding:0 24px 80px;box-sizing:border-box}

/* === PAGE VISIBILITY === */
.page{display:none}
.page.active{display:block}

/* === MODULE WRAPPER (one per page in page-view) === */
.module{background:var(--card-bg);border:1px solid var(--border);margin-bottom:20px}
.page .module{margin-bottom:0}
.mod-header{background:var(--ink);padding:24px 40px;display:flex;align-items:flex-start;gap:16px;position:relative;cursor:pointer;user-select:none}
.page .mod-header{cursor:default}
.mod-header::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(200,146,42,0.1) 0%,transparent 55%);pointer-events:none}
.mod-header:hover{background:#1d1d1b}
.page .mod-header:hover{background:var(--ink)}
.mod-num{font-family:'DM Serif Display',serif;font-size:26px;color:rgba(200,146,42,0.4);line-height:1;min-width:38px;padding-top:3px;flex-shrink:0}
.mod-meta{flex:1}
.mod-tag{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:2px 9px;border-radius:20px;margin-bottom:7px}
.tag-gold{background:rgba(200,146,42,0.2);color:#e8c870}
.tag-teal{background:rgba(42,107,107,0.25);color:#7ecece}
.tag-coral{background:rgba(192,67,42,0.2);color:#f0a090}
.tag-blue{background:rgba(42,78,122,0.25);color:#90b0e0}
.tag-green{background:rgba(42,107,72,0.25);color:#80c8a0}
.tag-purple{background:rgba(90,58,122,0.25);color:#c0a0e0}
.mod-title{font-family:'DM Serif Display',serif;font-size:20px;font-weight:400;line-height:1.25;color:#fff;margin-bottom:4px}
.mod-subtitle{font-size:13px;color:rgba(255,255,255,0.5);font-weight:300}
.mod-toggle{font-size:14px;color:rgba(255,255,255,0.4);padding-top:6px;flex-shrink:0;transition:transform .2s}
.module.open .mod-toggle{transform:rotate(180deg)}
.page .mod-toggle{display:none}
.mod-body{display:none;padding:24px 28px;border-left:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.module.open .mod-body{display:block}
.page .mod-body{display:block!important}
.mod-body>p{font-size:15px;font-weight:300;color:var(--ink2);line-height:1.75;padding:16px 0 4px}

/* === LESSON STRUCTURE + IN-MODULE HEADINGS === */
.lesson-section{margin:24px 0}
.lesson-kicker{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:6px}
.lesson-heading{font-family:'DM Serif Display',serif;font-size:21px;font-weight:400;color:var(--ink);line-height:1.25;margin:0 0 12px}
.mod-body h2{font-family:'DM Serif Display',serif;font-size:21px;font-weight:400;color:var(--ink);line-height:1.3;margin:26px 0 10px}
.mod-body h3{font-family:'DM Serif Display',serif;font-size:16.5px;font-weight:400;color:var(--ink);line-height:1.3;margin:20px 0 8px}
.mod-body h4{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink);line-height:1.35;margin:16px 0 6px}
.mod-body h2:first-child,.mod-body h3:first-child{margin-top:0}
body.dark .lesson-heading,body.dark .mod-body h2,body.dark .mod-body h3,body.dark .mod-body h4{color:#f2efe9}
body.dark .lesson-kicker{color:var(--gold)}

/* === CAJA DE AUTO-CHEQUEO (reflection-box) === */
.reflection-box{background:linear-gradient(135deg,rgba(200,146,42,.12),rgba(42,107,107,.07));border:1px solid rgba(200,146,42,.22);border-radius:10px;padding:16px 18px;margin:18px 0}
.reflection-label{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:8px}
.reflection-box ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.reflection-box li{font-size:13.2px;font-weight:300;color:var(--ink2);line-height:1.55;padding-left:18px;position:relative}
.reflection-box li:before{content:'?';position:absolute;left:0;color:var(--gold);font-weight:700}
body.dark .reflection-box{background:linear-gradient(135deg,rgba(200,146,42,.16),rgba(42,107,107,.10));border-color:rgba(200,146,42,.30)}
body.dark .reflection-box li{color:rgba(255,255,255,.78)}

/* === TARJETA DESTACADA (opción recomendada) === */
.visual-card.featured{position:relative;border:1px solid var(--gold)!important;box-shadow:0 4px 16px rgba(200,146,42,.16);margin-top:8px}
.visual-card-badge{position:absolute;top:-10px;left:13px;background:var(--gold);color:#fff;font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:20px}

/* === PILLAR INTRO === */
.pillar-header{padding:28px 0 20px;margin-bottom:20px}
.pillar-kicker{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;display:block;margin-bottom:8px}
.pillar-header h2{font-family:'DM Serif Display',serif;font-size:32px;font-weight:400;margin-bottom:8px;line-height:1.1;color:#f7f5f0}
.pillar-header p{font-size:15px;font-weight:300;color:rgba(247,245,240,0.65);max-width:580px;line-height:1.7}

/* === THEORY === */
.theory{background:var(--ink);border-radius:8px;padding:20px 22px;margin:16px 0;position:relative;overflow:hidden}
.theory::before{content:'';position:absolute;top:-25px;right:-25px;width:100px;height:100px;border:1px solid rgba(200,146,42,0.12);border-radius:50%}
.theory-label{font-size:8.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.theory-title{font-family:'DM Serif Display',serif;font-size:16px;color:#fff;margin-bottom:8px;font-weight:400}
.theory-text{font-size:14px;color:rgba(255,255,255,0.68);font-weight:300;line-height:1.7}
.theory-text strong{color:rgba(255,255,255,0.92);font-weight:500}

/* === LESSON === */
.lesson{border:1px solid var(--border);border-radius:8px;margin:14px 0;overflow:hidden}
.lesson-header{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--paper2)}
.lesson-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.lesson-title{font-size:14px;font-weight:500;color:var(--ink);flex:1}
.lesson-duration{font-size:11px;color:var(--ink3);font-weight:300}
.lesson-content{padding:16px 18px}
.lesson-desc{font-size:14px;font-weight:300;color:var(--ink2);line-height:1.7;margin-bottom:12px}

/* === CHECKLIST === */
.checklist{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0;margin:10px 0}
.checklist li{font-size:14px;font-weight:300;color:var(--ink2);line-height:1.6;padding-left:20px;position:relative}
.checklist li::before{content:'→';position:absolute;left:0;color:var(--gold);font-weight:600;font-size:12px}

/* === INSIGHT / TIP / PRACTICE === */
.insight{background:linear-gradient(135deg,#0f1a15,#0a1510);border-radius:7px;padding:14px 18px;margin:12px 0}
.insight-label{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.insight-text{font-size:13px;font-weight:300;color:rgba(255,255,255,0.78);line-height:1.65}
.insight-text strong{color:#fff;font-weight:500}
.tip{background:var(--gold-light);border-radius:7px;padding:12px 16px;margin:10px 0}
.tip-label{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:5px}
.tip-text{font-size:13px;font-weight:300;color:var(--ink2);line-height:1.6}
.tip-text strong{color:var(--ink);font-weight:500}
.practice{background:var(--paper2);border-radius:7px;padding:12px 16px;margin:10px 0}
.practice-label{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:5px}
.practice-text{font-size:13px;font-weight:300;color:var(--ink2);line-height:1.6}
.warning{background:#fff3cd;border-left:3px solid #e6a817;border-radius:0 7px 7px 0;padding:11px 14px;margin:12px 0;font-size:13px;font-weight:300;color:var(--ink2);line-height:1.6}
.warning strong{font-weight:500;color:var(--ink)}

/* === FRAMEWORK === */
.framework{border:1px solid var(--border);border-radius:8px;overflow:hidden;margin:14px 0}
.framework-header{background:var(--ink);padding:11px 16px;display:flex;align-items:center;gap:10px}
.framework-badge{font-size:9px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);background:rgba(200,146,42,0.15);border:1px solid rgba(200,146,42,0.28);border-radius:3px;padding:2px 7px}
.framework-name{font-size:12px;font-weight:400;color:#fff}
.framework-body{padding:16px 18px}
.framework-steps{display:flex;flex-direction:column;gap:10px}
.framework-step{display:flex;align-items:flex-start;gap:12px}
.step-letter{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.step-name{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:3px}
.step-desc{font-size:12.5px;font-weight:300;color:var(--ink2);line-height:1.55}

/* === SCRIPT/ROLEPLAY === */
.script-block{border:1px solid var(--border2);border-radius:7px;overflow:hidden;margin:12px 0}
.speaker{background:var(--ink);padding:7px 14px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
/* Etiqueta de hablante EN LÍNEA dentro de un correo/guion (.script-line): anula la barra oscura de .speaker */
.mod-body .script-line .speaker{display:inline;background:none;padding:0;color:var(--gold-dark);font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;margin-right:6px}
body.dark .mod-body .script-line .speaker{color:var(--gold);background:none}
.line{padding:12px 14px;font-size:13px;font-weight:300;color:var(--ink2);line-height:1.7}
.line em{color:var(--coral);font-style:italic}
.line strong{font-weight:500;color:var(--ink)}

/* === TABLES === */
.comp-table,.viability-table,.gancho-table,.concesion-table,.obj-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}
.comp-table th,.viability-table th,.gancho-table thead th,.concesion-table thead th{background:var(--ink);color:#fff;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:10px 13px;text-align:left}
.comp-table td,.viability-table td,.gancho-table td,.concesion-table td{padding:11px 13px;border-bottom:1px solid var(--border);vertical-align:top;font-weight:300;color:var(--ink2);line-height:1.5}
.comp-table tr:last-child td,.viability-table tr:last-child td{border-bottom:none}
.comp-table td.hi,.viability-table td.label{font-weight:500;color:var(--ink)}
.comp-table td.good{color:var(--green);font-weight:400}
.comp-table td.green,.viability-table td.green{color:var(--green);font-weight:500}
.comp-table td.red,.viability-table td.red{color:var(--coral);font-weight:500}
.comp-table td.amber,.viability-table td.amber{color:var(--gold);font-weight:500}
.gancho-table tbody tr:hover,.concesion-table tbody tr:nth-child(even){background:var(--paper2)}
.gancho-table td.profile{font-weight:600;color:var(--ink)}
.gancho-table td.problem{color:var(--coral)}
.gancho-table td.hook{color:var(--teal-dark);font-style:italic}
.concesion-table td.ask{font-weight:500;color:var(--coral)}
.concesion-table td.give{color:var(--green);font-weight:500}

/* === ALERTS === */
.alert-gold{background:#1a1400;border-left:4px solid var(--gold);border-radius:0 7px 7px 0;padding:13px 16px;margin:12px 0;display:flex;gap:10px;align-items:flex-start}
.alert-gold-icon{font-size:16px;flex-shrink:0;margin-top:1px}
.alert-gold-label{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.alert-gold-text{font-size:13px;font-weight:300;color:rgba(255,255,255,0.82);line-height:1.6}
.alert-gold-text strong{color:#ffd070;font-weight:500}
.alert-stop{background:#2a0a0a;border-left:4px solid #e05050;border-radius:0 7px 7px 0;padding:13px 16px;margin:12px 0;display:flex;gap:10px;align-items:flex-start}
.alert-stop-icon{font-size:16px;flex-shrink:0;margin-top:1px}
.alert-stop-label{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#e05050;margin-bottom:3px}
.alert-stop-text{font-size:13px;font-weight:300;color:rgba(255,255,255,0.82);line-height:1.6}

/* === VARIOUS COMPONENTS === */
.keywords{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin:14px 0}
.kw{display:flex;align-items:flex-start;gap:8px;background:var(--card-bg);border:1px solid var(--border2);border-radius:7px;padding:10px 12px}
.kw-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:3px}
.kw-term{font-size:13px;font-weight:500;color:var(--ink);line-height:1.3}
.kw-def{font-size:12px;font-weight:300;color:var(--ink3);line-height:1.45}
.flow-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:20px;margin:24px 0;position:relative}
.flow-map::before{content:'';position:absolute;top:22px;left:20px;right:20px;height:1px;background:var(--border2);z-index:0}
.flow-step{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;position:relative;z-index:1}
.flow-circle{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'DM Serif Display',serif;font-size:16px;color:#fff}
.flow-step-name{font-size:12px;font-weight:400;color:var(--ink);line-height:1.3}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:14px 0}
.kpi-card{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:14px;text-align:center}
.kpi-num{font-family:'DM Serif Display',serif;font-size:26px;color:var(--ink);line-height:1;margin-bottom:4px}
.kpi-label{font-size:11px;font-weight:300;color:var(--ink3);line-height:1.4}
.kpi-card.accent{background:var(--ink)}
.kpi-card.accent .kpi-num{color:var(--gold)}
.kpi-card.accent .kpi-label{color:rgba(255,255,255,0.55)}
.metrics-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:14px 0}
.metric-card{background:var(--paper2);border:1px solid var(--border);border-radius:7px;padding:12px;text-align:center}
.metric-val{font-family:'DM Serif Display',serif;font-size:16px;color:var(--ink);display:block;margin-bottom:3px}
.metric-lbl{font-size:11px;font-weight:300;color:var(--ink3);line-height:1.35}
.pipe-stage{display:flex;align-items:stretch;margin:14px 0}
.pipe-item{flex:1;padding:12px 10px;text-align:center;position:relative}
.pipe-item::after{content:'▶';position:absolute;right:-8px;top:50%;transform:translateY(-50%);color:var(--border2);font-size:11px;z-index:1}
.pipe-item:last-child::after{display:none}
.pipe-name{font-size:11px;font-weight:500;color:#fff;margin-bottom:3px}
.pipe-rate{font-size:10px;font-weight:300;color:rgba(255,255,255,0.6)}
.pipe-item:nth-child(1){background:var(--teal);border-radius:7px 0 0 7px}
.pipe-item:nth-child(2){background:#2a7a7a}
.pipe-item:nth-child(3){background:var(--gold)}
.pipe-item:nth-child(4){background:#b07a10}
.pipe-item:nth-child(5){background:var(--coral)}
.pipe-item:nth-child(6){background:#a03520}
.pipe-item:nth-child(7){background:var(--ink);border-radius:0 7px 7px 0}
.os-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:7px;margin:14px 0}
.os-day{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.os-day-header{padding:9px 11px 7px;text-align:center}
.os-day-name{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.os-day-body{padding:9px 11px 11px}
.os-task{font-size:12px;font-weight:300;color:var(--ink2);line-height:1.45;padding:4px 0;border-bottom:1px solid var(--border);display:flex;gap:6px}
.os-task:last-child{border-bottom:none}
.os-task-num{font-size:9.5px;font-weight:600;color:var(--ink3);flex-shrink:0;margin-top:2px}
.os-task strong{color:var(--ink);font-weight:500}
.bridge{background:var(--ink);padding:16px 28px;margin-bottom:18px;display:flex;align-items:flex-start;gap:14px;border-left:4px solid var(--gold)}
.bridge-title{font-size:12px;font-weight:500;color:var(--gold-dark);margin-bottom:3px}
.bridge-text{font-size:13px;font-weight:300;color:var(--ink2);line-height:1.6}
.bridge-text strong{font-weight:500;color:var(--ink)}
.prereq{display:flex;align-items:center;gap:8px;background:var(--paper2);border-radius:6px;padding:9px 13px;margin-bottom:16px;font-size:13px;font-weight:400;color:var(--ink2)}
.prereq strong{font-weight:500;color:var(--ink)}
.prereq-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.faq-link{display:inline-flex;align-items:center;gap:5px;background:var(--teal);color:#fff;border:none;border-radius:5px;padding:8px 16px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;cursor:pointer;margin-top:7px}
.faq-link:hover{opacity:.85}
.faq-link.gold{background:var(--gold)}
.faq-link.coral{background:var(--coral)}
.faq-link.blue{background:var(--blue)}
.faq-link.green{background:var(--green)}
.faq-link.ink{background:var(--ink2)}
.fundamento{background:linear-gradient(135deg,#0f1a0f,#0a1520);border-radius:10px;padding:22px 26px;margin:0 0 24px;border-left:4px solid var(--gold)}
.fundamento-label{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.fundamento-title{font-family:'DM Serif Display',serif;font-size:17px;color:#fff;font-weight:400;margin-bottom:10px;line-height:1.25}
.fundamento-body{font-size:13px;font-weight:300;color:rgba(255,255,255,0.75);line-height:1.72}
.fundamento-body strong{color:#fff;font-weight:500}
.quiz-block{background:var(--card-bg);border:2px solid var(--border);border-radius:10px;padding:22px 26px;margin:20px 0}
.quiz-label{font-size:9px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--purple);margin-bottom:12px;display:flex;align-items:center;gap:7px}
.quiz-scenario{font-size:14px;font-weight:400;color:var(--ink);line-height:1.65;margin-bottom:16px;padding:12px 16px;background:var(--paper2);border-radius:7px;border-left:3px solid var(--purple)}
.quiz-options{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.quiz-option{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border:1px solid var(--border);border-radius:7px;cursor:pointer;transition:all .12s;font-size:13px;font-weight:300;color:var(--ink2)}
.quiz-option:hover{border-color:var(--purple)}
.quiz-option.correct{border-color:var(--green)!important;background:rgba(42,107,72,0.05)}
.quiz-option.wrong{border-color:var(--coral)!important;background:rgba(192,67,42,0.05);text-decoration:line-through}
.quiz-option-letter{width:24px;height:24px;border-radius:50%;background:var(--paper2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--ink3);flex-shrink:0}
.quiz-option.correct .quiz-option-letter{background:var(--green);color:#fff;border-color:var(--green)}
.quiz-option.wrong .quiz-option-letter{background:var(--coral);color:#fff;border-color:var(--coral)}
.quiz-answer{display:none;padding:12px 16px;background:rgba(42,107,72,0.05);border:1px solid rgba(42,107,72,0.18);border-radius:7px;margin-top:10px;font-size:13px;font-weight:300;color:var(--ink2);line-height:1.65}
.quiz-answer.visible{display:block}
.quiz-btn{background:var(--purple);color:#fff;border:none;border-radius:5px;padding:9px 22px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;cursor:pointer}
.flashcard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:14px 0}
.flashcard{border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:box-shadow .15s}
.flashcard:hover{box-shadow:0 3px 12px rgba(26,26,24,0.09)}
.flashcard-front{padding:16px 18px;background:var(--ink);min-height:90px;display:flex;flex-direction:column;justify-content:space-between}
.flashcard-front-label{font-size:9px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--coral);margin-bottom:7px}
.flashcard-front-text{font-size:13px;font-weight:400;color:#fff;line-height:1.5;font-style:italic}
.flashcard-hint{font-size:10px;color:rgba(255,255,255,0.3);margin-top:8px;text-align:right}
.flashcard-back{padding:16px 18px;background:var(--paper2);display:none;border-top:2px solid var(--teal)}
.flashcard-back.visible{display:block}
.flashcard-back-label{font-size:9px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--teal);margin-bottom:7px}
.flashcard-back-text{font-size:13px;font-weight:300;color:var(--ink2);line-height:1.6}
.flashcard-back-text strong{color:var(--teal-dark);font-weight:500}
.plan30-week{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;margin-bottom:14px;overflow:hidden}
.plan30-week-header{padding:12px 18px;display:flex;align-items:center;gap:12px}
.plan30-week-num{font-family:'DM Serif Display',serif;font-size:28px;font-weight:400;line-height:1;color:rgba(255,255,255,0.85);width:42px;flex-shrink:0;text-align:center}
.plan30-week-title{font-size:15px;font-weight:500;color:#fff;margin-bottom:2px}
.plan30-week-focus{font-size:12px;font-weight:300;color:rgba(255,255,255,0.55)}
.plan30-week-body{padding:14px 18px}
.plan30-task{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;font-weight:300;color:var(--ink2);line-height:1.5}
.plan30-task:last-child{border-bottom:none}
.plan30-task-day{font-size:10px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;width:48px;flex-shrink:0}
.plan30-task strong{color:var(--ink);font-weight:500}
.tldr{background:var(--ink);color:#fff;border-radius:8px;padding:18px 22px;margin:18px 0 3px}
.tldr-label{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.tldr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.tldr-col-title{font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:7px}
.tldr-item{font-size:12.5px;font-weight:300;color:rgba(255,255,255,0.82);line-height:1.5;padding-left:10px;border-left:2px solid rgba(255,255,255,0.13);margin-bottom:5px}
.domain-check{background:var(--green-light);border:1px solid rgba(42,107,72,0.18);border-left:3px solid var(--green);border-radius:7px;padding:14px 18px;margin:18px 0 3px}
.domain-check-label{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.domain-check li{font-size:13px;color:#1a4532;font-weight:300;line-height:1.5;display:flex;align-items:flex-start;gap:8px}
.domain-check li::before{content:'□';color:var(--green);font-weight:700;flex-shrink:0}
.level-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px 3px 7px;border-radius:20px;margin-bottom:7px;margin-right:5px}
.level-dot{width:6px;height:6px;border-radius:50%}
.level-1{background:rgba(245,158,11,0.18);color:#fcd34d;border:1px solid rgba(252,211,77,0.22)}
.level-2{background:rgba(14,165,233,0.18);color:#7dd3fc;border:1px solid rgba(125,211,252,0.22)}
.level-3{background:rgba(168,85,247,0.18);color:#d8b4fe;border:1px solid rgba(216,180,254,0.22)}
.level-1 .level-dot{background:#f59e0b}
.level-2 .level-dot{background:#0ea5e9}
.level-3 .level-dot{background:#a855f7}
.welcome-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}
.welcome-card{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:18px 20px}
.welcome-card-icon{font-size:26px;margin-bottom:8px}
.welcome-card-title{font-size:14px;font-weight:500;margin-bottom:5px}
.welcome-card-text{font-size:13px;font-weight:300;color:var(--ink2);line-height:1.55}
.roadmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin:18px 0}
.roadmap-card{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:18px}
.roadmap-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.roadmap-num{font-family:'DM Serif Display',serif;font-size:22px;color:var(--border2)}
.roadmap-title{font-size:13px;font-weight:500;color:var(--ink)}
.roadmap-desc{font-size:12.5px;font-weight:300;color:var(--ink2);line-height:1.5}
.section-context{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:24px 28px;margin-bottom:28px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.learning-box{background:var(--paper2);border:1px solid var(--border);border-radius:8px;padding:18px 22px;margin-bottom:30px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.learning-box-title{font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.learning-box ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.learning-box li{font-size:13px;font-weight:300;color:var(--ink2);line-height:1.5;padding-left:16px;position:relative}
.learning-box li::before{content:'✓';position:absolute;left:0;font-weight:700;font-size:10px;color:var(--green)}
.learning-box .prereq-list li::before{content:'→';color:var(--gold)}
.track-banner{display:flex;gap:10px;margin:14px 0}
.track-card{flex:1;border-radius:8px;padding:16px 18px}
.track-card.junior{background:linear-gradient(135deg,#fef9ee,#fef3c7);border:1px solid #fcd34d}
.track-card.senior{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #7dd3fc}
.track-title{font-family:'DM Serif Display',serif;font-size:16px;margin-bottom:5px}
.track-tag{font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;margin-bottom:8px;display:block}
.track-card.junior .track-tag{color:#92400e}
.track-card.senior .track-tag{color:#0c4a6e}
.track-items{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.track-items li{font-size:13px;font-weight:300;color:var(--ink2);line-height:1.45;padding-left:12px;position:relative}
.track-items li::before{content:'→';position:absolute;left:0;color:var(--gold);font-weight:600}
.criteria-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:12px 0}
.criteria-card{background:var(--paper2);border:1px solid var(--border);border-radius:7px;padding:12px 14px}
.criteria-label{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin-bottom:7px}
.criteria-val{font-family:'DM Serif Display',serif;font-size:20px;color:var(--ink);margin-bottom:3px}
.criteria-desc{font-size:12px;font-weight:300;color:var(--ink3);line-height:1.38}
.city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:12px 0}
.city-card{border:1px solid var(--border);border-radius:8px;overflow:hidden}
.city-card-header{padding:12px 16px 10px}
.city-card-title{font-family:'DM Serif Display',serif;font-size:16px;margin-bottom:3px}
.city-card-tag{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.city-card-body{padding:10px 16px 14px;background:var(--paper2)}
.city-card-body ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
.city-card-body li{font-size:13px;font-weight:300;color:var(--ink2);line-height:1.45;padding-left:12px;position:relative}
.city-card-body li::before{content:'→';position:absolute;left:0;color:var(--gold);font-weight:600}
.process-row{display:flex;gap:0;margin:14px 0}
.process-step{flex:1;padding:14px 12px;border-right:1px solid rgba(255,255,255,0.08)}
.process-step:last-child{border-right:none}
.process-num{font-family:'DM Serif Display',serif;font-size:24px;color:rgba(255,255,255,0.22);line-height:1;margin-bottom:5px}
.process-title{font-size:12px;font-weight:500;color:#fff;margin-bottom:5px}
.process-desc{font-size:11.5px;font-weight:300;color:rgba(255,255,255,0.6);line-height:1.45}
.who-banner{display:flex;align-items:flex-start;gap:12px;background:var(--paper2);border:1px solid var(--border);border-radius:8px;padding:12px 18px;margin-bottom:20px}
.who-icon{font-size:20px;flex-shrink:0}
.who-text{font-size:13px;font-weight:300;color:var(--ink2);line-height:1.6}
.who-text strong{color:var(--ink);font-weight:500}
.section-summary{background:var(--paper2);border:1px solid var(--border);border-radius:8px;padding:20px 24px;margin-top:7px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.section-next{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.review-card{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:18px 22px;margin-bottom:12px}
.review-card-label{font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:7px}
.review-card-body{font-size:14px;font-weight:300;color:var(--ink2);line-height:1.65}
.review-mode .mod-header{display:none}
.module-complete-badge{display:inline-flex;align-items:center;gap:4px;background:var(--green-light);color:var(--green);border-radius:10px;padding:3px 9px;font-size:11px;font-weight:500;margin-top:7px}
.progress-block{margin:14px 0}
.progress-label{font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
p,li,td{line-height:1.7}
img,video,iframe,table{max-width:100%}

/* === CALC STYLES === */
.calc-tab{background:transparent;border:none;border-bottom:2px solid transparent;padding:9px 13px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;color:var(--ink3);cursor:pointer;white-space:nowrap;margin-bottom:-2px;transition:color .13s,border-color .13s}
.calc-tab:hover{color:var(--ink)}
.calc-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
.calc-panel{display:none;padding:18px 0}
.calc-panel.active{display:block}
.calc-section-title{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:12px}
.calc-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.calc-grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:10px}
.calc-field label{font-size:10px;font-weight:500;color:var(--ink3);display:block;margin-bottom:4px}
.calc-field input{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:5px;font-family:'DM Sans',sans-serif;font-size:13px;background:var(--paper);color:var(--ink);box-sizing:border-box}
.calc-results-4{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:14px}
.calc-result-card{border:1px solid var(--border);border-radius:7px;padding:12px;text-align:center;background:var(--paper)}
.calc-result-card.teal{border-top:3px solid var(--teal)}
.calc-result-card.gold{border-top:3px solid var(--gold)}
.calc-result-card.coral{border-top:3px solid var(--coral)}
.calc-result-card.purple{border-top:3px solid var(--purple)}
.calc-result-card.green{border-top:3px solid var(--green)}
.crv{font-family:'DM Serif Display',serif;font-size:20px;color:var(--ink);margin-bottom:3px}
.crl{font-size:10px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.calc-summary{background:var(--paper2);border:1px solid var(--border);border-radius:7px;padding:12px;font-size:12.5px;font-weight:300;color:var(--ink2);line-height:1.65;margin-top:14px}
.calc-insight{background:var(--paper2);border-left:3px solid var(--purple);border-radius:0 7px 7px 0;padding:11px 14px;font-size:12.5px;font-weight:300;color:var(--ink2);line-height:1.65;margin-top:12px}
.calc-insight strong{font-weight:500;color:var(--ink)}
.c4-row{display:flex;justify-content:space-between;padding:2px 0}
.c4-row span:first-child{color:var(--ink3)}

/* === SECTION ACCENT LINES === */
#section-p1 .mod-header{border-left:4px solid var(--gold)}
#section-p2 .mod-header{border-left:4px solid #6b9ecc}
#section-p3 .mod-header{border-left:4px solid var(--teal)}
#section-p4 .mod-header{border-left:4px solid var(--coral)}
#section-p5 .mod-header{border-left:4px solid var(--green)}
#section-p6 .mod-header{border-left:4px solid var(--purple)}
#section-p7 .mod-header{border-left:4px solid #c8a45a}
#section-p8 .mod-header{border-left:4px solid #4a6abf}
#section-p9 .mod-header{border-left:4px solid #8a4abf}
#section-p10 .mod-header{border-left:4px solid #bf4a4a}
#section-ref1 .mod-header{border-left:4px solid var(--gold)}
#section-ref2 .mod-header{border-left:4px solid var(--teal)}
#section-ref3 .mod-header{border-left:4px solid var(--blue)}

/* === REVIEW BTN === */
#review-btn{position:fixed;bottom:28px;right:20px;background:var(--ink);color:#fff;border:none;border-radius:18px;padding:9px 16px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;cursor:pointer;z-index:100;box-shadow:0 3px 12px rgba(0,0,0,0.2)}
#review-btn:hover{opacity:.85}

/* === MOBILE === */
@media(max-width:640px){
  #content{padding:0 14px 60px}
  .mod-header{padding:14px 16px}
  .mod-body{padding:18px 16px}
  .welcome-grid,.section-context,.learning-box{grid-template-columns:1fr}
  .track-banner{flex-direction:column}
  .calc-grid-2{grid-template-columns:1fr}
  #nav-bar{padding:0 4px}
  .nav-btn{font-size:8.5px;padding:11px 3px}
}

/* page-view: always show body, always hide toggle */
.page .mod-body { display: block !important; }
.page .mod-toggle { display: none; }
.page .mod-header { cursor: default; }
.page .mod-header:hover { background: var(--ink); }
/* module open toggle */
.module.open .mod-body { display: block; }
.module.open .mod-toggle { transform: rotate(180deg); }

/* === TOOLBAR BUTTONS === */
.tool-btn {
  display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
  border-radius:5px; padding:4px 9px;
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
  color:rgba(255,255,255,0.6); cursor:pointer; white-space:nowrap;
  transition:all .15s; flex-shrink:0;
}
.tool-btn:hover { background:rgba(255,255,255,0.13); color:#fff; }
.tool-btn.active { background:rgba(200,146,42,0.25); border-color:rgba(200,146,42,0.5); color:var(--gold); }
.fs-controls { display:flex; align-items:center; gap:2px; }
.fs-btn {
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
  border-radius:4px; padding:4px 7px;
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:600;
  color:rgba(255,255,255,0.6); cursor:pointer; transition:all .15s; line-height:1;
}
.fs-btn:hover { background:rgba(255,255,255,0.13); color:#fff; }
.fs-label {
  font-size:10px; font-weight:500; color:rgba(255,255,255,0.4);
  padding:0 5px; min-width:28px; text-align:center;
}

/* ===================================================
   FONT SIZE  — zoom scales ALL px values uniformly
   =================================================== */
body.fs-sm #content { zoom: 0.85; }
body.fs-md #content { zoom: 1.00; }
body.fs-lg #content { zoom: 1.18; }
body.fs-xl #content { zoom: 1.35; }

/* ===================================================
   DARK MODE
   =================================================== */
body.dark {
  --ink:   #dddbd5;
  --ink2:  #a09c94;
  --ink3:  #6a6660;
  --paper: #161614;
  --paper2:#222220;
  --border: rgba(255,255,255,0.09);
  --border2:rgba(255,255,255,0.15);
  --gold-light: #2a1e00;
  --coral-light:#2a0e08;
  --blue-light: #0a1020;
  --green-light:#081408;
  --purple-light:#12081e;
  --teal-light:  #081414;
  --card-bg:     #1e1e1c;
  --dark-surface: #0e0e0c;
}

/* ── Chrome/backgrounds ── */
body.dark #topbar       { background:#0c0c0a; border-bottom-color:rgba(255,255,255,0.05); }
body.dark #nav          { background:#0c0c0a; border-bottom-color:rgba(255,255,255,0.04); }
body.dark .nav-drop     { background:#111110; border-color:rgba(255,255,255,0.07); }
body.dark .drop-item:hover { background:rgba(255,255,255,0.05); }

/* ── Main content cards ── */
body.dark .module,
body.dark .lesson,
body.dark .framework,
body.dark .quiz-block,
body.dark .welcome-card,
body.dark .roadmap-card,
body.dark .city-card,
body.dark .plan30-week,
body.dark .kpi-card,
body.dark .script-block,
body.dark .flashcard     { background:#1e1e1c; border-color:rgba(255,255,255,0.08); }
body.dark .mod-body      { background:#1e1e1c; border-color:rgba(255,255,255,0.08); }
body.dark .lesson-header,
body.dark .lesson-content { background:#1e1e1c; }
body.dark .framework-body { background:#1e1e1c; }

/* ── Secondary surfaces ── */
body.dark .prereq,
body.dark .practice,
body.dark .section-summary,
body.dark .section-context,
body.dark .learning-box,
body.dark .who-banner,
body.dark .criteria-card,
body.dark .metric-card,
body.dark .kpi-card,
body.dark .os-day,
body.dark .calc-summary,
body.dark .calc-insight  { background:#282826; border-color:rgba(255,255,255,0.07); }
body.dark .kw            { background:#222220; border-color:rgba(255,255,255,0.09); }
body.dark .os-day-header { background:#2e2e2c; }
body.dark .city-card-body { background:#282826; }
body.dark .flashcard-back { background:#1a2e2a; border-top-color:var(--teal); }

/* ── Elements that are DARK IN LIGHT MODE too —
      keep them dark, just give them a distinct
      dark-mode tint so they read against the page ── */

/* Module headers — near-black */
body.dark .mod-header        { background:#0a0a08; }
body.dark .mod-header:hover  { background:#141412; }
body.dark .page .mod-header:hover { background:#0a0a08; }

/* Theory block — dark with warm green tint */
body.dark .theory {
  background: #0c1610;
  border: 1px solid rgba(200,146,42,0.07);
}
/* Insight — deep green */
body.dark .insight { background: linear-gradient(135deg,#091410,#060e09); }

/* Fundamento — deep navy-green */
body.dark .fundamento { background: linear-gradient(135deg,#07100e,#060a12); }

/* Framework / speaker / TLDR headers — near-black */
body.dark .framework-header,
body.dark .speaker            { background:#0a0a08; }
body.dark .tldr               { background:#0a0a08; }

/* Alerts — deep tinted black */
body.dark .alert-gold  { background:#120e00; }
body.dark .alert-stop  { background:#120606; }

/* Flashcard front — near-black */
body.dark .flashcard-front { background:#0e0e0c; }

/* Plan week headers */
body.dark .plan30-week-header { background:#0a0a08; }

/* Bridge — near-black, gold left border stays */
body.dark .bridge { background:#0a0a08; }

/* Tip — dark amber tint */
body.dark .tip { background:#1c1400; }

/* Domain check — dark green tint */
body.dark .domain-check { background:#081008; }

/* Pipeline items — darkened versions of original colors */
body.dark .pipe-item:nth-child(1) { background:#12303a; }
body.dark .pipe-item:nth-child(2) { background:#0e3838; }
body.dark .pipe-item:nth-child(3) { background:#603e06; }
body.dark .pipe-item:nth-child(4) { background:#704808; }
body.dark .pipe-item:nth-child(5) { background:#601c10; }
body.dark .pipe-item:nth-child(6) { background:#481408; }
body.dark .pipe-item:nth-child(7) { background:#0a0a08; }

/* Process rows (expansion section) */
body.dark .process-step { border-right-color:rgba(255,255,255,0.06); }

/* ── Tables ── */
body.dark .comp-table td,
body.dark .viability-table td,
body.dark .gancho-table td,
body.dark .concesion-table td { border-bottom-color:rgba(255,255,255,0.07); }
body.dark .gancho-table tbody tr:hover,
body.dark .concesion-table tbody tr:nth-child(even) { background:#282826; }
body.dark .comp-table th,
body.dark .viability-table th,
body.dark .gancho-table thead th,
body.dark .concesion-table thead th { background:#0a0a08; }

/* ── Quiz ── */
body.dark .quiz-option          { background:#1e1e1c; border-color:rgba(255,255,255,0.1); }
body.dark .quiz-option:hover    { border-color:var(--purple); }
body.dark .quiz-scenario        { background:#282826; }
body.dark .quiz-answer          { background:rgba(42,107,72,0.1); border-color:rgba(42,107,72,0.2); }
body.dark .quiz-option.correct  { background:rgba(42,107,72,0.12); border-color:var(--green); }
body.dark .quiz-option.wrong    { background:rgba(192,67,42,0.12); border-color:var(--coral); }

/* ── Badges and misc ── */
body.dark .level-1 { background:rgba(245,158,11,0.12); }
body.dark .level-2 { background:rgba(14,165,233,0.12); }
body.dark .level-3 { background:rgba(168,85,247,0.12); }
body.dark .module-complete-badge { background:#081408; color:var(--green); }
body.dark #review-btn { background:#222220; }
body.dark .kpi-card.accent { background:#111110; }

/* ── Toolbar buttons ── */
body.dark .tool-btn,
body.dark .fs-btn { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1); }

/* === QUIZ INTERACTIVO === */
.quiz-card{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:24px;margin:14px 0}
.quiz-q{font-size:15px;font-weight:500;color:var(--ink);margin-bottom:14px;line-height:1.5}
.quiz-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.quiz-opt{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border:1.5px solid var(--border2);border-radius:8px;cursor:pointer;font-size:14px;font-weight:300;color:var(--ink2);transition:all .12s;background:var(--card-bg)}
.quiz-opt:hover:not(.answered){border-color:var(--gold);background:var(--gold-light)}
.quiz-opt.correct{border-color:var(--green);background:var(--green-light);color:var(--ink)}
.quiz-opt.wrong{border-color:var(--coral);background:var(--coral-light);color:var(--ink);opacity:.7}
.quiz-opt.answered{cursor:default}
.quiz-letter{width:24px;height:24px;border-radius:50%;background:var(--border2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.quiz-opt.correct .quiz-letter{background:var(--green);color:#fff}
.quiz-opt.wrong .quiz-letter{background:var(--coral);color:#fff}
.quiz-explanation{background:var(--paper2);border-left:3px solid var(--green);border-radius:0 7px 7px 0;padding:12px 16px;font-size:13px;font-weight:300;color:var(--ink2);line-height:1.65;margin-top:10px;display:none}
.quiz-explanation.show{display:block}
.quiz-score{background:var(--ink);color:#fff;border-radius:10px;padding:20px 24px;margin-top:20px;text-align:center;display:none}
.quiz-score.show{display:block}
.quiz-score-num{font-family:'DM Serif Display',serif;font-size:36px;color:var(--gold);display:block;margin-bottom:6px}
.quiz-score-msg{font-size:14px;font-weight:300;color:rgba(255,255,255,.75)}
.pillar-quiz-wrap{border:2px solid var(--gold);border-radius:12px;padding:28px;margin:24px 0}
.pillar-quiz-title{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;display:flex;align-items:center;gap:8px}
.quiz-progress{display:flex;gap:4px;margin-bottom:20px}
.quiz-pip{width:20px;height:4px;border-radius:2px;background:var(--border2);transition:background .3s}
.quiz-pip.done-ok{background:var(--green)}
.quiz-pip.done-wrong{background:var(--coral)}


/* === COOKIE BANNER === */
#cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#1a1a18;border-top:1px solid rgba(200,146,42,0.3);padding:16px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;box-shadow:0 -4px 24px rgba(0,0,0,0.25);transform:translateY(0);transition:transform .3s ease}
#cookie-banner.hidden{transform:translateY(110%)}
#cookie-banner p{font-size:13px;font-weight:300;color:rgba(255,255,255,0.72);line-height:1.55;flex:1;min-width:200px;margin:0}
#cookie-banner p a{color:var(--gold);text-decoration:underline;cursor:pointer}
#cookie-banner p a:hover{opacity:.8}
.cookie-btns{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}
#cookie-accept{background:var(--gold);color:#fff;border:none;border-radius:6px;padding:9px 20px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
#cookie-accept:hover{opacity:.88}
#cookie-reject{background:transparent;color:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.2);border-radius:6px;padding:9px 16px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:400;cursor:pointer;white-space:nowrap}
#cookie-reject:hover{color:rgba(255,255,255,0.8);border-color:rgba(255,255,255,0.4)}
@media(max-width:640px){#cookie-banner{flex-direction:column;align-items:flex-start}.cookie-btns{width:100%}#cookie-accept,#cookie-reject{flex:1;text-align:center}}


/* ===================================================
   BLOCK SWITCHER
   =================================================== */
#block-switcher {
  background: #0a0a08;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 0;
  z-index: 201;
  overflow-x: auto;
  scrollbar-width: none;
}
#block-switcher::-webkit-scrollbar { display: none; }
#block-switcher-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.block-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  position: relative;
}
.block-tab:hover { color: rgba(255,255,255,0.7); }
.btab-soon { opacity: .45; }
.btab-label { flex-shrink: 0; }
.btab-label-soon { font-size: 9.5px; opacity: .8; }
.block-tab.active { color: #fff; border-bottom-color: var(--gold); }
#btab-dir.active { border-bottom-color: #8b5e3c; }
#btab-cm.active  { border-bottom-color: var(--teal); }
#btab-op.active  { border-bottom-color: #3a7bd5; }
.block-tab-icon { font-size: 14px; }
.block-tab-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(200,146,42,0.2);
  color: var(--gold);
  border: 1px solid rgba(200,146,42,0.3);
}
.block-tab-badge.new {
  background: rgba(42,107,72,0.25);
  color: #80c8a0;
  border-color: rgba(42,107,72,0.4);
}
.block-tab-badge.soon {
  background: rgba(100,100,100,0.2);
  color: rgba(255,255,255,0.35);
  border-color: rgba(255,255,255,0.1);
}

/* Adjust topbar sticky position */
#topbar { top: 36px; }
#nav    { top: 85px; }

/* Block nav visibility */
#nav-bdm { display: none; }
#nav-cm  { display: none; }

/* Progress bar per-block colors */
.progress-fill-cm { background: var(--teal) !important; }

/* CM block accent color overrides */
.block-cm #section-cm1 .mod-header { border-left: 4px solid var(--teal); }
.block-cm #section-cm2 .mod-header { border-left: 4px solid var(--blue); }
.block-cm #section-cm3 .mod-header { border-left: 4px solid var(--green); }
.block-cm #section-cm4 .mod-header { border-left: 4px solid var(--coral); }
.block-cm #section-cm5 .mod-header { border-left: 4px solid var(--purple); }
.block-cm #section-cm6 .mod-header { border-left: 4px solid var(--gold); }

@media (max-width: 640px) {
  .block-tab { padding: 8px 10px; font-size: 10px; }
  .block-tab-badge { display: none; }
}


.theory-extended{background:var(--paper);border-left:3px solid var(--teal);padding:20px 24px;margin:20px 0;border-radius:0 8px 8px 0}
.theory-extended p{font-size:14.5px;font-weight:300;color:var(--ink2);line-height:1.85;margin-bottom:16px}
.theory-extended p:last-child{margin-bottom:0}
.theory-extended-label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}

/* Compact soon tabs on narrower screens */
@media (max-width: 1500px) {
  .btab-soon .btab-label-soon { display: none; }
  .btab-soon { padding: 8px 10px; }
  .btab-soon .block-tab-badge { display: none; }
}
/* Active block tab highlight */
.block-tab.active { color: #fff; border-bottom-color: var(--gold); }

/* Ajuste cabecera de pilar sobre fondo claro */
.pillar-header h2 { color: var(--ink); }
.pillar-header p { color: var(--ink2); }
.pillar-kicker { color: var(--gold-dark); }

/* ============================================
   COMPONENTES COMPLEMENTARIOS — Pilar 1 reescrito
   Añadir al final de academia.css
   ============================================ */

/* Pasos verticales numerados (escucha, carrera...) */
.flow-vertical{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.flow-vertical .flow-step{flex-direction:row;align-items:flex-start;gap:14px;text-align:left;
  background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:14px 18px}
.flow-vertical .flow-num{flex:0 0 28px;width:28px;height:28px;border-radius:50%;
  background:var(--gold);color:#fff;font-family:'DM Sans',sans-serif;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center}
.flow-vertical .flow-step > div{font-size:14px;line-height:1.6;color:var(--ink2)}
.flow-vertical .flow-step strong{color:var(--ink)}

/* Fila dentro del who-banner (para multiples filas) */
.who-row{display:flex;align-items:flex-start;gap:12px}
.who-row + .who-row{margin-top:10px}

/* Envoltorio de tabla para scroll horizontal en móvil */
.comp-table-wrap{overflow-x:auto;margin:14px 0;-webkit-overflow-scrolling:touch}
.comp-table-wrap .comp-table{margin:0;min-width:480px}

/* === NAVEGACIÓN ENTRE MÓDULOS + RESPONSIVE === */

/* RESPONSIVE */
@media (max-width: 900px){
  #topbar-inner, #block-switcher-inner{ padding-left:16px; padding-right:16px; }
}
@media (max-width: 640px){
  .module, .mod-body{ padding-left:16px !important; padding-right:16px !important; }
  .mod-nav{ flex-direction:column; }
  .mod-nav-next{ text-align:left; }
  .pillar-header h2{ font-size:24px !important; }
  .mod-title{ font-size:17px !important; }
  .comp-table{ font-size:13px; }
  .comp-table td, .comp-table th{ padding:8px 10px; }
  .kpi-row{ grid-template-columns:repeat(2,1fr) !important; }
  #block-switcher-inner{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .block-tab{ flex:0 0 auto; }
  .flow-vertical .flow-step{ padding:12px 14px; }
}
@media (max-width: 400px){
  .kpi-row{ grid-template-columns:1fr !important; }
}
/* === NAVEGACIÓN INFERIOR — contenida y compacta === */
.mod-nav{
  display:flex; gap:8px;
  max-width:1040px; margin:24px auto 20px; padding:24px 20px 0;
  border-top:1px solid var(--border);
}
.mod-nav-btn{
  flex:1; display:flex; flex-direction:column; gap:2px;
  padding:12px 16px; border:1px solid var(--border);
  border-radius:10px; text-decoration:none; background:#fff;
  transition:border-color .15s, transform .15s, box-shadow .15s;
  max-width:48%;
}
.mod-nav-btn:hover{ border-color:var(--gold); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.06); }
.mod-nav-next{ text-align:right; background:var(--gold); border-color:var(--gold); margin-left:auto; }
.mod-nav-label{ font-family:'DM Sans',sans-serif; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-dark); display:block; }
.mod-nav-title{ font-size:13px; color:var(--ink2); line-height:1.3; display:block; }
.mod-nav-next .mod-nav-label{ color:#fff; }
.mod-nav-next .mod-nav-title{ color:rgba(255,255,255,.92); }

@media (max-width:640px){
  .mod-nav{
    flex-direction:column;
    padding:20px 16px 0;
    gap:10px;
  }
  .mod-nav-btn{
    max-width:100%;
    width:100%;
    margin-left:0 !important;
  }
  .mod-nav-next{
    text-align:left;
    margin-left:0 !important;
  }
}

/* === NAVEGACIÓN SUPERIOR — contenida === */
.mod-nav-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; max-width:1040px; margin:0 auto 8px; padding:10px 20px 14px;
  border-bottom:1px solid var(--border);
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600;
}
.mod-nav-top a{ color:var(--gold-dark); text-decoration:none; white-space:nowrap; }
.mod-nav-top a:hover{ text-decoration:underline; }
.mod-nav-top-center{ color:var(--ink3) !important; font-weight:400; overflow:hidden; text-overflow:ellipsis; }

/* === BOTÓN SUBIR — reposicionado para no tapar nada === */
#btn-subir{
  position:fixed; bottom:90px; right:24px; z-index:40;
  width:42px; height:42px; border-radius:50%;
  background:rgba(26,26,24,.85); color:#fff; border:none; cursor:pointer;
  font-size:18px; box-shadow:0 3px 12px rgba(0,0,0,.2);
  transition:transform .15s, background .15s; backdrop-filter:blur(4px);
}
#btn-subir:hover{ transform:translateY(-3px); background:var(--gold); }

@media (max-width:640px){
  .mod-nav{ flex-direction:column; padding:20px 16px 0; }
  .mod-nav-btn{ max-width:100%; }
  .mod-nav-top-center{ display:none; }
  #btn-subir{ display:none; }
}
/* Bloqueo de contenido */
.modulo-bloqueado{ cursor:not-allowed; position:relative; }
.modulo-bloqueado .mod-header{ background:#fff; border:1px solid var(--border); }
.modulo-bloqueado .mod-title{ color:var(--ink2); }
.modulo-bloqueado .mod-subtitle{ color:var(--gold-dark); font-weight:600; }
.modulo-bloqueado .mod-num,
.modulo-bloqueado .mod-toggle{
  opacity:1;
  font-size:18px;
  color:var(--gold-dark);
}
.bloqueo-aviso{
  text-align:center; padding:48px 24px; background:var(--paper2);
  border:1px dashed var(--border); border-radius:12px;
}
.bloqueo-icono{ font-size:42px; margin-bottom:12px; }
.bloqueo-aviso h3{ font-family:'DM Serif Display',serif; font-size:22px; margin-bottom:10px; color:var(--ink); }
.bloqueo-aviso p{ color:var(--ink2); max-width:440px; margin:0 auto 18px; line-height:1.6; }
.bloqueo-btn{
  display:inline-block; background:var(--gold); color:#fff; text-decoration:none;
  padding:13px 28px; border-radius:8px; font-family:'DM Sans',sans-serif; font-weight:600;
}
.bloqueo-btn:hover{ background:var(--gold-dark); }

/* ===================================================
   CAPA DE REFINAMIENTO PREMIUM — v2 (columna más ancha)
   =================================================== */

/* 1. ANCHO DE LECTURA */
.mod-body > div:last-child{
  max-width:1040px;
  margin-left:auto;
  margin-right:auto;
}

/* 2. ESCALA DE TEXTO UNIFICADA */
.mod-body > div:last-child > p,
.theory-text,
.insight-text,
.practice-text,
.tip-text,
.lesson-desc,
.fundamento-body,
.checklist li,
.flow-vertical .flow-step > div{
  font-size:16px;
  font-weight:400;
  line-height:1.72;
}

.mod-body > div:last-child > p{
  color:var(--ink);
  padding:0;
  margin-bottom:20px;
}

/* 3. RITMO VERTICAL COHERENTE */
.mod-body .theory,
.mod-body .insight,
.mod-body .practice,
.mod-body .tip,
.mod-body .lesson,
.mod-body .fundamento,
.mod-body .comp-table-wrap,
.mod-body .flow-vertical,
.mod-body .kpi-row,
.mod-body .framework,
.mod-body .warning{
  margin-top:28px;
  margin-bottom:28px;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}

/* 4. TÍTULOS DE LOS BLOQUES */
.theory-title,
.fundamento-title{
  font-size:19px;
  line-height:1.3;
  margin-bottom:12px;
}
.lesson-title{ font-size:16px; }

/* 5. TEXTO EN BLOQUES OSCUROS */
.theory-text,
.fundamento-body,
.insight-text{
  color:rgba(255,255,255,0.82);
}

/* 6. CABECERA DE PILAR */
.pillar-header{ padding:24px 0 8px; margin-bottom:20px; }
.pillar-header h2{ font-size:30px; margin-bottom:10px; }
.pillar-header p{ font-size:17px; max-width:840px; }

/* 7. CONTENEDOR DEL MÓDULO */
.mod-body{ padding:32px 40px; }

/* 8. LISTAS */
.checklist{ gap:12px; margin:20px auto; max-width:1000px; }

/* Tablas */
.mod-body .comp-table{ font-size:15px; }
.mod-body .comp-table td{ padding:12px 14px; line-height:1.5; }

/* ===================================================
   CAPA DE EMPAQUE — visible en cualquier monitor
   =================================================== */

/* Módulo: sombra marcada que lo asienta */
.module{
  border:1px solid rgba(26,26,24,0.12);
  border-radius:22px;
  box-shadow:0 2px 8px rgba(26,26,24,0.04), 0 16px 48px rgba(26,26,24,0.09);
  overflow:hidden;
}

/* Tarjetas internas */
.lesson,
.framework{
  border:1px solid rgba(26,26,24,0.20);
  border-radius:12px;
  box-shadow:0 2px 10px rgba(26,26,24,0.10);
  overflow:hidden;
}
.lesson-header,
.framework-header{
  background:var(--paper2);
  border-bottom:1px solid rgba(26,26,24,0.12);
}

/* Tablas: contorno, sombra, filas alternas, y SCROLL en móvil */
.comp-table-wrap{
  border:1px solid rgba(26,26,24,0.20);
  border-radius:12px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  box-shadow:0 2px 10px rgba(26,26,24,0.10);
}
.comp-table-wrap .comp-table{ margin:0; min-width:560px; }
.comp-table tbody tr:nth-child(even){ background:rgba(26,26,24,0.03); }

/* Cajas claras */
.practice,
.tip,
.who-banner,
.learning-box,
.kpi-card{
  border:1px solid rgba(26,26,24,0.16);
  box-shadow:0 2px 10px rgba(26,26,24,0.07);
}

/* Pasos verticales */
.flow-vertical .flow-step{
  border:1px solid rgba(26,26,24,0.16);
  box-shadow:0 2px 10px rgba(26,26,24,0.07);
}
@media (max-width:640px){
  .comp-table-wrap{
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(26,26,24,0.12), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(26,26,24,0.12), transparent) 100% 0;
    background-repeat:no-repeat;
    background-size:40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment:local,local,scroll,scroll;
  }
}
/* === BDM LANDING / PAGE INTRO === */
.bdm-hero {
  background: var(--dark-surface);
  padding: 52px 0 44px;
  margin: 0 -24px;
  position: relative;
  overflow: hidden;
}

.bdm-hero__inner,
.bdm-section__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.bdm-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}

.bdm-eyebrow,
.bdm-section-label,
.bdm-tools__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bdm-eyebrow {
  display: inline-block;
  color: var(--gold);
  background: rgba(200,146,42,0.12);
  border: 1px solid rgba(200,146,42,0.25);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 16px;
  letter-spacing: .2em;
}

.bdm-hero__title,
.bdm-section-title,
.bdm-stat strong,
.bdm-pillar__num {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
}

.bdm-hero__title {
  font-size: clamp(22px,3.2vw,36px);
  color: #fff;
  line-height: 1.15;
  margin-bottom: 12px;
}

.bdm-hero__text {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,0.62);
  line-height: 1.75;
  margin-bottom: 22px;
}

.bdm-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 130px;
}

.bdm-stat {
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}

.bdm-stat strong {
  display: block;
  font-size: 28px;
  color: var(--gold);
  line-height: 1;
}

.bdm-stat span {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,.5);
  margin-top: 2px;
}

.bdm-audience {
  background: var(--paper2);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
  margin: 0 -24px 36px;
}

.bdm-section-label {
  color: var(--ink3);
  margin-bottom: 12px;
}

.bdm-check-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(210px,1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
}

.bdm-check-grid li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink2);
}

.bdm-check-grid li::before {
  content: '✓';
  color: var(--gold);
  font-size: 14px;
  margin-top: 1px;
  flex-shrink: 0;
}

.bdm-learning {
  margin-bottom: 36px;
}

.bdm-section-title {
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 6px;
}

.bdm-section-subtitle {
  font-size: 14px;
  font-weight: 300;
  color: var(--ink3);
  margin-bottom: 20px;
}

.bdm-pillar-list {
  display: flex;
  flex-direction: column;
}

.bdm-pillar {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.bdm-pillar__num {
  font-size: 20px;
  text-align: center;
  padding-top: 2px;
}

.bdm-pillar h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}

.bdm-pillar p {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink3);
}

.color-gold { color: var(--gold); }
.color-blue-soft { color: #6b9ecc; }
.color-teal { color: var(--teal); }
.color-coral { color: var(--coral); }
.color-green { color: var(--green); }
.color-purple { color: var(--purple); }
.color-gold-soft { color: #c8a45a; }

.bdm-tools {
  background: linear-gradient(135deg,#1a1500,#0a0a08);
  border-radius: 12px;
  padding: 28px;
  margin-bottom: 32px;
}

.bdm-tools__label {
  color: var(--gold);
  margin-bottom: 14px;
}

.bdm-tools__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
  gap: 10px;
}

.bdm-tool-card {
  background: rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
}

.bdm-tool-card__icon {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

.bdm-tool-card h3 {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 3px;
}

.bdm-tool-card p {
  font-size: 11px;
  font-weight: 300;
  color: rgba(255,255,255,.5);
}

.bdm-testimonial {
  border-left: 3px solid var(--gold);
  padding: 16px 20px;
  background: var(--paper2);
  border-radius: 0 8px 8px 0;
  margin-bottom: 32px;
}

.bdm-testimonial p {
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 10px;
}

.bdm-testimonial cite {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  font-style: normal;
}

@media(max-width:640px) {
  .bdm-hero,
  .bdm-audience {
    margin-left: -14px;
    margin-right: -14px;
  }

  .bdm-hero__inner {
    grid-template-columns: 1fr;
  }

  .bdm-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    min-width: 0;
  }
}

/* =====================================================
BDM INTRO PAGE WRAPPER
===================================================== */

.bdm-intro-shell {
  max-width: 1040px;
  margin: 24px auto 40px;
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(26,26,24,0.12);
  border-radius: 22px;
  box-shadow:
    0 24px 70px rgba(26,26,24,0.12),
    0 2px 8px rgba(26,26,24,0.05);
  overflow: hidden;
}

body.dark .bdm-intro-shell {
  background: rgba(255,255,255,0.035);
  border-color: rgba(255,255,255,0.08);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.38),
    0 2px 8px rgba(0,0,0,0.22);
}


/* =====================================================
HERO
===================================================== */

.bdm-hero {
  background: var(--dark-surface);
  padding: 56px 40px 48px;
  margin: 0;
}

.bdm-hero-inner {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 40px;
  align-items: center;
}

.bdm-hero-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(200,146,42,0.12);
  border: 1px solid rgba(200,146,42,0.25);
  border-radius: 20px;
  padding: 5px 15px;
  margin-bottom: 18px;
}

.bdm-hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(30px, 4.4vw, 42px);
  font-weight: 400;
  color: #fff;
  line-height: 1.08;
  margin-bottom: 18px;
}

.bdm-hero p {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,0.66);
  line-height: 1.8;
}

.bdm-hero-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bdm-stat {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 16px 18px;
  text-align: center;
}

.bdm-stat strong {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-size: 30px;
  line-height: 1;
  color: var(--gold);
  font-weight: 400;
  margin-bottom: 5px;
}

.bdm-stat span {
  font-size: 11px;
  color: rgba(255,255,255,.55);
}


/* =====================================================
"ESTE BLOQUE ES PARA TI SI..."
===================================================== */

.bdm-for-you {
  background: rgba(26,26,24,0.035);
  border-bottom: 1px solid var(--border);
  padding: 28px 40px 30px;
}

.bdm-section-kicker {
  max-width: 820px;
  margin: 0 auto 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink3);
}

.bdm-for-grid {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 22px;
}

.bdm-check-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.bdm-check-item span {
  color: var(--gold);
  font-size: 15px;
  line-height: 1.5;
  flex-shrink: 0;
}

.bdm-check-item p {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink2);
  line-height: 1.65;
}


/* =====================================================
COMMON INTRO SECTIONS
===================================================== */

.intro-section {
  padding: 48px 40px 0;
}

.intro-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 34px;
}

.intro-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.intro-heading h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 12px;
}

.intro-heading p {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink3);
  line-height: 1.8;
}

.intro-heading.dark h2 {
  color: #fff;
}

.intro-heading.dark p {
  color: rgba(255,255,255,.58);
}


/* =====================================================
BEFORE / AFTER
===================================================== */

.before-after {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  gap: 18px;
  align-items: stretch;
}

.ba-card {
  border-radius: 14px;
  padding: 28px;
}

.ba-before {
  background: #fff;
  border: 1px solid var(--border);
}

.ba-after {
  background: linear-gradient(135deg,#161614,#1d1d1b);
}

.ba-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.ba-before .ba-label {
  color: var(--coral);
}

.ba-item {
  margin-bottom: 18px;
}

.ba-item:last-child {
  margin-bottom: 0;
}

.ba-item h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.ba-item p {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink3);
  line-height: 1.65;
}

.ba-after .ba-item h3 {
  color: #fff;
}

.ba-after .ba-item p {
  color: rgba(255,255,255,.58);
}

.ba-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Serif Display', serif;
  font-size: 36px;
  color: var(--gold);
}


/* =====================================================
ROADMAP
===================================================== */

.bdm-roadmap {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.road-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 14px;
  text-align: center;
  min-height: 158px;
}

.road-icon {
  font-size: 26px;
  margin-bottom: 12px;
}

.road-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.road-card p {
  font-size: 12.5px;
  font-weight: 300;
  color: var(--ink3);
  line-height: 1.55;
}


/* =====================================================
TOOLS BLOCK
===================================================== */

.bdm-tools-block {
  margin: 48px 40px 0;
  background: linear-gradient(135deg,#171512,#0e0e0c);
  border-radius: 18px;
  padding: 46px 40px;
  box-shadow: 0 18px 40px rgba(26,26,24,0.18);
}

.bdm-tools-grid {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.bdm-tool-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 22px 18px;
  min-height: 165px;
}

.bdm-tool-icon {
  font-size: 24px;
  margin-bottom: 14px;
}

.bdm-tool-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

.bdm-tool-card p {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,.58);
  line-height: 1.65;
}


/* =====================================================
QUOTE
===================================================== */

.quote-section {
  max-width: 860px;
  margin: 78px auto 0;
  padding: 0 40px;
  text-align: center;
}

.quote-main {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 24px;
}

.quote-section p {
  max-width: 720px;
  margin: 0 auto;
  font-size: 16px;
  font-weight: 300;
  color: var(--ink3);
  line-height: 1.8;
}


/* =====================================================
CAREER
===================================================== */

.career-path {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.career-path span {
  color: var(--gold);
  font-size: 20px;
}

.career-pill {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.career-pill.final {
  background: var(--ink);
  color: #fff;
}


/* =====================================================
FINAL CTA
===================================================== */

.final-intro-cta {
  margin: 48px 40px 40px;
  background: var(--ink);
  border-radius: 18px;
  padding: 52px 42px;
  text-align: center;
}

.final-intro-cta h2 {
  max-width: 780px;
  margin: 0 auto 18px;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 400;
  color: #fff;
  line-height: 1.18;
}

.final-intro-cta p {
  max-width: 720px;
  margin: 0 auto 28px;
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,.62);
  line-height: 1.9;
}

.intro-main-btn {
  background: var(--gold);
  color: #111;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.intro-main-btn:hover {
  opacity: .88;
}


/* =====================================================
DARK MODE SUPPORT
===================================================== */

body.dark .bdm-for-you {
  background: rgba(255,255,255,0.025);
}

body.dark .ba-before,
body.dark .road-card,
body.dark .career-pill {
  background: #1e1e1c;
  border-color: rgba(255,255,255,.08);
}

body.dark .ba-item h3,
body.dark .road-card h3,
body.dark .career-pill {
  color: var(--ink);
}

body.dark .career-pill.final {
  background: #0a0a08;
  color: #fff;
}


/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:900px) {
  .bdm-intro-shell {
    margin: 20px auto 60px;
    border-radius: 16px;
  }

  .bdm-hero-inner {
    grid-template-columns: 1fr;
  }

  .bdm-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .bdm-for-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .before-after {
    grid-template-columns: 1fr;
  }

  .ba-arrow {
    transform: rotate(90deg);
    height: 34px;
  }

  .bdm-roadmap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bdm-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:560px) {
  .bdm-intro-shell {
    margin: 12px 0 50px;
    border-radius: 12px;
  }

  .bdm-hero {
    padding: 44px 0 42px;
  }

  .bdm-hero-inner,
  .bdm-for-you,
  .intro-section,
  .quote-section {
    padding-left: 22px;
    padding-right: 22px;
  }

  .bdm-hero-stats,
  .bdm-for-grid,
  .bdm-roadmap,
  .bdm-tools-grid {
    grid-template-columns: 1fr;
  }

  .bdm-tools-block,
  .final-intro-cta {
    margin-left: 22px;
    margin-right: 22px;
    padding: 34px 22px;
    border-radius: 14px;
  }

  .ba-card {
    padding: 22px;
  }

  .career-path {
    flex-direction: column;
  }

  .career-path span {
    transform: rotate(90deg);
  }
}
/* =====================================================
QUÉ APRENDERÁS · PILLAR LIST — versión más compacta
===================================================== */

.bdm-learn-block {
  padding: 48px 40px 0;
}

.bdm-pillar-list {
  max-width: 860px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(26,26,24,0.06);
}

.bdm-pillar-item{
  display:grid;
  grid-template-columns:38px 1fr 28px;
  gap:12px;
  padding:15px 22px;
  border-bottom:1px solid var(--border);
  align-items:center;
  cursor:pointer;
  text-decoration:none;
  transition:background .12s, border-left .12s;
  border-left:3px solid transparent;
}
.bdm-pillar-item:last-child{ border-bottom:none; }
.bdm-pillar-item:hover{
  background:rgba(200,146,42,0.06);
  border-left-color:var(--gold);
}
.bdm-pillar-item:hover .bdm-pillar-num{ color:var(--gold-dark); }
.bdm-pillar-item h3{
  font-size:14px; font-weight:600;
  color:var(--ink); margin:0 0 3px; line-height:1.35;
  transition:color .12s;
}
.bdm-pillar-item:hover h3{ color:var(--gold-dark); }
.bdm-pillar-item p{
  font-size:13px; font-weight:300;
  color:var(--ink3); line-height:1.55; margin:0;
}
.bdm-pillar-item::after{
  content:'›';
  font-size:20px;
  color:var(--border2);
  transition:color .12s, transform .12s;
  justify-self:end;
}
.bdm-pillar-item:hover::after{
  color:var(--gold);
  transform:translateX(3px);
}


/* DARK MODE */

body.dark .bdm-pillar-list {
  background: #1e1e1c;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 12px 34px rgba(0,0,0,0.24);
}

body.dark .bdm-pillar-item {
  border-bottom-color: rgba(255,255,255,.08);
}

body.dark .bdm-pillar-item:hover {
  background: rgba(255,255,255,0.025);
}


/* RESPONSIVE */

@media(max-width:560px) {
  .bdm-learn-block {
    padding: 44px 22px 0;
  }

  .bdm-pillar-item {
    grid-template-columns: 32px 1fr;
    gap: 10px;
    padding: 14px 16px;
  }

  .bdm-pillar-num {
    font-size: 17px;
  }
}
/* =====================================================
   CSS ADICIONAL PORTADA BDM — añadir al final de
   academia.css (o del bloque de estilos BDM existente)
===================================================== */

/* Hero — CTA y estimación de tiempo */
.bdm-hero-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.bdm-hero-cta .intro-main-btn {
  text-decoration: none;
  display: inline-block;
}
.bdm-hero-time {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,.42);
  letter-spacing: .02em;
}

/* "No es para ti si" */
.bdm-not-for-you {
  background: rgba(26,26,24,0.025);
  border-bottom: 1px solid var(--border);
  padding: 20px 40px 24px;
}
body.dark .bdm-not-for-you {
  background: rgba(255,255,255,0.018);
}

/* Roadmap — etiqueta de pilares */
.road-pilares {
  display: inline-block;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(200,146,42,0.10);
  border: 1px solid rgba(200,146,42,0.22);
  border-radius: 20px;
  padding: 3px 10px;
}

/* Muestra de contenido */
.bdm-sample-grid {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.bdm-sample-card {
  border-radius: 14px;
  padding: 28px;
  border: 1px solid var(--border);
}
.bdm-sample-dark {
  background: linear-gradient(135deg, #161614, #1d1d1b);
  border-color: rgba(255,255,255,.07);
}
.bdm-sample-light {
  background: #fff;
}
.bdm-sample-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.bdm-sample-dark h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.25;
}
.bdm-sample-light h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.25;
}
.bdm-sample-dark p {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,.68);
  line-height: 1.75;
  margin-bottom: 16px;
}
.bdm-sample-light p {
  font-size: 14px;
  font-weight: 300;
  color: var(--ink2);
  line-height: 1.75;
  margin-bottom: 16px;
}
.bdm-sample-light p strong {
  color: var(--ink);
  font-weight: 600;
}
.bdm-sample-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(200,146,42,0.15);
  color: var(--gold);
  border: 1px solid rgba(200,146,42,0.25);
  border-radius: 20px;
  padding: 4px 12px;
}
.bdm-sample-tag-teal {
  background: rgba(42,107,107,0.15);
  color: var(--teal);
  border-color: rgba(42,107,107,0.25);
}

/* FAQ */
.bdm-faq-section {
  padding-bottom: 0;
}
.bdm-faq-grid {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.bdm-faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 2px 8px rgba(26,26,24,0.05);
}
.bdm-faq-item h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.35;
}
.bdm-faq-item p {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink2);
  line-height: 1.7;
}

/* Dark mode — nuevos componentes */
body.dark .bdm-sample-light,
body.dark .bdm-faq-item {
  background: #1e1e1c;
  border-color: rgba(255,255,255,.08);
}
body.dark .bdm-sample-light h3 { color: var(--ink); }
body.dark .bdm-sample-light p { color: var(--ink2); }

/* Responsive — nuevos componentes */
@media (max-width: 900px) {
  .bdm-sample-grid,
  .bdm-faq-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .bdm-not-for-you {
    padding-left: 22px;
    padding-right: 22px;
  }
  .bdm-hero-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .bdm-sample-grid,
  .bdm-faq-grid {
    grid-template-columns: 1fr;
  }
  .bdm-sample-card { padding: 22px; }
  .bdm-faq-item { padding: 18px 20px; }
}
/* =====================================================
   CSS PÁGINAS DE PILAR — añadir al final de academia.css
===================================================== */

/* SHELL */
.pilar-intro-shell {
  background: rgba(255,255,255,0.52);
  border: 1px solid rgba(26,26,24,0.11);
  border-radius: 22px;
  box-shadow: 0 2px 8px rgba(26,26,24,0.04), 0 16px 48px rgba(26,26,24,0.09);
  overflow: hidden;
  max-width: 1040px;
  margin: 0 auto 40px;
  padding: 0 0 40px;
}

/* HERO DEL PILAR */
.pilar-hero{
  background: var(--dark-surface);
  margin: 0 0 32px;
  padding: 44px 40px 32px;
}

/* Elementos internos: espaciado horizontal */
.pilar-alert,
.pilar-section,
.pilar-modules-preview,
.pilar-concept,
.pilar-learns,
.pilar-prev-next{
  margin-left: 40px;
  margin-right: 40px;
}
.pilar-next-hint:not(.pilar-prev-next .pilar-next-hint){
  margin-left: 40px;
  margin-right: 40px;
}
.pilar-hero-badge{
  display:inline-block;
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); background:rgba(200,146,42,.12);
  border:1px solid rgba(200,146,42,.25); border-radius:20px; padding:4px 14px;
  margin-bottom:14px;
}
.pilar-hero-title{
  font-family:'DM Serif Display',serif;
  font-size:clamp(26px,4vw,36px); font-weight:400;
  color:#fff; line-height:1.12; margin-bottom:12px;
}
.pilar-hero-sub{
  font-size:16px; font-weight:300;
  color:rgba(255,255,255,.65); line-height:1.75;
  max-width:720px; margin-bottom:18px;
}
.pilar-meta-row{ display:flex; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.pilar-meta-item{ font-size:12px; font-weight:500; color:rgba(255,255,255,.45); }
.pilar-hero-cta{ margin-top:4px; }
.pilar-hero-cta .intro-main-btn{
  text-decoration:none; display:inline-block;
}



/* ALERTAS */
.pilar-alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--paper2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin-bottom: 28px;
  font-size: 14px;
  font-weight: 300;
  color: var(--ink2);
  line-height: 1.65;
}
.pilar-alert-warning { border-left-color: var(--coral); }
.pilar-alert-gold { border-left-color: var(--gold); }
.pilar-alert strong { color: var(--ink); font-weight: 600; }
.pilar-alert-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

/* SECCIÓN DE CONTEXTO */
.pilar-section {
  margin-bottom: 32px;
}
.pilar-section-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 10px;
}
.pilar-section-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 12px;
}
.pilar-section-text {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink2);
  line-height: 1.78;
}

/* LISTA DE MÓDULOS */
.pilar-modules-preview {
  margin-bottom: 32px;
}
.pilar-modules-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 14px;
}
.pilar-module-list {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(26,26,24,0.06);
}
.pilar-module-item {
  display: grid;
  grid-template-columns: 48px 1fr 28px;
  gap: 0;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: background .12s, border-left-color .12s;
  cursor: pointer;
}
.pilar-module-item:last-child { border-bottom: none; }
.pilar-module-item:hover {
  background: rgba(200,146,42,0.06);
  border-left-color: var(--gold);
}
.pilar-module-num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Serif Display', serif;
  font-size: 19px;
  font-weight: 400;
  color: var(--gold);
  padding: 18px 0;
  border-right: none;
  flex-shrink: 0;
  line-height: 1;
  transition: color .12s;
}
.pilar-module-item:hover .pilar-module-num { color: var(--gold-dark); }
.pilar-module-body {
  padding: 14px 18px 14px 14px;
}
.pilar-module-body h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.35;
  text-decoration: none;
  transition: color .12s;
}
.pilar-module-item:hover .pilar-module-body h3 { color: var(--gold-dark); }
.pilar-module-body p {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink3);
  line-height: 1.55;
  margin: 0;
}
.pilar-module-item::after {
  content: '›';
  font-size: 20px;
  color: var(--border2);
  justify-self: end;
  padding-right: 18px;
  transition: color .12s, transform .12s;
}
.pilar-module-item:hover::after {
  color: var(--gold);
  transform: translateX(3px);
}

/* Eliminar subrayado heredado del navegador en enlaces */
a.pilar-module-item,
a.pilar-module-item:visited,
a.pilar-module-item:hover {
  text-decoration: none;
  color: inherit;
}
/* CONCEPTO CLAVE */
.pilar-concept {
  background: linear-gradient(135deg, #161614, #1d1d1b);
  border-radius: 14px;
  padding: 26px 28px;
  margin-bottom: 32px;
}
.pilar-concept-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.pilar-concept h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.25;
}
.pilar-concept p {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,.72);
  line-height: 1.75;
  margin: 0;
}

/* LO QUE APRENDERÁS */
.pilar-learns {
  background: var(--paper2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 26px;
  margin-bottom: 28px;
}
.pilar-learns-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 16px;
}
.pilar-learns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.pilar-learn-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink2);
  line-height: 1.55;
}
.pilar-learn-item span {
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* NAVEGACIÓN ENTRE PILARES */
.pilar-prev-next {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}
.pilar-prev-hint,
.pilar-next-hint {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--ink2);
  box-shadow: 0 1px 3px rgba(26,26,24,0.04);
}
.pilar-prev-hint span,
.pilar-next-hint span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.pilar-prev-hint strong,
.pilar-next-hint strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

/* HINT FINAL (pilar 10 o sin siguiente) */
.pilar-next-hint:not(.pilar-prev-next .pilar-next-hint) {
  margin-bottom: 8px;
}
.pilar-next-hint.pilar-final {
  background: var(--ink);
  border-color: var(--ink);
  margin-bottom: 0;
}
.pilar-next-hint.pilar-final span {
  color: var(--gold);
}
.pilar-next-hint.pilar-final strong {
  color: rgba(255,255,255,.85);
}

/* DARK MODE */
body.dark .pilar-module-list,
body.dark .pilar-prev-hint,
body.dark .pilar-next-hint {
  background: #1e1e1c;
  border-color: rgba(255,255,255,.08);
}
body.dark .pilar-module-item:hover {
  background: rgba(255,255,255,0.025);
}
body.dark .pilar-learns {
  background: #282826;
  border-color: rgba(255,255,255,.07);
}
body.dark .pilar-module-num { border-right-color: rgba(255,255,255,.08); }
body.dark .pilar-module-item { border-bottom-color: rgba(255,255,255,.08); }

/* RESPONSIVE */
@media(max-width:640px){
  .pilar-intro-shell{
    border-radius:0; border-left:none; border-right:none;
    margin:0 -20px 40px; box-shadow:none;
  }
  .pilar-hero{
    padding:32px 22px 24px;
    margin:0 0 24px;
  }
  .pilar-alert,
  .pilar-section,
  .pilar-modules-preview,
  .pilar-concept,
  .pilar-learns,
  .pilar-prev-next,
  .pilar-next-hint:not(.pilar-prev-next .pilar-next-hint){
    margin-left:22px;
    margin-right:22px;
  }
}
/* === TOPBAR: progreso de módulo === */
#topbar-progreso{
  display:flex; flex-direction:column; align-items:flex-end; gap:5px;
}
#topbar-pos{
  font-size:10px; font-weight:600; letter-spacing:.08em;
  color:rgba(255,255,255,.55);
  background:rgba(200,146,42,.15);
  border:1px solid rgba(200,146,42,.25);
  border-radius:20px; padding:2px 10px;
}
#topbar-prog-track{
  width:140px; height:3px;
  background:rgba(255,255,255,.12); border-radius:2px; overflow:hidden;
}
#topbar-prog-fill{
  height:100%; background:var(--gold);
  border-radius:2px; transition:width .4s ease;
}

/* === BREADCRUMB === */
#mod-breadcrumb{
  display:flex; align-items:center; gap:8px;
  max-width:1040px; margin:0 auto; padding:10px 20px 12px;
  font-family:'DM Sans',sans-serif; font-size:13px;
  border-bottom:1px solid var(--border);
}
#mod-breadcrumb a{
  color:var(--bloque-color-dark, var(--gold-dark)); text-decoration:none; font-weight:500;
}
#mod-breadcrumb a:hover{ text-decoration:underline; color:var(--bloque-color, var(--gold)); }
#mod-breadcrumb span{ color:var(--ink3); }
#mod-breadcrumb-current{
  color:var(--ink); font-weight:500;
  white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:340px;
}
#mod-breadcrumb-pos{
  margin-left:auto; font-size:12px; font-weight:600;
  color:var(--bloque-color, var(--gold));
  background:var(--bloque-color-bg, rgba(200,146,42,0.15));
  border:1px solid var(--bloque-color-border, rgba(200,146,42,0.25));
  border-radius:20px; padding:1px 9px;
  white-space:nowrap; flex-shrink:0;
}

@media(max-width:640px){
  #topbar-progreso{ display:none; }
  #mod-breadcrumb-current{ max-width:160px; }
  #mod-breadcrumb-pos{ display:none; }
}
a.pilar-module-item,
a.pilar-module-item:visited,
a.pilar-module-item:hover {
  text-decoration: none;
  color: inherit;
}
/* === PERFIL DEL ALUMNO === */
.perfil-header{
  display:flex; align-items:center; gap:20px;
  padding:28px 0 32px; border-bottom:1px solid var(--border); margin-bottom:36px;
}
.perfil-avatar{
  width:56px; height:56px; border-radius:50%;
  background:var(--gold); color:#fff;
  font-family:'DM Serif Display',serif; font-size:24px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.perfil-nombre{ font-family:'DM Serif Display',serif; font-size:26px; font-weight:400; color:var(--ink); margin-bottom:4px; }
.perfil-email{ font-size:14px; color:var(--ink3); font-weight:300; }

.perfil-seccion{ margin-bottom:44px; }
.perfil-seccion-kicker{ font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:6px; }
.perfil-seccion-titulo{ font-family:'DM Serif Display',serif; font-size:22px; font-weight:400; color:var(--ink); margin-bottom:20px; }

.perfil-bloques-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.perfil-bloque-card{
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px 24px;
  box-shadow:0 2px 8px rgba(26,26,24,0.05); display:flex; flex-direction:column; gap:14px;
}
.perfil-bloque-card.sin-acceso{ opacity:.7; }
.perfil-bloque-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.perfil-bloque-nombre{ font-size:15px; font-weight:600; color:var(--ink); }
.perfil-badge-acceso{
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--green-light); color:var(--green); border-radius:20px; padding:3px 10px;
}
.perfil-badge-sin-acceso{
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--paper2); color:var(--ink3); border-radius:20px; padding:3px 10px;
}
.perfil-progreso-wrap{ display:flex; flex-direction:column; gap:6px; }
.perfil-progreso-track{ height:5px; background:var(--paper2); border-radius:3px; overflow:hidden; }
.perfil-progreso-fill{ height:100%; background:var(--gold); border-radius:3px; transition:width .4s; }
.perfil-progreso-texto{ font-size:12px; color:var(--ink3); font-weight:400; }
.perfil-btn-continuar{
  display:inline-block; background:var(--gold); color:#fff; text-decoration:none;
  padding:10px 20px; border-radius:8px; font-family:'DM Sans',sans-serif;
  font-size:13px; font-weight:600; text-align:center; margin-top:auto;
}
.perfil-btn-continuar:hover{ background:var(--gold-dark); }
.perfil-btn-ver{
  display:inline-block; background:transparent; color:var(--ink2); text-decoration:none;
  padding:9px 18px; border-radius:8px; font-size:13px; font-weight:500;
  border:1px solid var(--border); text-align:center; margin-top:auto;
}
.perfil-btn-ver:hover{ border-color:var(--gold); color:var(--gold-dark); }
.perfil-bloque-desc{ font-size:13px; color:var(--ink3); font-weight:300; line-height:1.6; }

.perfil-placeholder{
  background:var(--paper2); border:1px dashed var(--border2); border-radius:12px;
  padding:36px 24px; text-align:center;
}
.perfil-placeholder-icono{ font-size:36px; margin-bottom:12px; }
.perfil-placeholder p{ font-size:14px; color:var(--ink2); font-weight:300; line-height:1.7; max-width:480px; margin:0 auto; }

.perfil-datos-card{
  background:#fff; border:1px solid var(--border); border-radius:12px;
  overflow:hidden; box-shadow:0 2px 8px rgba(26,26,24,0.05);
}
.perfil-dato-row{
  display:flex; align-items:center; gap:16px;
  padding:14px 20px; border-bottom:1px solid var(--border);
}
.perfil-dato-row:last-child{ border-bottom:none; }
.perfil-dato-label{ font-size:13px; font-weight:600; color:var(--ink3); width:90px; flex-shrink:0; }
.perfil-dato-valor{ font-size:14px; color:var(--ink); flex:1; }
.perfil-dato-editar{ font-size:12px; color:var(--gold-dark); text-decoration:none; font-weight:500; flex-shrink:0; }
.perfil-dato-editar:hover{ text-decoration:underline; }

.perfil-btn-logout{
  background:transparent; border:1px solid var(--border); border-radius:8px;
  padding:10px 20px; font-family:'DM Sans',sans-serif; font-size:13px;
  color:var(--ink3); cursor:pointer; font-weight:500;
}
.perfil-btn-logout:hover{ border-color:var(--coral); color:var(--coral); }

@media(max-width:640px){
  .perfil-bloques-grid{ grid-template-columns:1fr; }
  .perfil-header{ flex-direction:column; align-items:flex-start; gap:12px; }
}
/* === EDITAR PERFIL === */
.perfil-edit-seccion{ margin-bottom:40px; }
.perfil-edit-titulo{
  font-family:'DM Serif Display',serif; font-size:20px;
  font-weight:400; color:var(--ink); margin-bottom:16px;
}
.perfil-edit-card{
  background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:24px 28px;
  box-shadow:0 2px 8px rgba(26,26,24,0.05);
}
.perfil-campo{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.perfil-campo:last-child{ margin-bottom:0; }
.perfil-label{
  font-size:12px; font-weight:600; color:var(--ink3);
  letter-spacing:.04em; text-transform:uppercase;
}
.perfil-input{
  width:100%; padding:10px 14px;
  border:1px solid var(--border); border-radius:8px;
  font-family:'DM Sans',sans-serif; font-size:14px;
  color:var(--ink); background:#fff;
  transition:border-color .15s;
  box-sizing:border-box;
}
.perfil-input:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,146,42,0.1);
}
.perfil-input-error{ border-color:var(--coral); }
.perfil-error{ font-size:12px; color:var(--coral); margin:0; }
.perfil-alert-ok{
  background:var(--green-light); color:var(--green);
  border:1px solid rgba(42,107,72,0.2); border-radius:8px;
  padding:10px 14px; font-size:13px; font-weight:500;
  margin-bottom:16px;
}
.perfil-btn-guardar{
  background:var(--gold); color:#fff; border:none;
  border-radius:8px; padding:10px 24px;
  font-family:'DM Sans',sans-serif; font-size:13px;
  font-weight:600; cursor:pointer;
}
.perfil-btn-guardar:hover{ background:var(--gold-dark); }
.perfil-btn-eliminar{
  background:transparent; color:var(--coral);
  border:1px solid var(--coral); border-radius:8px;
  padding:10px 24px; font-family:'DM Sans',sans-serif;
  font-size:13px; font-weight:600; cursor:pointer;
}
.perfil-btn-eliminar:hover{ background:var(--coral); color:#fff; }

/* =====================================================
   HOME — añadir al final de academia.css
===================================================== */

.home-wrap{
  max-width:1100px; margin:0 auto; padding:24px 24px 0;
}

/* SHELL — mismo contenedor visual que bdm-intro-shell */
.home-shell{
  background:rgba(255,255,255,0.52);
  border:1px solid rgba(26,26,24,0.11);
  border-radius:22px;
  box-shadow:0 2px 8px rgba(26,26,24,0.04),0 16px 48px rgba(26,26,24,0.09);
  overflow:hidden;
  margin-bottom:0;
}

/* HERO */
.home-hero{
  background:var(--dark-surface);
  padding:56px 40px 48px;
}
.home-hero-inner{
  display:grid; grid-template-columns:1fr 200px; gap:40px; align-items:center;
}
.home-kicker{
  font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px;
}
.home-hero-title{
  font-family:'DM Serif Display',serif;
  font-size:clamp(28px,4vw,44px); font-weight:400;
  color:#fff; line-height:1.08; margin-bottom:16px;
}
.home-hero-title em{ color:var(--gold); font-style:normal; }
.home-hero-sub{
  font-size:15px; font-weight:300; color:rgba(255,255,255,.62);
  line-height:1.75; margin-bottom:28px; max-width:560px;
}
.home-hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.home-btn-primary{
  background:var(--gold); color:#fff; border:none;
  border-radius:8px; padding:12px 24px;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; cursor:pointer;
}
.home-btn-primary:hover{ background:var(--gold-dark); }
.home-btn-ghost{
  background:transparent; color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.2); border-radius:8px;
  padding:12px 24px; font-family:'DM Sans',sans-serif; font-size:14px; cursor:pointer;
}
.home-btn-ghost:hover{ border-color:rgba(255,255,255,.45); color:#fff; }
.home-hero-stats{ display:flex; flex-direction:column; gap:10px; }
.home-stat{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.05);
  border-radius:12px; padding:14px 16px; text-align:center;
}
.home-stat strong{
  display:block; font-family:'DM Serif Display',serif;
  font-size:24px; color:var(--gold); font-weight:400; line-height:1; margin-bottom:4px;
}
.home-stat span{ font-size:10px; color:rgba(255,255,255,.45); letter-spacing:.04em; }

/* SECTIONS */
.home-section{ padding:48px 48px 0; }
.home-section:last-of-type{ padding-bottom:0; }
.home-section-alt{ background:rgba(26,26,24,0.025); margin:48px -0px 0; padding:48px 48px; }
.home-section-head{ text-align:center; max-width:720px; margin:0 auto 32px; }
.home-section-kicker{
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-dark); margin-bottom:10px;
}
.home-section-title{
  font-family:'DM Serif Display',serif;
  font-size:clamp(22px,3vw,32px); font-weight:400; color:var(--ink);
  line-height:1.18; margin-bottom:10px;
}
.home-section-sub{
  font-size:14px; font-weight:300; color:var(--ink3); line-height:1.75;
}

/* BLOQUE CARDS */
.home-bloques-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
}
.home-bloque-card{
  background:#fff; border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
  box-shadow:0 2px 8px rgba(26,26,24,0.06);
}
.home-bloque-header{
  background:linear-gradient(135deg,#161614,#1d1d1b);
  padding:20px 22px;
}
.home-bloque-bdm{ border-bottom:3px solid #c0432a; }
.home-bloque-cm{ border-bottom:3px solid #2a6b6b; }
.home-bloque-op{ border-bottom:3px solid #3a7bd5; }
.home-bloque-dir{ border-bottom:3px solid #8b5e3c; }
.home-bloque-badge{
  display:inline-block; font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); background:rgba(200,146,42,.15);
  border:1px solid rgba(200,146,42,.3);
  border-radius:4px; padding:3px 8px; margin-bottom:10px;
}
.home-bloque-nombre{
  display:flex; align-items:center; gap:10px;
  font-family:'DM Serif Display',serif; font-size:20px; font-weight:400;
  color:var(--paper); margin-bottom:6px;
}
.home-bloque-desc{
  font-size:13px; font-weight:300; color:rgba(247,245,240,.58); line-height:1.65;
}
.home-bloque-body{ padding:18px 22px; }
.home-bloque-stats{
  display:flex; gap:0; margin-bottom:14px; padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.home-bloque-stats div{
  text-align:center; padding:0 10px;
  border-right:1px solid var(--border); flex:1;
}
.home-bloque-stats div:last-child{ border-right:none; }
.home-bloque-stats strong{
  display:block; font-size:18px; font-weight:700; margin-bottom:2px;
}
.home-bloque-stats span{ font-size:10px; color:var(--ink3); text-transform:uppercase; letter-spacing:.08em; }
.home-pilares-list{ margin-bottom:14px; }
.home-pilar-row{
  display:flex; align-items:center; gap:8px;
  padding:5px 0; border-bottom:1px solid var(--border); font-size:12px; color:var(--ink3);
}
.home-pilar-row span:first-child{
  font-family:'DM Serif Display',serif; font-size:14px; flex-shrink:0;
}
.home-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px; }
.home-tags span{
  font-size:11px; color:var(--ink3); background:var(--paper2);
  border-radius:4px; padding:2px 8px;
}
.home-bloque-btn{
  display:block; width:100%; color:#fff; border:none; border-radius:8px;
  padding:11px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600;
  cursor:pointer; text-align:center; text-decoration:none;
}
.home-bloque-btn:hover{ opacity:.88; }

/* PRÓXIMAMENTE */
.home-proximos-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
.home-proximo-card{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  overflow:hidden; opacity:.75; box-shadow:0 2px 6px rgba(26,26,24,0.04);
}
.home-proximo-header{
  background:var(--dark-surface); padding:18px 20px;
  border-bottom:2px dashed transparent;
}
.home-proximo-badge{
  display:inline-block; font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:4px; padding:3px 8px; margin-bottom:10px;
  border:1px solid transparent;
}
.home-proximo-body{ padding:14px 20px; }
.home-proximo-para{
  font-size:11px; font-weight:600; color:var(--ink3); margin-bottom:8px;
}
.home-proximo-item{
  font-size:12px; color:var(--ink3);
  padding:4px 0; border-bottom:1px solid var(--border);
  display:flex; gap:8px;
}
.home-proximo-nota{
  margin-top:10px; text-align:center;
  font-size:11px; color:var(--ink3);
}

/* DIFERENCIADORES */
.home-diferencias-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:22px;
  max-width:860px; margin:0 auto;
}
.home-diferencia-item{ display:flex; gap:16px; align-items:flex-start; }
.home-diferencia-icon{ font-size:22px; flex-shrink:0; margin-top:2px; }
.home-diferencia-titulo{ font-size:14px; font-weight:600; color:var(--ink); margin-bottom:4px; }
.home-diferencia-desc{ font-size:13px; font-weight:300; color:var(--ink3); line-height:1.6; }

/* TESTIMONIOS */
.home-testimonios-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.home-testimonio{
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:22px; box-shadow:0 2px 8px rgba(26,26,24,0.04);
}
.home-testimonio p{
  font-size:13px; font-weight:300; color:var(--ink2);
  line-height:1.75; font-style:italic; margin-bottom:14px;
}
.home-testimonio-autor strong{
  display:block; font-size:13px; font-weight:600; color:var(--ink);
}
.home-testimonio-autor span{ font-size:12px; color:var(--ink3); }

/* PRECIOS */
.home-precios-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  max-width:900px; margin:0 auto;
}
.home-precio-card{
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:24px; position:relative;
  box-shadow:0 2px 8px rgba(26,26,24,0.04);
}
.home-precio-destacado{ border:2px solid var(--gold); }
.home-precio-popular{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:#fff; font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:3px 12px; border-radius:4px;
}
.home-precio-label{ font-size:13px; font-weight:600; color:var(--ink3); margin-bottom:8px; }
.home-precio-num{
  font-family:'DM Serif Display',serif; font-size:34px; font-weight:400;
  color:var(--ink); margin-bottom:4px;
}
.home-precio-sub{ font-size:12px; color:var(--ink3); margin-bottom:16px; }
.home-precio-items div{
  font-size:13px; color:var(--ink3); padding:5px 0; border-bottom:1px solid var(--border);
}
.home-precio-btn{
  width:100%; margin-top:16px; border-radius:8px; padding:11px;
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; cursor:pointer; border:none;
}
.home-precio-btn-gold{ background:var(--gold); color:#fff; }
.home-precio-btn-gold:hover{ background:var(--gold-dark); }
.home-precio-btn-ghost{
  background:transparent; color:var(--ink); border:1px solid var(--border);
}
.home-precio-btn-ghost:hover{ border-color:var(--gold); color:var(--gold-dark); }

/* FAQ */
.home-faq{ max-width:760px; margin:0 auto; }
.home-faq-item{
  border-bottom:1px solid var(--border); padding:14px 0;
}
.home-faq-item summary{
  font-size:14px; font-weight:600; color:var(--ink);
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.home-faq-item summary span{ color:var(--gold); font-size:18px; font-weight:300; flex-shrink:0; }
.home-faq-resp{
  font-size:13px; font-weight:300; color:var(--ink3); line-height:1.75; margin-top:10px;
}

/* CTA FINAL */
.home-cta-final{
  background:linear-gradient(135deg,#161614,#1d1d1b);
  padding:44px 48px; text-align:center; margin-top:48px;
}
.home-cta-final h2{
  font-family:'DM Serif Display',serif; font-size:26px; font-weight:400;
  color:#fff; margin-bottom:8px;
}
.home-cta-final p{
  font-size:14px; font-weight:300; color:rgba(255,255,255,.55); margin-bottom:24px;
}
.home-cta-btns{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.home-cta-btns a{
  color:#fff; border:none; border-radius:8px; padding:10px 20px;
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600;
  text-decoration:none; cursor:pointer;
}
.home-cta-btns a:hover{ opacity:.85; }
.home-cta-trust{ font-size:12px; color:rgba(255,255,255,.35); }

/* FOOTER */
.home-footer{
  padding:20px 0 28px; text-align:center;
  font-size:12px; color:var(--ink3);
  border-top:1px solid var(--border); margin-top:0;
}
.home-footer a{ color:var(--ink3); text-decoration:none; }
.home-footer a:hover{ color:var(--gold-dark); }

/* DARK MODE */
body.dark .home-shell{
  background:rgba(255,255,255,0.03);
  border-color:rgba(255,255,255,0.07);
}
body.dark .home-bloque-card,
body.dark .home-proximo-card,
body.dark .home-testimonio,
body.dark .home-precio-card{ background:#1e1e1c; border-color:rgba(255,255,255,.08); }

/* RESPONSIVE */
@media(max-width:900px){
  .home-hero-inner{ grid-template-columns:1fr; }
  .home-hero-stats{ flex-direction:row; }
  .home-bloques-grid,
  .home-proximos-grid{ grid-template-columns:1fr; }
  .home-testimonios-grid{ grid-template-columns:1fr; }
  .home-precios-grid{ grid-template-columns:1fr; }
  .home-diferencias-grid{ grid-template-columns:1fr; }
}
@media(max-width:640px){
  .home-wrap{ padding:12px 12px 0; }
  .home-hero,.home-section,.home-cta-final{ padding-left:24px; padding-right:24px; }
  .home-section-alt{ padding-left:24px; padding-right:24px; }
  .home-hero-stats{ flex-wrap:wrap; }
}
/* =====================================================
   SISTEMA DE COLOR POR BLOQUE — versión completa
   Reemplaza el bloque anterior "SISTEMA DE COLOR POR BLOQUE"
   en academia.css. Cubre TODOS los elementos de curso.
===================================================== */

/* ── TOPBAR ── */
#topbar-prog-fill{
  background: var(--bloque-color, var(--gold));
}
#topbar-pos{
  color: var(--bloque-color, var(--gold));
  background: var(--bloque-color-bg, rgba(200,146,42,0.15));
  border-color: var(--bloque-color-border, rgba(200,146,42,0.25));
}

/* ── NAVEGACIÓN SUPERIOR DEL MÓDULO ── */
.mod-nav-top a{
  color: var(--bloque-color-dark, var(--gold-dark));
}
.mod-nav-top a:hover{
  color: var(--bloque-color, var(--gold));
}

/* ── NAVEGACIÓN INFERIOR DEL MÓDULO ── */
.mod-nav-next{
  background: var(--bloque-color, var(--gold));
  border-color: var(--bloque-color, var(--gold));
}
.mod-nav-btn:hover{
  border-color: var(--bloque-color, var(--gold));
}
.mod-nav-label{
  color: var(--bloque-color-dark, var(--gold-dark));
}
.mod-nav-next .mod-nav-label{
  color: #fff;
}

/* ── MÓDULO BLOQUEADO ── */
.bloqueo-btn{
  background: var(--bloque-color, var(--gold));
}
.bloqueo-btn:hover{
  background: var(--bloque-color-dark, var(--gold-dark));
}
.modulo-bloqueado .mod-subtitle{
  color: var(--bloque-color-dark, var(--gold-dark));
}

/* ── BOTÓN SUBIR ── */
#btn-subir:hover{
  background: var(--bloque-color, var(--gold));
}

/* ── PILAR: HERO BADGE Y KICKERS ── */
.pilar-hero-badge{
  color: var(--bloque-color, var(--gold));
  background: var(--bloque-color-bg, rgba(200,146,42,0.10));
  border-color: var(--bloque-color-border, rgba(200,146,42,0.22));
}
.pilar-hero-cta .intro-main-btn{
  background: var(--bloque-color, var(--gold));
}
.pilar-hero-cta .intro-main-btn:hover{
  background: var(--bloque-color-dark, var(--gold-dark));
}
.pilar-section-kicker{
  color: var(--bloque-color-dark, var(--gold-dark));
}
.pilar-concept-label{
  color: var(--bloque-color, var(--gold));
}
.pilar-modules-kicker{
  color: var(--bloque-color-dark, var(--ink3));
}
.pilar-alert{
  border-left-color: var(--bloque-color, var(--teal));
}
.pilar-learn-item span{
  color: var(--bloque-color, var(--gold));
}

/* ── PILAR: LISTA DE MÓDULOS ── */
.pilar-module-num{
  color: var(--bloque-color, var(--gold));
}
.pilar-module-item:hover{
  border-left-color: var(--bloque-color, var(--gold));
  background: var(--bloque-color-bg, rgba(200,146,42,0.06));
}
.pilar-module-item:hover .pilar-module-num{
  color: var(--bloque-color-dark, var(--gold-dark));
}
.pilar-module-item:hover .pilar-module-body h3{
  color: var(--bloque-color-dark, var(--gold-dark));
}
.pilar-module-item:hover::after{
  color: var(--bloque-color, var(--gold));
}

/* ── PILAR: NAVEGACIÓN PREV/NEXT ── */
.pilar-prev-hint span,
.pilar-next-hint span{
  color: var(--bloque-color-dark, var(--gold-dark));
}
.pilar-next-hint.pilar-final span{
  color: var(--bloque-color, var(--gold));
}

/* ── PORTADA DE BLOQUE: LISTA DE PILARES ── */
.bdm-pillar-num{
  color: var(--bloque-color, var(--gold));
}
.bdm-pillar-item:hover{
  border-left-color: var(--bloque-color, var(--gold));
  background: var(--bloque-color-bg, rgba(200,146,42,0.06));
}
.bdm-pillar-item:hover h3{
  color: var(--bloque-color-dark, var(--gold-dark));
}
.bdm-pillar-item:hover .bdm-pillar-num{
  color: var(--bloque-color-dark, var(--gold-dark));
}
.bdm-pillar-item:hover::after{
  color: var(--bloque-color, var(--gold));
}

/* ── PORTADA DE BLOQUE: HERO Y COMPONENTES ── */
.bdm-hero-badge{
  color: var(--bloque-color, var(--gold));
  background: var(--bloque-color-bg, rgba(200,146,42,0.12));
  border-color: var(--bloque-color-border, rgba(200,146,42,0.25));
}
.bdm-stat strong{
  color: var(--bloque-color, var(--gold));
}
.bdm-check-item span{
  color: var(--bloque-color, var(--gold));
}
.bdm-section-kicker{
  /* mantiene ink3 — es texto label neutro */
}
.intro-kicker{
  color: var(--bloque-color, var(--gold));
}
.ba-arrow{
  color: var(--bloque-color, var(--gold));
}
.career-path span{
  color: var(--bloque-color, var(--gold));
}
.road-pilares{
  color: var(--bloque-color, var(--gold));
  background: var(--bloque-color-bg, rgba(200,146,42,0.10));
  border-color: var(--bloque-color-border, rgba(200,146,42,0.22));
}
.intro-main-btn{
  background: var(--bloque-color, var(--gold));
}
.intro-main-btn:hover{
  /* mantiene opacity .88 */
}
.bdm-sample-label{
  color: var(--bloque-color, var(--gold));
}
.bdm-sample-tag{
  color: var(--bloque-color, var(--gold));
  background: var(--bloque-color-bg, rgba(200,146,42,0.15));
  border-color: var(--bloque-color-border, rgba(200,146,42,0.25));
}
.bdm-faq-item h3{
  /* mantiene var(--ink) — es título neutro */
}

/* ── COMPONENTES DE CONTENIDO DEL MÓDULO ── */

/* Checklists */
.checklist li::before{
  color: var(--bloque-color, var(--gold));
}

/* Framework badge */
.framework-badge{
  color: var(--bloque-color, var(--gold));
  background: var(--bloque-color-bg, rgba(200,146,42,0.15));
  border-color: var(--bloque-color-border, rgba(200,146,42,0.28));
}

/* Theory / Insight labels */
.theory-label{
  color: var(--bloque-color, var(--gold));
}
.insight-label{
  color: var(--bloque-color, var(--gold));
}
.fundamento-label{
  color: var(--bloque-color, var(--gold));
}
.tldr-label{
  color: var(--bloque-color, var(--gold));
}
.alert-gold-label{
  color: var(--bloque-color, var(--gold));
}

/* Bridge — borde izquierdo */
.bridge{
  border-left-color: var(--bloque-color, var(--gold));
}
.bridge-title{
  color: var(--bloque-color-dark, var(--gold-dark));
}

/* Speaker en scripts */
.speaker{
  color: var(--bloque-color, var(--gold));
}

/* Tag gold */
.tag-gold{
  background: var(--bloque-color-bg, rgba(200,146,42,0.20));
  color: var(--bloque-color, #e8c870);
}

/* Prereq dot y flecha */
.prereq .prereq-dot{
  background: var(--bloque-color, var(--gold));
}
.learning-box .prereq-list li::before{
  color: var(--bloque-color, var(--gold));
}

/* Track items arrow */
.track-items li::before{
  color: var(--bloque-color, var(--gold));
}

/* City card arrows */
.city-card-body li::before{
  color: var(--bloque-color, var(--gold));
}

/* Pillar quiz wrap */
.pillar-quiz-wrap{
  border-color: var(--bloque-color, var(--gold));
}
.pillar-quiz-title{
  color: var(--bloque-color, var(--gold));
}
.quiz-pip.done-ok{
  /* mantiene verde — indica correcto */
}

/* Calc tab active */
.calc-result-card.gold{
  border-top-color: var(--bloque-color, var(--gold));
}

/* KPI accent card */
.kpi-card.accent .kpi-num{
  color: var(--bloque-color, var(--gold));
}

/* Flashcard front label */
.faq-link.gold{
  background: var(--bloque-color, var(--gold));
}

/* Module header gradient accent */
.mod-header::before{
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bloque-color, #c8922a) 10%, transparent) 0%,
    transparent 55%
  );
}

/* ── ELEMENTOS QUE MANTIENEN SU COLOR ORIGINAL ── */
/* (global nav, block switcher, dark mode chrome,
    coral/teal/blue/green/purple específicos de contenido) */

@media(max-width:640px){
  .module{
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-left: -20px;
    margin-right: -20px;
    box-shadow: none;
  }
  .mod-header{
    border-radius: 0;
  }
  .mod-body{
    border-radius: 0;
  }
}
/* =====================================================
   PILAR NAV — añadir al final de academia.css
===================================================== */

#pilar-nav{
  background: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 85px;
  z-index: 198;
  overflow: visible;
}

#pilar-nav-inner{
  display: flex;
  align-items: stretch;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
  overflow-y: visible;
}
#pilar-nav-inner::-webkit-scrollbar{ display:none; }

/* TABS */
.pnav-item{
  position: relative;
  flex-shrink: 0;
}

.pnav-btn{
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 11px;
  color: rgba(255,255,255,0.38);
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  line-height: 1;
}

.pnav-item:hover > .pnav-btn{
  color: rgba(255,255,255,0.75);
}

.pnav-active > .pnav-btn{
  color: #fff;
  border-bottom-color: var(--bloque-color, var(--gold));
}

.pnav-num{
  font-size: 9px;
  font-weight: 700;
  opacity: .45;
  flex-shrink: 0;
}

.pnav-active > .pnav-btn .pnav-num{
  opacity: .7;
  color: var(--bloque-color, var(--gold));
}

.pnav-name{
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pnav-arrow{
  font-size: 8px;
  opacity: .35;
  transition: transform .15s;
  flex-shrink: 0;
}

.pnav-item:hover > .pnav-btn .pnav-arrow{
  transform: rotate(180deg);
  opacity: .7;
}

/* DROPDOWN */
.pnav-drop{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 290px;
  background: #1d1d1b;
  border: 1px solid rgba(255,255,255,0.1);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  z-index: 9999;
  max-height: 72vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

/* Últimas 3 tabs: dropdown abre hacia la izquierda */
.pnav-item:nth-last-child(1) .pnav-drop,
.pnav-item:nth-last-child(2) .pnav-drop,
.pnav-item:nth-last-child(3) .pnav-drop{
  left: auto;
  right: 0;
}

.pnav-item:hover > .pnav-drop{
  display: block;
}

/* DROPDOWN ITEMS */
.pnav-drop-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.4;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background .1s, color .1s;
}

.pnav-drop-item:last-child{
  border-bottom: none;
  border-radius: 0 0 10px 10px;
}

.pnav-drop-item:hover{
  background: rgba(255,255,255,0.06);
  color: #fff;
}

/* Vista general */
.pnav-drop-overview{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  padding: 8px 16px;
}

.pnav-drop-overview:hover{
  color: rgba(255,255,255,0.7);
}

.pnav-drop-num{
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.28);
  flex-shrink: 0;
  width: 20px;
  text-align: right;
}

.pnav-drop-title{
  flex: 1;
}

.pnav-check{
  color: var(--bloque-color, var(--gold));
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Módulo visitado */
.pnav-visited .pnav-drop-num{
  color: var(--bloque-color, var(--gold));
  opacity: .7;
}

/* Módulo actual */
.pnav-current{
  background: rgba(255,255,255,0.04);
}

.pnav-current .pnav-drop-title{
  color: var(--bloque-color, var(--gold));
  font-weight: 500;
}

.pnav-current .pnav-drop-num{
  color: var(--bloque-color, var(--gold));
  opacity: 1;
}

/* RESPONSIVE */
@media(max-width:900px){
  .pnav-name{ max-width: 80px; }
  .pnav-btn{ padding: 10px 8px; }
}

@media(max-width:640px){
  .pnav-name{ display: none; }
  .pnav-arrow{ display: none; }
  .pnav-btn{ padding: 10px 9px; }
  .pnav-num{ font-size: 11px; opacity: 1; }
  .pnav-active > .pnav-btn .pnav-num{ font-size: 11px; }
  /* En móvil todos los dropdowns abren a la izquierda excepto los primeros */
  .pnav-item:nth-last-child(n+2) .pnav-drop{ left:auto; right:0; }
  .pnav-item:first-child .pnav-drop,
  .pnav-item:nth-child(2) .pnav-drop{ left:0; right:auto; }
}
/* Fix: overflow del contenedor no debe cortar los dropdowns */
#pilar-nav{
  overflow: visible !important;
}
#pilar-nav-inner{
  overflow-x: clip !important;
  overflow-y: visible !important;
}
/* Fix: primer dropdown siempre abre a la derecha */
.pnav-item:first-child .pnav-drop,
.pnav-item:nth-child(2) .pnav-drop,
.pnav-item:nth-child(3) .pnav-drop{
  left: 0 !important;
  right: auto !important;
}
#topbar-label{
  max-width: 520px;
}
/* ═══════════════════════════════════════════════════════════════════
   AÑADIR ESTE BLOQUE COMPLETO AL FINAL DE academia.css
   Contiene, en orden:
   1) Correcciones de layout (padding, learning-box, tldr, keywords + componentes)
   2) Componentes visuales v2 (theory-light, data-cards, donut, etc.)
   3) Hero del módulo + neutralización del envoltorio embebido
   ═══════════════════════════════════════════════════════════════════ */


/* ───────── 1. CORRECCIONES DE LAYOUT ───────── */
/* =====================================================================
   CORRECCIONES DE LAYOUT — Pilar 5 y unificación visual
   Añadir al FINAL de academia.css
   ===================================================================== */

/* --- FIX 1 + 2: learning-box y tldr a ancho completo --------------- */
/* Antes ocupaban media columna desperdiciando la derecha.
   Ahora una sola columna fluida que aprovecha todo el ancho. */
.learning-box{
  grid-template-columns:1fr !important;
  padding:22px 26px !important;
}
.learning-box ul{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:8px 28px !important;
}
@media(max-width:680px){
  .learning-box ul{grid-template-columns:1fr !important}
}

/* tldr: que las 3 columnas llenen el ancho real del contenedor */
.tldr-grid{
  grid-template-columns:repeat(3,1fr) !important;
  gap:22px !important;
}
@media(max-width:680px){
  .tldr-grid{grid-template-columns:1fr !important}
}
.tldr{padding:22px 26px !important}

/* --- FIX 3: metrics-row centrada y aprovechando el ancho ----------- */
.metrics-row{
  grid-template-columns:repeat(4,1fr) !important;
  gap:12px !important;
}
@media(max-width:680px){
  .metrics-row{grid-template-columns:repeat(2,1fr) !important}
}
.metric-card{padding:16px 12px !important}
.metric-val{font-size:22px !important;font-family:'DM Serif Display',serif !important;font-weight:400}
.metric-lbl{font-size:11px !important;color:var(--ink3);margin-top:4px;display:block}

/* --- FIX 4: keywords con separación término/definición ------------- */
.keywords{
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;
  gap:12px !important;
}
.kw{padding:14px 16px !important;flex-direction:column !important;gap:0 !important}
.kw-dot{margin-bottom:8px !important}
.kw-body{display:flex !important;flex-direction:column !important;gap:6px !important}
.kw-term{
  display:block !important;
  font-weight:600 !important;
  margin-bottom:6px !important;
  padding-bottom:6px !important;
  border-bottom:1px solid var(--border2);
}
.kw-def{display:block !important;line-height:1.55 !important}

/* --- FIX 5: nuevos componentes visuales para romper monotonía ----- */

/* Stat-band: franja de datos destacados horizontal */
.stat-band{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  margin:24px 0;
}
.stat-band-item{
  background:var(--paper2);
  padding:20px 16px;
  text-align:center;
}
.stat-band-num{
  font-family:'DM Serif Display',serif;
  font-size:30px;
  font-weight:400;
  color:var(--bloque-color,var(--gold));
  line-height:1;
}
.stat-band-label{
  font-size:11.5px;
  color:var(--ink3);
  margin-top:8px;
  line-height:1.4;
}

/* Comparison: dos columnas enfrentadas (antes/después, malo/bueno) */
.vs-block{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  gap:14px;
  margin:24px 0;
}
@media(max-width:680px){
  .vs-block{grid-template-columns:1fr;gap:10px}
  .vs-arrow{display:none}
}
.vs-side{
  border-radius:10px;
  padding:18px 20px;
  border:1px solid var(--border);
}
.vs-side.vs-bad{background:rgba(192,67,42,.05);border-color:rgba(192,67,42,.2)}
.vs-side.vs-good{background:rgba(42,122,75,.05);border-color:rgba(42,122,75,.2)}
.vs-side-label{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:10px;
}
.vs-bad .vs-side-label{color:#c0432a}
.vs-good .vs-side-label{color:#2a7a4b}
.vs-side ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.vs-side li{font-size:13px;font-weight:300;color:var(--ink2);line-height:1.5;padding-left:18px;position:relative}
.vs-bad li::before{content:'✕';position:absolute;left:0;color:#c0432a;font-weight:700;font-size:11px}
.vs-good li::before{content:'✓';position:absolute;left:0;color:#2a7a4b;font-weight:700;font-size:11px}
.vs-arrow{
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--ink3);font-weight:300;
}

/* Bar-chart: barras horizontales para comparar magnitudes */
.bar-chart{margin:24px 0;display:flex;flex-direction:column;gap:12px}
.bar-row{display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:center}
@media(max-width:680px){.bar-row{grid-template-columns:100px 1fr}}
.bar-label{font-size:12.5px;font-weight:500;color:var(--ink2);text-align:right;line-height:1.3}
.bar-track{position:relative;height:30px;background:var(--paper2);border-radius:6px;overflow:hidden}
.bar-fill{
  height:100%;border-radius:6px;
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:10px;
  font-size:12px;font-weight:700;color:#fff;
  min-width:fit-content;
}

/* Timeline vertical para procesos/fases */
.vtimeline{margin:24px 0;position:relative;padding-left:30px}
.vtimeline::before{
  content:'';position:absolute;left:8px;top:6px;bottom:6px;
  width:2px;background:var(--border);
}
.vt-item{position:relative;padding-bottom:22px}
.vt-item:last-child{padding-bottom:0}
.vt-item::before{
  content:'';position:absolute;left:-26px;top:4px;
  width:14px;height:14px;border-radius:50%;
  background:var(--bloque-color,var(--gold));
  border:3px solid var(--paper);
}
.vt-phase{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bloque-color-dark,var(--gold-dark));margin-bottom:3px}
.vt-title{font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:4px}
.vt-desc{font-size:13px;font-weight:300;color:var(--ink2);line-height:1.6}

/* Donut/proporción simple con conic-gradient */
.proportion{display:flex;align-items:center;gap:24px;margin:24px 0;padding:20px 24px;background:var(--paper2);border:1px solid var(--border);border-radius:12px;flex-wrap:wrap}
.proportion-ring{
  width:120px;height:120px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.proportion-ring::after{
  content:'';position:absolute;width:74px;height:74px;border-radius:50%;background:var(--paper2);
}
.proportion-center{position:relative;z-index:1;text-align:center}
.proportion-center strong{font-family:'DM Serif Display',serif;font-size:26px;color:var(--ink);line-height:1}
.proportion-center span{font-size:10px;color:var(--ink3);display:block;margin-top:2px}
.proportion-legend{flex:1;min-width:180px;display:flex;flex-direction:column;gap:8px}
.proportion-leg-item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2)}
.proportion-leg-dot{width:12px;height:12px;border-radius:3px;flex-shrink:0}

/* --- FIX 1: garantizar aire lateral del contenido del módulo ------- */
/* El contenido inyectado de cada módulo necesita respiración lateral.
   Algunos bloques (theory, tldr, learning-box) llegaban al borde. */
.mod-body{padding:28px 32px !important}
@media(max-width:680px){
  .mod-body{padding:20px 18px !important}
}
/* Los bloques de ancho completo dentro del módulo respetan el contenedor */
.mod-body > div > .theory,
.mod-body > div > .tldr,
.mod-body > div > .learning-box,
.mod-body > div > .lesson,
.mod-body > div > .framework,
.mod-body > div > .alert-gold,
.mod-body > div > .keywords,
.mod-body > div > .fundamento{
  margin-left:0;
  margin-right:0;
}


/* ───────── 2. COMPONENTES VISUALES V2 ───────── */
/* =====================================================================
   COMPONENTES VISUALES V2 — variedad para romper bloques oscuros
   Añadir al final de academia.css (después de correcciones_academia.css)
   ===================================================================== */

/* --- THEORY-LIGHT: versión clara del bloque de teoría -------------- */
/* Para alternar con los .theory oscuros y dar respiro visual */
.theory-light{
  background:var(--paper2);
  border:1px solid var(--border);
  border-left:4px solid var(--bloque-color,var(--gold));
  border-radius:10px;
  padding:22px 26px;
  margin:24px 0;
}
.theory-light .theory-label{color:var(--bloque-color-dark,var(--gold-dark))}
.theory-light .theory-title{color:var(--ink);font-family:'DM Serif Display',serif;font-size:18px;font-weight:400;margin:6px 0 10px}
.theory-light .theory-text{color:var(--ink2);font-size:14px;font-weight:300;line-height:1.75}
.theory-light .theory-text strong{color:var(--ink);font-weight:600}

/* --- DATA-CARD: tarjeta con un dato grande y su explicación -------- */
.data-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:24px 0}
.data-card{
  background:var(--paper2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:22px 20px;
  position:relative;
  overflow:hidden;
}
.data-card::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:4px;
  background:var(--dc-color,var(--bloque-color,var(--gold)));
}
.data-card-num{
  font-family:'DM Serif Display',serif;
  font-size:38px;font-weight:400;line-height:1;
  color:var(--dc-color,var(--bloque-color,var(--gold)));
}
.data-card-label{font-size:13px;font-weight:600;color:var(--ink);margin:8px 0 6px}
.data-card-desc{font-size:12.5px;font-weight:300;color:var(--ink2);line-height:1.55}

/* --- DONUT-CHART: gráfico de proporción con SVG ------------------- */
.donut-block{
  display:flex;align-items:center;gap:28px;
  background:var(--paper2);border:1px solid var(--border);border-radius:12px;
  padding:24px 28px;margin:24px 0;flex-wrap:wrap;
}
.donut-svg{flex-shrink:0}
.donut-legend{flex:1;min-width:200px;display:flex;flex-direction:column;gap:10px}
.donut-leg-item{display:flex;align-items:flex-start;gap:10px}
.donut-leg-dot{width:14px;height:14px;border-radius:4px;flex-shrink:0;margin-top:2px}
.donut-leg-text{font-size:13px;color:var(--ink2);line-height:1.5}
.donut-leg-text strong{color:var(--ink);font-weight:600}

/* --- PROGRESS-COMPARE: barras de progreso comparadas -------------- */
.pcompare{margin:24px 0;display:flex;flex-direction:column;gap:16px}
.pcompare-item{}
.pcompare-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.pcompare-label{font-size:13px;font-weight:500;color:var(--ink)}
.pcompare-val{font-size:15px;font-weight:700;color:var(--bloque-color-dark,var(--gold-dark));font-family:'DM Serif Display',serif}
.pcompare-track{height:10px;background:var(--border);border-radius:5px;overflow:hidden}
.pcompare-fill{height:100%;border-radius:5px;transition:width .6s ease}

/* --- QUOTE-CARD: cita destacada clara (no oscura) ----------------- */
.quote-card{
  border-left:4px solid var(--bloque-color,var(--gold));
  padding:6px 0 6px 24px;
  margin:24px 0;
}
.quote-card-text{
  font-family:'DM Serif Display',serif;
  font-size:21px;font-weight:400;font-style:italic;
  color:var(--ink);line-height:1.4;
}
.quote-card-author{font-size:13px;color:var(--ink3);margin-top:10px;font-weight:500}

/* --- ICON-STEPS: pasos con icono en fila (claro) ----------------- */
.icon-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:24px 0}
.icon-step{
  background:var(--paper2);border:1px solid var(--border);border-radius:12px;
  padding:18px 16px;text-align:center;
}
.icon-step-icon{
  width:48px;height:48px;margin:0 auto 12px;border-radius:12px;
  background:var(--bloque-color-bg,rgba(200,146,42,.12));
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.icon-step-num{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bloque-color,var(--gold));margin-bottom:4px}
.icon-step-title{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:5px;line-height:1.3}
.icon-step-desc{font-size:12px;font-weight:300;color:var(--ink2);line-height:1.5}

/* --- HIGHLIGHT-NUM: dato inline destacado en medio del texto ------ */
.highlight-num{
  display:inline-flex;align-items:baseline;gap:4px;
  background:var(--bloque-color-bg,rgba(200,146,42,.12));
  border-radius:6px;padding:2px 8px;
  font-weight:700;color:var(--bloque-color-dark,var(--gold-dark));
}

/* --- MINI-MATRIX: matriz 2x2 visual clara ------------------------- */
.mini-matrix{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin:24px 0;position:relative;
}
.mini-matrix-cell{
  border-radius:10px;padding:16px 18px;border:1px solid var(--border);
  min-height:90px;
}
.mini-matrix-cell .mm-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.mini-matrix-cell .mm-text{font-size:12.5px;font-weight:300;line-height:1.5;color:var(--ink2)}


/* ───────── 3. HERO DEL MÓDULO + ENVOLTORIO EMBEBIDO ───────── */
/* =====================================================================
   HERO DEL MÓDULO — una sola cabecera limpia, como la página de pilar
   + neutralización del envoltorio embebido (.module/.mod-body antiguos)
   Añadir al final de academia.css
   ===================================================================== */

.modulo-intro-shell{
  background: rgba(255,255,255,0.52);
  border: 1px solid rgba(26,26,24,0.11);
  border-radius: 22px;
  box-shadow: 0 2px 8px rgba(26,26,24,0.04), 0 16px 48px rgba(26,26,24,0.09);
  overflow: hidden;
  max-width: 1040px;
  margin: 0 auto 40px;
}

/* Hero oscuro con el título del módulo (igual que el del pilar) */
.modulo-hero{
  background: var(--dark-surface);
  padding: 44px 40px 36px;
}
.modulo-hero-badge{
  display:inline-block;
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bloque-color,var(--gold)); background:var(--bloque-color-bg,rgba(200,146,42,.12));
  border:1px solid var(--bloque-color-border,rgba(200,146,42,.25)); border-radius:20px; padding:4px 14px;
  margin-bottom:14px;
}
.modulo-hero-title{
  font-family:'DM Serif Display',serif;
  font-size:clamp(24px,3.5vw,32px); font-weight:400;
  color:#fff; line-height:1.14; margin:0 0 12px;
}
.modulo-hero-sub{
  font-size:14px; font-weight:300; line-height:1.65;
  color:rgba(255,255,255,.62); margin:0; max-width:760px;
}

/* El cuerpo de la plantilla aprovecha todo el ancho con padding consistente */
.modulo-intro-shell > .mod-body{
  padding: 32px 40px 40px !important;
  border: none !important;
  background: transparent;
}
@media(max-width:680px){
  .modulo-hero{ padding: 32px 22px 26px; }
  .modulo-intro-shell > .mod-body{ padding: 24px 22px 30px !important; }
}

/* ─── NEUTRALIZAR EL ENVOLTORIO EMBEBIDO DEL CONTENIDO ANTIGUO ────────
   Los módulos de los pilares 0 y 1 traen dentro del campo "contenido"
   su propia estructura:  <div class="module"> <div class="mod-header">
   <div class="mod-body">…contenido…</div></div>
   Eso anidaba caja-dentro-de-caja (doble fondo, doble padding) y ocultaba
   el contenido (porque .mod-body tiene display:none por defecto).
   Aquí lo "deshacemos" para que el contenido fluya a todo el ancho. */

/* 1. El .module embebido: sin caja, sin borde, sin fondo, sin margen */
.modulo-intro-shell > .mod-body .module{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* 2. La cabecera embebida: oculta (ya la pone el hero de la plantilla) */
.modulo-intro-shell > .mod-body .mod-header{
  display: none !important;
}

/* 3. El .mod-body embebido: visible, sin padding propio ni bordes ni fondo
      (hereda el ancho completo del contenedor de la plantilla) */
.modulo-intro-shell > .mod-body .mod-body{
  display: block !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
/* ═══════════════════════════════════════════════════════════════════
   MODO OSCURO — redefinición de variables base + botón toggle
   Añadir al FINAL de academia.css
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Variables base en modo oscuro ──────────────────────────────
   Tu academia.css ya tiene ~120 reglas body.dark para componentes.
   Esto es lo que faltaba: redefinir las variables raíz para que TODO
   lo que usa var(--paper), var(--ink), var(--card-bg)... cambie solo. */
body.dark {
  /* Tintas: ahora claras sobre fondo oscuro */
  --ink:   #ece8e0;   /* texto principal (antes casi negro) */
  --ink2:  #b8b2a6;   /* texto secundario */
  --ink3:  #8a857b;   /* texto terciario / mutado */

  /* Fondos: del crema claro a tonos oscuros cálidos */
  --paper:  #16150f;  /* fondo general de la página */
  --paper2: #20201a;  /* fondo de zonas alternas */

  /* Superficies de tarjeta */
  --card-bg: #20201a;

  /* Bordes: claros y sutiles sobre oscuro */
  --border:  rgba(255,255,255,0.10);
  --border2: rgba(255,255,255,0.18);

  /* Acentos: se aclaran un punto para contraste sobre fondo oscuro */
  --gold-dark:  #e0b052;
  --teal-dark:  #5fa3a3;

  /* Superficie "oscura intencional" (theory, hero...) : en dark se aclara
     ligeramente respecto al fondo para que esos bloques no se fundan */
  --dark-surface: #26261f;
}

/* Las barras superiores usan --ink como fondo (oscuro en claro).
   En modo oscuro conviene que se distingan del fondo general. */
body.dark #topbar,
body.dark #nav,
body.dark #block-switcher,
body.dark .mod-header,
body.dark .modulo-hero,
body.dark .pilar-hero {
  background: #20201a;
}

/* Bloques destacados que usan --ink como fondo (theory, tldr...):
   en dark se aclaran un poco para no fundirse con el fondo de página. */
body.dark .theory,
body.dark .tldr {
  background: var(--dark-surface);
}

/* ── 2. El botón sol/luna en la topbar ─────────────────────────────── */
#topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

#theme-toggle {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 15px; line-height: 1;
  padding: 0;
  transition: background .15s, border-color .15s, transform .1s;
}
#theme-toggle:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.28);
}
#theme-toggle:active { transform: scale(.92); }

/* Mostrar el icono correcto según el modo:
   en claro se ve la luna (para ir a oscuro), en oscuro el sol. */
#theme-toggle .theme-icon-sun  { display: none; }
#theme-toggle .theme-icon-moon { display: inline; }
body.dark #theme-toggle .theme-icon-sun  { display: inline; }
body.dark #theme-toggle .theme-icon-moon { display: none; }

/* Transición suave al cambiar de tema (opcional pero agradable) */
body, .module, .mod-body, .lesson, .theory, .card,
.pilar-intro-shell, .modulo-intro-shell, #topbar, #nav {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ── 3. Anti-flash de respaldo ─────────────────────────────────────
   El <html> recibe theme-dark en el head (antes que el body).
   Esto pinta el fondo oscuro inmediatamente, aunque el JS que añade
   body.dark tarde una fracción de segundo. */
html.theme-dark { background: #16150f; }
html.theme-dark body { background: #16150f; color: #ece8e0; }

/* ═══════════════════════════════════════════════════════════════════
   ARREGLOS DE COMPONENTES CON FONDO CLARO FIJO
   Estos no usan variables, así que hay que adaptarlos uno a uno.
   ═══════════════════════════════════════════════════════════════════ */

/* .tip — "FRASE ÚTIL" y similares (usaba gold-light fijo) */
body.dark .tip {
  background: rgba(200,146,42,0.12);
  border: 1px solid rgba(200,146,42,0.22);
}
body.dark .tip,
body.dark .tip * {
  color: var(--ink);
}
body.dark .tip-label {
  color: var(--gold-dark);
}

/* .domain-check (usaba green-light fijo) */
body.dark .domain-check {
  background: rgba(42,107,72,0.14);
  border-color: rgba(42,107,72,0.30);
  color: var(--ink);
}

/* .warning (usaba #fff3cd fijo, amarillo claro) */
body.dark .warning {
  background: rgba(245,200,80,0.12);
  border-color: rgba(245,200,80,0.28);
  color: var(--ink);
}

/* Cualquier .mod-header con fondo blanco forzado inline o por regla */
body.dark .mod-header {
  background: #20201a !important;
}

/* Bloques que usan paper2 ya se adaptan, pero forzamos texto legible
   en los que llevan texto de color oscuro fijo */
body.dark .practice,
body.dark .practice *,
body.dark .learning-box,
body.dark .learning-box *,
body.dark .section-summary,
body.dark .section-summary * {
  color: var(--ink2);
}
body.dark .practice-label,
body.dark .learning-box-title {
  color: var(--gold-dark);
}

/* Tablas: las celdas .hi y los th con fondo oscuro siguen bien,
   pero aseguramos el texto del cuerpo */
body.dark .comp-table td {
  color: var(--ink2);
  border-color: var(--border);
}
body.dark .comp-table td.hi {
  color: var(--ink);
}

/* El badge del módulo y la barra de progreso en topbar:
   más contraste sobre fondo oscuro */
body.dark .modulo-hero-badge,
body.dark #topbar-prog-fill {
  opacity: 1;
}

/* Quote-card del Pilar 5 en dark (si usa fondo claro) */
body.dark .quote-card-text { color: var(--ink); }
body.dark .quote-card-author { color: var(--ink3); }

/* ═══════════════════════════════════════════════════════════════════
   ARREGLOS RONDA 2 — componentes "claros a propósito" y shells
   ═══════════════════════════════════════════════════════════════════ */

/* theory-light: diseñado con fondo CLARO a propósito (para romper la
   monotonía de bloques oscuros). En modo oscuro hay que invertirlo:
   pasa a ser un bloque oscuro sutil con borde de color. */
body.dark .theory-light {
  background: var(--paper2) !important;
  border-color: var(--border) !important;
}
body.dark .theory-light,
body.dark .theory-light .theory-text,
body.dark .theory-light .theory-text * {
  color: var(--ink2) !important;
}
body.dark .theory-light .theory-title { color: var(--ink) !important; }
body.dark .theory-light .theory-text strong { color: var(--ink) !important; }

/* pilar-intro-shell y modulo-intro-shell: fondo blanco semitransparente fijo.
   En dark se vuelve un panel oscuro. */
body.dark .pilar-intro-shell,
body.dark .modulo-intro-shell {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}

/* Tabla "semana tipo": las celdas de día (Lunes, Martes...) usan paper2,
   pero el texto puede quedar claro sobre claro. Forzamos contraste. */
body.dark .week-day {
  background: var(--paper2);
  color: var(--ink);
}
body.dark .week-row { border-color: var(--border); }
body.dark .week-body,
body.dark .week-body * { color: var(--ink2); }
body.dark .week-body strong { color: var(--ink); }

/* data-cards, mini-matrix, stat-band: fondos claros que en dark deben oscurecerse */
body.dark .data-card,
body.dark .stat-band-item,
body.dark .mini-matrix-cell,
body.dark .icon-step,
body.dark .donut-block,
body.dark .proportion {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .data-card-desc,
body.dark .stat-band-label,
body.dark .mm-text,
body.dark .icon-step-desc { color: var(--ink2); }
body.dark .data-card-label,
body.dark .icon-step-title { color: var(--ink); }

/* pcompare (barras comparadas): pista de fondo claro */
body.dark .pcompare-track { background: rgba(255,255,255,0.10); }
body.dark .pcompare-label { color: var(--ink2); }

/* vs-block: los lados bueno/malo usan tintes claros */
body.dark .vs-side.vs-bad {
  background: rgba(192,67,42,0.10);
  border-color: rgba(192,67,42,0.30);
}
body.dark .vs-side.vs-good {
  background: rgba(42,122,75,0.10);
  border-color: rgba(42,122,75,0.30);
}
body.dark .vs-side li { color: var(--ink2); }

/* keywords: tarjetas de término/definición */
body.dark .kw {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .kw-def { color: var(--ink2); }
body.dark .kw-term { color: var(--ink); border-color: var(--border); }

/* practice-panel y sus bloques (Herramienta del módulo, etc.) */
body.dark .practice-panel,
body.dark .practice-panel-block {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .practice-panel *,
body.dark .practice-panel-block * { color: var(--ink2); }
body.dark .practice-panel h4,
body.dark .practice-panel-title { color: var(--ink); }

/* lesson-card.dark: ya es oscura, pero aseguramos texto claro */
body.dark .lesson-card.dark .lesson-card-text,
body.dark .lesson-card.dark .lesson-card-text * { color: rgba(255,255,255,0.82); }

/* city-card (tarjetas de operadores): fondo claro */
body.dark .city-card,
body.dark .city-card-body {
  background: var(--paper2);
}
body.dark .city-card-body,
body.dark .city-card-body * { color: var(--ink2); }

/* ═══════════════════════════════════════════════════════════════════
   ARREGLO CLAVE — barras y bloques que usan var(--ink) como FONDO
   En claro, --ink es oscuro → estos fondos se ven oscuros (correcto).
   En oscuro, --ink se invierte a claro (es el color del texto) → estos
   fondos se volvían CLAROS/BLANCOS. Hay que fijarles un fondo oscuro.
   ═══════════════════════════════════════════════════════════════════ */
body.dark #topbar,
body.dark #nav,
body.dark #pilar-nav,
body.dark .mod-header,
body.dark .framework-header,
body.dark .speaker,
body.dark .accent,
body.dark .bridge,
body.dark .flashcard-front,
body.dark .quiz-score,
body.dark #review-btn {
  background: #20201a !important;
}

/* Los bloques de contenido destacados (theory, tldr) un punto más
   claros que las barras, para que se distingan del fondo de página */
body.dark .theory,
body.dark .tldr {
  background: #26261f !important;
}

/* Texto dentro de estas barras/bloques: debe ser claro (van sobre oscuro).
   Como su texto solía ser blanco fijo, normalmente ya está bien, pero
   forzamos los que heredan --ink. */
body.dark #pilar-nav .pnav-name,
body.dark #pilar-nav .pnav-num,
body.dark #nav *,
body.dark #topbar #topbar-title {
  color: rgba(255,255,255,0.92);
}

/* Dropdown de la pilar-nav: fondo oscuro y texto claro */
body.dark .pnav-drop {
  background: #20201a;
  border-color: rgba(255,255,255,0.12);
}
body.dark .pnav-drop-item,
body.dark .pnav-drop-item * { color: rgba(255,255,255,0.80); }
body.dark .pnav-drop-item:hover { background: rgba(255,255,255,0.06); }

/* ═══════════════════════════════════════════════════════════════════
   ARREGLOS DE PORTADAS DE BLOQUE (estilo bdm-*) en modo oscuro
   ═══════════════════════════════════════════════════════════════════ */

/* CTA final: usaba var(--ink) de fondo → se volvía blanco en dark */
body.dark .final-intro-cta {
  background: #20201a !important;
}
body.dark .final-intro-cta h2 { color: #fff; }
body.dark .final-intro-cta p  { color: rgba(255,255,255,.62); }

/* Tarjetas con fondo blanco fijo: roadmap, before/after, career */
body.dark .road-card,
body.dark .ba-card,
body.dark .ba-before,
body.dark .career-pill {
  background: var(--paper2) !important;
  border-color: var(--border);
}
body.dark .road-card h3,
body.dark .ba-card h3,
body.dark .career-pill { color: var(--ink); }
body.dark .road-card p,
body.dark .ba-card p,
body.dark .ba-item p { color: var(--ink2); }
body.dark .road-pilares { color: var(--gold-dark); }

/* before/after: el lado "después" ya es oscuro, el "antes" hay que adaptarlo */
body.dark .ba-before .ba-label { color: var(--ink3); }
body.dark .ba-after { background: #26261f !important; }

/* Tarjetas "para ti si" / "no es para ti" y check-items */
body.dark .bdm-check-item p { color: var(--ink2); }

/* Sample cards: la light hay que oscurecerla */
body.dark .bdm-sample-light {
  background: var(--paper2) !important;
  border-color: var(--border);
}
body.dark .bdm-sample-light h3 { color: var(--ink); }
body.dark .bdm-sample-light p,
body.dark .bdm-sample-light p strong { color: var(--ink2); }
body.dark .bdm-sample-light p strong { color: var(--ink); }

/* FAQ items con fondo claro */
body.dark .bdm-faq-item {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .bdm-faq-item h3 { color: var(--ink); }
body.dark .bdm-faq-item p { color: var(--ink2); }

/* Tool cards */
body.dark .bdm-tool-card {
  background: rgba(255,255,255,0.04);
  border-color: var(--border);
}
body.dark .bdm-tool-card h3 { color: #fff; }
body.dark .bdm-tool-card p { color: rgba(255,255,255,.65); }

/* Lista de pilares (bdm-pillar-item) en dark */
body.dark .bdm-pillar-item {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .bdm-pillar-item h3 { color: var(--ink); }
body.dark .bdm-pillar-item p { color: var(--ink2); }

/* ═══════════════════════════════════════════════════════════════════
   BADGE "GRATUITO" — distintivo visual claro y llamativo
   Funciona en modo claro y oscuro. Verde = gratis.
   ═══════════════════════════════════════════════════════════════════ */
.free-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #2a8a4f, #1f6b3c);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(42,138,79,0.35);
  border: none;
}
.free-badge::before { content: "🔓"; font-size: 14px; }

/* Variante grande para el hero */
.free-badge-lg {
  font-size: 13px;
  padding: 9px 20px;
}

/* Cinta diagonal "GRATIS" para la esquina de la lista de módulos */
.free-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(42,138,79,0.14);
  color: #2a8a4f;
  border: 1px solid rgba(42,138,79,0.35);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
}
body.dark .free-ribbon {
  background: rgba(42,138,79,0.18);
  color: #5fc488;
  border-color: rgba(42,138,79,0.45);
}
/* En dark el badge sólido se mantiene legible tal cual (verde + blanco) */

/* Banda informativa de "gratis" full-width */
.free-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(42,138,79,0.12), rgba(42,138,79,0.04));
  border: 1px solid rgba(42,138,79,0.30);
  border-radius: 14px;
  padding: 18px 22px;
  margin: 4px 40px 0;
}
.free-banner-icon {
  font-size: 26px;
  flex-shrink: 0;
}
.free-banner-text { font-size: 14px; line-height: 1.55; color: var(--ink2); }
.free-banner-text strong { color: var(--ink); }
body.dark .free-banner {
  background: linear-gradient(135deg, rgba(42,138,79,0.16), rgba(42,138,79,0.06));
  border-color: rgba(42,138,79,0.40);
}
@media(max-width:680px){ .free-banner { margin: 4px 16px 0; } }

/* ═══════════════════════════════════════════════════════════════════
   PÁGINA DE PERFIL en modo oscuro
   ═══════════════════════════════════════════════════════════════════ */

/* Tarjetas con fondo blanco fijo → panel oscuro */
body.dark .perfil-bloque-card,
body.dark .perfil-datos-card {
  background: var(--paper2) !important;
  border-color: var(--border);
}

/* Textos dentro de las tarjetas de bloque */
body.dark .perfil-bloque-nombre { color: var(--ink); }
body.dark .perfil-bloque-desc { color: var(--ink2); }

/* Badge "con acceso": usaba green-light (verde muy claro) de fondo */
body.dark .perfil-bloque-top,
body.dark .perfil-badge-acceso {
  background: rgba(42,138,79,0.18) !important;
  color: #5fc488 !important;
}

/* Badge "sin acceso": ya usa paper2, solo aseguramos el texto */
body.dark .perfil-badge-sin-acceso {
  background: rgba(255,255,255,0.06) !important;
  color: var(--ink3) !important;
}

/* Datos del usuario (filas label/valor) */
body.dark .perfil-dato-label { color: var(--ink3); }
body.dark .perfil-dato-valor { color: var(--ink); }
body.dark .perfil-dato-row { border-color: var(--border); }
body.dark .perfil-dato-editar { color: var(--gold-dark); }

/* Botón "ver" (transparente con texto) */
body.dark .perfil-btn-ver { color: var(--ink2); }
body.dark .perfil-btn-ver:hover { color: var(--ink); }

/* Placeholder (cuando no hay bloques) */
body.dark .perfil-placeholder {
  background: rgba(255,255,255,0.03);
  border-color: var(--border2);
}
body.dark .perfil-placeholder-icono { opacity: .7; }

/* Resultados de test dentro del bloque (si llevan fondo claro) */
body.dark .perfil-test-row,
body.dark .perfil-test-item {
  background: rgba(255,255,255,0.04);
  border-color: var(--border);
}
body.dark .perfil-test-row *,
body.dark .perfil-test-item * { color: var(--ink2); }

/* Email y nombre en la cabecera (la cabecera usa --gold de fondo, se mantiene) */
body.dark .perfil-seccion-titulo { color: var(--ink); }
body.dark .perfil-seccion-kicker { color: var(--gold-dark); }

/* ═══════════════════════════════════════════════════════════════════
   BUSCADOR AJAX — añadir al final de academia.css
   ═══════════════════════════════════════════════════════════════════ */
#buscador-wrap { position: relative; display: inline-flex; align-items: center; }

#buscador-toggle {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; padding: 0;
  transition: background .15s, border-color .15s;
}
#buscador-toggle:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.28);
}

/* Panel desplegable */
#buscador-panel {
  position: absolute;
  top: 44px; right: 0;
  width: 360px; max-width: 86vw;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  padding: 12px;
  z-index: 500;
}
#buscador-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  background: var(--paper2);
  color: var(--ink);
  outline: none;
}
#buscador-input:focus { border-color: var(--gold); }

#buscador-resultados { margin-top: 10px; max-height: 60vh; overflow-y: auto; }

.buscador-hint {
  padding: 14px 8px; text-align: center;
  color: var(--ink3); font-size: 13px;
}

.buscador-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 8px; border-radius: 9px;
  text-decoration: none; color: var(--ink);
  transition: background .12s;
}
.buscador-item:hover { background: var(--paper2); }

.buscador-dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 6px; flex-shrink: 0;
}
.buscador-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.buscador-item-titulo {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 6px;
}
.buscador-item-ruta {
  font-size: 11.5px; color: var(--ink3);
  display: flex; align-items: center; gap: 6px;
}
.buscador-lock { font-size: 11px; }
.buscador-pago {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--gold-dark);
  background: rgba(200,146,42,0.14);
  border: 1px solid rgba(200,146,42,0.3);
  border-radius: 10px; padding: 1px 7px;
}

/* ── Modo oscuro ─────────────────────────────────────────────────── */
body.dark #buscador-panel {
  background: #20201a;
  border-color: var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
body.dark #buscador-input {
  background: rgba(255,255,255,0.05);
  border-color: var(--border);
  color: var(--ink);
}
body.dark .buscador-item:hover { background: rgba(255,255,255,0.06); }
body.dark .buscador-item-titulo { color: var(--ink); }
body.dark .buscador-pago {
  color: #e0b052;
  background: rgba(200,146,42,0.18);
  border-color: rgba(200,146,42,0.4);
}

@media(max-width:600px){
  #buscador-panel { right: -40px; width: 300px; }
}

/* ═══════════════════════════════════════════════════════════════════
   TÍTULO DEL PILAR: se expande al pasar el ratón (hover)
   Añadir al final de academia.css.
   En reposo el título va truncado (para que quepan todos); al hacer
   hover sobre el pilar, se muestra completo.
   ═══════════════════════════════════════════════════════════════════ */

/* Al pasar el ratón por el pilar, el nombre deja de truncarse */
.pnav-item:hover > .pnav-btn .pnav-name {
  max-width: none;         /* quita el límite de ancho */
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;     /* se expande en una línea */
}

/* El botón crece para acomodar el título completo */
.pnav-item:hover > .pnav-btn {
  z-index: 210;            /* por encima de los pilares vecinos */
}

/* En pantallas medianas (donde el límite era 80px), mismo comportamiento */
@media(max-width:900px){
  .pnav-item:hover > .pnav-btn .pnav-name {
    max-width: none;
  }
}

/* En móvil el nombre está oculto (display:none). Al hacer hover/tap,
   lo mostramos para que se pueda ver el título completo. */
@media(max-width:640px){
  .pnav-item:hover > .pnav-btn .pnav-name {
    display: inline;
    max-width: none;
  }
}

/* Transición suave del título al expandirse */
.pnav-name {
  transition: max-width .2s ease;
}
/* ═══════════════════════════════════════════════════════════════════
   MODO OSCURO — BLOQUE DE CIERRE
   Cubre todos los componentes con fondo claro fijo (#fff, gradientes
   claros, colores -light) que aún no tenían regla body.dark.
   Añadir al FINAL de academia.css (después de todo el dark mode actual).
   ═══════════════════════════════════════════════════════════════════ */

/* ── TRACK CARDS (junior / senior) — gradientes claros fijos ──────── */
body.dark .track-card.junior {
  background: linear-gradient(135deg, #241d0a, #2a2008);
  border-color: rgba(252,211,77,0.25);
}
body.dark .track-card.senior {
  background: linear-gradient(135deg, #0a1620, #0e2030);
  border-color: rgba(125,211,252,0.25);
}
body.dark .track-card.junior .track-tag { color: #e0b052; }
body.dark .track-card.senior .track-tag { color: #7dc4e8; }
body.dark .track-title { color: var(--ink); }
body.dark .track-items li { color: var(--ink2); }

/* ── WELCOME CARDS ────────────────────────────────────────────────── */
body.dark .welcome-card {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .welcome-card-title { color: var(--ink); }
body.dark .welcome-card-text { color: var(--ink2); }

/* ── ROADMAP CARDS (componente .roadmap, no bdm-roadmap) ──────────── */
body.dark .roadmap-card {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .roadmap-title { color: var(--ink); }
body.dark .roadmap-desc { color: var(--ink2); }
body.dark .roadmap-num { color: var(--border2); }

/* ── KPI CARDS ────────────────────────────────────────────────────── */
body.dark .kpi-card {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .kpi-num { color: var(--ink); }
body.dark .kpi-label { color: var(--ink3); }
/* La variante accent ya tiene su regla; reforzamos texto */
body.dark .kpi-card.accent { background: #111110; }
body.dark .kpi-card.accent .kpi-num { color: var(--gold-dark); }

/* ── METRIC CARDS ─────────────────────────────────────────────────── */
body.dark .metric-card {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .metric-val { color: var(--ink); }
body.dark .metric-lbl { color: var(--ink3); }

/* ── CRITERIA CARDS ───────────────────────────────────────────────── */
body.dark .criteria-card {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .criteria-label { color: var(--ink3); }
body.dark .criteria-val { color: var(--ink); }
body.dark .criteria-desc { color: var(--ink3); }

/* ── SECTION-CONTEXT ──────────────────────────────────────────────── */
body.dark .section-context {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .section-context * { color: var(--ink2); }
body.dark .section-context strong { color: var(--ink); }

/* ── QUIZ BLOCK (el de .quiz-block / .quiz-scenario) ──────────────── */
body.dark .quiz-block {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .quiz-scenario {
  background: #282826;
  color: var(--ink2);
}
body.dark .quiz-scenario strong { color: var(--ink); }
body.dark .quiz-option {
  background: #1e1e1c;
  border-color: rgba(255,255,255,0.1);
  color: var(--ink2);
}
body.dark .quiz-option-letter {
  background: #282826;
  border-color: var(--border);
  color: var(--ink3);
}
body.dark .quiz-answer {
  background: rgba(42,107,72,0.1);
  border-color: rgba(42,107,72,0.2);
  color: var(--ink2);
}

/* ── QUIZ CARD INTERACTIVO (.quiz-card / .quiz-opt) ───────────────── */
body.dark .quiz-card {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .quiz-q { color: var(--ink); }
body.dark .quiz-opt {
  background: #1e1e1c;
  border-color: var(--border2);
  color: var(--ink2);
}
body.dark .quiz-opt:hover:not(.answered) {
  border-color: var(--gold);
  background: rgba(200,146,42,0.08);
}
body.dark .quiz-opt.correct {
  border-color: var(--green);
  background: rgba(42,107,72,0.14);
  color: var(--ink);
}
body.dark .quiz-opt.wrong {
  border-color: var(--coral);
  background: rgba(192,67,42,0.14);
  color: var(--ink);
}
body.dark .quiz-letter { background: var(--border2); }
body.dark .quiz-explanation {
  background: #282826;
  color: var(--ink2);
}
body.dark .quiz-explanation strong { color: var(--ink); }

/* ── FLASHCARDS ───────────────────────────────────────────────────── */
body.dark .flashcard {
  border-color: var(--border);
}
body.dark .flashcard-back {
  background: #1a2e2a;
  border-top-color: var(--teal);
}
body.dark .flashcard-back-text { color: var(--ink2); }
body.dark .flashcard-back-label { color: #5fa3a3; }

/* ── PLAN30 (plan de 30 días) ─────────────────────────────────────── */
body.dark .plan30-week {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .plan30-task { color: var(--ink2); border-color: var(--border); }
body.dark .plan30-task strong { color: var(--ink); }

/* ── OS-GRID (semana operativa) ───────────────────────────────────── */
body.dark .os-day {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .os-day-header { background: #2e2e2c; }
body.dark .os-task { color: var(--ink2); border-color: var(--border); }
body.dark .os-task strong { color: var(--ink); }
body.dark .os-task-num { color: var(--ink3); }

/* ── KEYWORDS (.kw) ───────────────────────────────────────────────── */
body.dark .kw {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .kw-term { color: var(--ink); }
body.dark .kw-def { color: var(--ink3); }

/* ── FLOW-VERTICAL (pasos numerados) ──────────────────────────────── */
body.dark .flow-vertical .flow-step {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .flow-vertical .flow-step > div { color: var(--ink2); }
body.dark .flow-vertical .flow-step strong { color: var(--ink); }
body.dark .flow-step-name { color: var(--ink); }

/* ── LESSON HEADER / FRAMEWORK HEADER (usan paper2, reforzamos) ───── */
body.dark .lesson-header,
body.dark .framework-header {
  background: #2e2e2c;
  border-bottom-color: var(--border);
}
body.dark .lesson-title { color: var(--ink); }
body.dark .lesson-desc { color: var(--ink2); }
body.dark .lesson-duration { color: var(--ink3); }
body.dark .step-name { color: var(--ink); }
body.dark .step-desc { color: var(--ink2); }

/* ── PREREQ / WHO-BANNER ──────────────────────────────────────────── */
body.dark .prereq {
  background: var(--paper2);
  color: var(--ink2);
}
body.dark .prereq strong { color: var(--ink); }
body.dark .who-banner {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .who-text { color: var(--ink2); }
body.dark .who-text strong { color: var(--ink); }

/* ── SECTION-SUMMARY ──────────────────────────────────────────────── */
body.dark .section-summary {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .section-summary * { color: var(--ink2); }
body.dark .section-summary strong { color: var(--ink); }

/* ── REVIEW-CARD ──────────────────────────────────────────────────── */
body.dark .review-card {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .review-card-body { color: var(--ink2); }

/* ── CITY CARDS ───────────────────────────────────────────────────── */
body.dark .city-card {
  border-color: var(--border);
}
body.dark .city-card-body { background: #282826; }
body.dark .city-card-body li { color: var(--ink2); }
body.dark .city-card-title { color: var(--ink); }

/* ── COMP-TABLE / VIABILITY (filas alternas claras) ───────────────── */
body.dark .comp-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.03);
}
body.dark .gancho-table tbody tr:hover,
body.dark .concesion-table tbody tr:nth-child(even) {
  background: #282826;
}

/* ── PROGRESS BLOCK ───────────────────────────────────────────────── */
body.dark .progress-label { color: var(--ink3); }

/* ── LEARNING-BOX (refuerzo, usa paper2) ──────────────────────────── */
body.dark .learning-box {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .learning-box li { color: var(--ink2); }
body.dark .learning-box-title { color: var(--ink3); }

/* ── COMP-TABLE-WRAP: quitar el degradado blanco de scroll en móvil ── */
@media (max-width:640px){
  body.dark .comp-table-wrap {
    background:
      linear-gradient(to right, #1e1e1c 30%, rgba(30,30,28,0)),
      linear-gradient(to right, rgba(30,30,28,0), #1e1e1c 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(255,255,255,0.10), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(255,255,255,0.10), transparent) 100% 0;
    background-repeat:no-repeat;
    background-size:40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment:local,local,scroll,scroll;
  }
}

/* ── EDITAR PERFIL (formulario) ───────────────────────────────────── */
body.dark .perfil-edit-card {
  background: var(--paper2);
  border-color: var(--border);
}
body.dark .perfil-edit-titulo { color: var(--ink); }
body.dark .perfil-label { color: var(--ink3); }
body.dark .perfil-input {
  background: rgba(255,255,255,0.05);
  border-color: var(--border);
  color: var(--ink);
}
body.dark .perfil-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,146,42,0.15);
}
body.dark .perfil-alert-ok {
  background: rgba(42,107,72,0.15);
  color: #5fc488;
  border-color: rgba(42,107,72,0.3);
}

/* ── HOME: filas de pilares y precios (refuerzo de texto) ─────────── */
body.dark .home-pilar-row { color: var(--ink3); border-color: var(--border); }
body.dark .home-precio-items div { color: var(--ink2); border-color: var(--border); }
body.dark .home-precio-label { color: var(--ink3); }
body.dark .home-precio-num { color: var(--ink); }
body.dark .home-precio-sub { color: var(--ink3); }
body.dark .home-precio-btn-ghost {
  color: var(--ink);
  border-color: var(--border2);
}
body.dark .home-diferencia-titulo { color: var(--ink); }
body.dark .home-diferencia-desc { color: var(--ink3); }
body.dark .home-faq-item { border-color: var(--border); }
body.dark .home-faq-item summary { color: var(--ink); }
body.dark .home-faq-resp { color: var(--ink3); }
body.dark .home-proximo-para { color: var(--ink3); }
body.dark .home-proximo-item { color: var(--ink3); border-color: var(--border); }
body.dark .home-proximo-nota { color: var(--ink3); }
body.dark .home-bloque-stats span { color: var(--ink3); }
body.dark .home-bloque-stats { border-color: var(--border); }
body.dark .home-bloque-stats div { border-color: var(--border); }

/* ── PROPORTION / DONUT (fondos paper2 ya, reforzamos centro) ─────── */
body.dark .proportion-ring::after { background: var(--paper2); }
body.dark .proportion-center strong { color: var(--ink); }
body.dark .proportion-center span { color: var(--ink3); }
body.dark .proportion-leg-item { color: var(--ink2); }
body.dark .donut-leg-text { color: var(--ink2); }
body.dark .donut-leg-text strong { color: var(--ink); }

/* ── BAR-CHART (pista clara) ──────────────────────────────────────── */
body.dark .bar-track { background: rgba(255,255,255,0.08); }
body.dark .bar-label { color: var(--ink2); }

/* ── VTIMELINE ────────────────────────────────────────────────────── */
body.dark .vt-item::before { border-color: var(--paper); }
body.dark .vt-title { color: var(--ink); }
body.dark .vt-desc { color: var(--ink2); }
body.dark .vtimeline::before { background: var(--border); }

/* ═══════════════════════════════════════════════════════════════════
   Bloque copiable "Tu caso enlazado" (cs-out / pp-lbl / pp-copy)
   en modo oscuro. Añadir al final de academia.css.
   ═══════════════════════════════════════════════════════════════════ */

/* La caja contenedora */
body.dark .cs-out {
  background: #1a1a18 !important;
  border-color: var(--border) !important;
}

/* La etiqueta superior "Tu caso enlazado" */
body.dark .pp-lbl {
  color: var(--ink3) !important;
}
body.dark .pp-lbl span {
  color: var(--ink3) !important;
}

/* El texto del ejemplo (pre) */
body.dark .cs-out pre,
body.dark #p6m3-out,
body.dark [id$="-out"] {
  background: transparent !important;
  color: var(--ink2) !important;
}

/* El botón "Copiar" */
body.dark .pp-copy {
  background: rgba(255,255,255,0.08) !important;
  color: var(--ink) !important;
  border-color: var(--border2) !important;
}
body.dark .pp-copy:hover {
  background: rgba(255,255,255,0.16) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   playbook-header (cabecera del "caso de 90 segundos" / playbook)
   ═══════════════════════════════════════════════════════════════════ */
body.dark .playbook-header {
  background: #282826 !important;
  border-color: var(--border) !important;
}
/* Textos dentro de la cabecera */
body.dark .playbook-header,
body.dark .playbook-header * {
  color: var(--ink) !important;
}
body.dark .playbook-title { color: var(--ink) !important; }
body.dark .playbook-sub,
body.dark .playbook-header p { color: var(--ink2) !important; }
 
/* El badge dorado se mantiene visible sobre el fondo oscuro */
body.dark .playbook-header .playbook-badge {
  background: rgba(200,146,42,0.18) !important;
  color: #e0b052 !important;
}
 
/* Por si el cuerpo del playbook también tiene fondo claro */
body.dark .playbook,
body.dark .playbook-body {
  background: var(--paper2) !important;
  border-color: var(--border) !important;
}
body.dark .playbook-body,
body.dark .playbook-body * { color: var(--ink2) !important; }
body.dark .playbook-body strong { color: var(--ink) !important; }

/* ═══════════════════════════════════════════════════════════════════
   MODO OSCURO — componentes embebidos en los módulos (Pilar 6 y otros)
   Estas clases están en el <style> de cada módulo y usan var(--ink) o
   var(--card-bg) como FONDO. En claro se ven oscuras/claras bien; en
   dark, --ink se invierte a claro → fondo blanco. Aquí lo fijamos.
   Añadir al FINAL de academia.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fondos que usaban var(--ink) → oscuro fijo (barra/etiqueta oscura) ── */
body.dark .cs-out,
body.dark .micro-script {
  background: #20201a !important;
}
body.dark .playbook-badge {
  background: #33322c !important;
  color: #fff !important;
}
/* .comp-table th ya se cubre en el dark mode general, pero por si acaso */
body.dark .comp-table th {
  background: #20201a !important;
}

/* ── Fondos que usaban var(--card-bg) → panel oscuro ──────────────── */
body.dark .concept-card,
body.dark .example-box,
body.dark .glossary-item,
body.dark .learning-thread,
body.dark .playbook-header,
body.dark .process-step,
body.dark .script-block,
body.dark .toolbox,
body.dark .visual-card {
  background: var(--paper2) !important;
  border-color: var(--border) !important;
}

/* Los contenedores de sección (spin, case) con card-bg de fondo */
body.dark [id$="-spin"],
body.dark [id$="-case"] {
  background: var(--paper2) !important;
  border-color: var(--border) !important;
}

/* La cabecera del playbook: un punto más oscura para separarse del cuerpo */
body.dark .playbook-header {
  background: #2a2a26 !important;
  border-bottom-color: var(--border) !important;
}

/* ── Refuerzo de texto donde el contenido lleva strong/labels ─────── */
body.dark .concept-card strong,
body.dark .example-box strong,
body.dark .script-block strong,
body.dark .visual-card strong,
body.dark .glossary-item strong { color: var(--ink) !important; }

/* Micro-script: su texto ya es claro (rgba 255 76%), el strong blanco: OK.
   Solo aseguramos que sobre el nuevo fondo se lea bien. */
body.dark .micro-script p { color: rgba(255,255,255,.78) !important; }
body.dark .micro-script strong { color: #fff !important; }

/* cs-out: la etiqueta y el pre ya usan color claro; el botón Copiar
   tiene borde claro translúcido, se mantiene. Aseguramos el pre. */
body.dark .cs-out pre { color: rgba(255,255,255,.88) !important; }

/* ── Campos de formulario embebidos (select, textarea) en dark ────── */
body.dark [id$="-spin"] select,
body.dark [id$="-spin"] textarea,
body.dark [id$="-case"] textarea {
  background: rgba(255,255,255,0.05) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* ── Cajas que usan paper2 (ya se adaptan) — solo reforzamos texto ── */
body.dark .mistake-card,
body.dark .mini-template,
body.dark .pedagogy-note,
body.dark .bridge-next {
  border-color: var(--border) !important;
}
body.dark .mistake-card *,
body.dark .mini-template *,
body.dark .pedagogy-note * { color: var(--ink2) !important; }
body.dark .mistake-card strong,
body.dark .mini-template strong,
body.dark .pedagogy-note strong { color: var(--ink) !important; }