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

/* === 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)}
.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); }