:root {
    --brand-900: #0a1628;
    --brand-800: #0f2044;
    --brand-700: #163060;
    --brand-600: #1e4080;
    --brand-500: #2756a8;
    --brand-400: #3b72d4;
    --brand-300: #6495e8;
    --brand-200: #a8c4f4;
    --brand-100: #dce9fc;
    --brand-50:  #f0f6ff;
    --teal-500:  #0d9488;
    --teal-400:  #14b8a6;
    --teal-100:  #ccfbf1;
    --amber-500: #f59e0b;
    --amber-100: #fef3c7;
    --rose-500:  #f43f5e;
    --rose-100:  #ffe4e6;
    --green-500: #22c55e;
    --green-100: #dcfce7;
    --purple-500:#8b5cf6;
    --purple-100:#ede9fe;
    --gray-900:  #0f172a;
    --gray-800:  #1e293b;
    --gray-700:  #334155;
    --gray-600:  #475569;
    --gray-500:  #64748b;
    --gray-400:  #94a3b8;
    --gray-300:  #cbd5e1;
    --gray-200:  #e2e8f0;
    --gray-100:  #f1f5f9;
    --gray-50:   #f8fafc;
    --white:     #ffffff;
    --sidebar-w: 280px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,.10);
    --shadow-lg: 0 10px 40px rgba(0,0,0,.14);
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; font-size: 16px; }

  body {
    font-family: 'Inter', sans-serif;
    background: var(--gray-50);
    color: var(--gray-800);
    line-height: 1.7;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }

  /* ── SIDEBAR ─────────────────────────────────────────── */
  #sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: var(--brand-900);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 200;
    box-shadow: var(--shadow-lg);
    transition: transform .25s ease-out;
  }

  .sidebar-logo {
    padding: 28px 24px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .sidebar-logo .logo-icon {
    width: 40px; height: 40px;
    background: var(--gray-800);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    margin-bottom: 12px;
  }
  .icon { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .icon-w { color: var(--white); }
  .icon-b { color: var(--gray-900); }
  .logo-icon .icon { width: 24px; height: 24px; }
  .sidebar-logo h1 {
    font-size: 1rem; font-weight: 700;
    color: var(--white);
    letter-spacing: .02em;
  }
  .sidebar-logo p {
    font-size: .72rem; color: var(--brand-300);
    margin-top: 2px;
  }

  .nav-section-label {
    padding: 16px 24px 6px;
    font-size: .65rem; font-weight: 700;
    color: var(--brand-400);
    text-transform: uppercase;
    letter-spacing: .1em;
  }

  nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 24px;
    color: var(--brand-200);
    text-decoration: none;
    font-size: .9rem; font-weight: 500;
    transition: background .15s, color .15s;
    border-left: 3px solid transparent;
  }
  nav a .nav-icon { display: flex; align-items: center; justify-content: center; }
  nav a:hover { background: rgba(255,255,255,.06); color: var(--white); }
  nav a.active {
    background: rgba(59,114,212,.18);
    color: var(--white);
    border-left-color: var(--brand-400);
  }

  /* Sub-navegación de especialistas */
  .nav-subsections {
    margin: 0 0 4px 0;
    border-left: 1px solid rgba(255,255,255,.1);
    margin-left: 40px;
  }
  .nav-sub {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 5px 16px !important;
    color: var(--brand-300) !important;
    font-size: .78rem !important;
    font-weight: 400 !important;
    border-left: 2px solid transparent !important;
    text-decoration: none;
    transition: color .15s, background .15s;
  }
  .nav-sub:hover { color: var(--white) !important; background: rgba(255,255,255,.04) !important; }
  .nav-sub.active { color: var(--white) !important; border-left-color: var(--brand-400) !important; }
  .nav-sub-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
    flex-shrink: 0;
  }

  .sidebar-footer {
    margin-top: auto;
    padding: 20px 24px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .72rem;
    color: var(--brand-400);
  }
  .version-badge {
    display: inline-block;
    background: rgba(59,114,212,.25);
    color: var(--brand-300);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .68rem; font-weight: 600;
    margin-top: 6px;
  }

  /* ── MAIN ─────────────────────────────────────────────── */
  main {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── HERO ─────────────────────────────────────────────── */
  .hero {
    background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 50%, var(--teal-500) 100%);
    padding: 72px 64px 60px;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
  .hero-content { position: relative; }
  .hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: var(--brand-100);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: .78rem; font-weight: 600;
    letter-spacing: .04em;
    margin-bottom: 20px;
  }
  .hero-badge .dot {
    width: 7px; height: 7px;
    background: var(--white);
    border-radius: 50%;
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%,100% { opacity: 1; }
    50% { opacity: .4; }
  }
  .hero h1, .hero h2 {
    font-size: 2.6rem; font-weight: 800;
    color: var(--white);
    line-height: 1.15;
    max-width: 700px;
    margin-bottom: 16px;
  }
  .hero h2 span { color: var(--teal-400); }
  .hero p {
    color: var(--brand-200);
    max-width: 560px;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 32px;
  }
  .hero-stats {
    display: flex; gap: 40px; flex-wrap: wrap;
  }
  .stat-item { text-align: center; }
  .stat-value {
    display: block;
    font-size: 1.9rem; font-weight: 800;
    color: var(--white);
    line-height: 1;
  }
  .stat-label {
    font-size: .73rem; font-weight: 500;
    color: var(--brand-200);
    text-transform: uppercase; letter-spacing: .06em;
    margin-top: 4px;
  }

  /* ── SECTIONS ─────────────────────────────────────────── */
  section {
    padding: 56px 64px;
    border-bottom: 1px solid var(--gray-200);
  }
  section:last-of-type { border-bottom: none; }

  .section-header {
    display: flex; align-items: flex-start; gap: 16px;
    margin-bottom: 36px;
  }
  .section-icon {
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--gray-200);
  }
  .section-icon .icon { width: 24px; height: 24px; }

  .section-title {
    font-size: 1.5rem; font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
  }
  .section-subtitle {
    font-size: .9rem; color: var(--gray-500);
  }

  h3 {
    font-size: 1.2rem; font-weight: 700;
    color: var(--gray-900);
    margin: 32px 0 14px;
  }
  h3:first-child { margin-top: 0; }

  p { margin-bottom: 16px; color: var(--gray-700); font-size: 1rem; line-height: 1.7; }
  p:last-child { margin-bottom: 0; }

  /* ── CARDS ────────────────────────────────────────────── */
  .card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
  }
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
  }
  .card-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    background: var(--gray-200);
  }
  .card-icon .icon { width: 22px; height: 22px; }
  .card h4 {
    font-size: 1rem; font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
  }
  .card p { font-size: .95rem; color: var(--gray-700); margin: 0; line-height: 1.6; }

  /* ── PHASE STEPPER ────────────────────────────────────── */
  .phases {
    display: flex; flex-direction: column; gap: 0;
    position: relative;
    margin-bottom: 32px;
  }
  .phase-item {
    display: flex; gap: 20px;
    padding-bottom: 28px;
    position: relative;
  }
  .phase-item:last-child { padding-bottom: 0; }
  .phase-left {
    display: flex; flex-direction: column; align-items: center;
    gap: 0; flex-shrink: 0;
  }
  .phase-dot {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 800;
    color: var(--white);
    background: var(--gray-800);
    flex-shrink: 0;
    z-index: 1;
  }
  .phase-line {
    width: 2px;
    flex: 1;
    background: var(--gray-200);
    margin: 4px 0;
  }
  .phase-item:last-child .phase-line { display: none; }
  .phase-body {
    flex: 1;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    box-shadow: var(--shadow-sm);
  }
  .phase-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    margin-bottom: 10px;
  }
  .phase-title {
    font-size: .95rem; font-weight: 700;
    color: var(--gray-900);
  }
  .badges { display: flex; gap: 6px; flex-wrap: wrap; }
  .badge {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .7rem; font-weight: 600;
  }
  .badge-blue   { background: var(--brand-100); color: var(--brand-600); }
  .badge-teal   { background: var(--teal-100); color: var(--teal-500); }
  .badge-amber  { background: var(--amber-100); color: #92400e; }
  .badge-rose   { background: var(--rose-100); color: #9f1239; }
  .badge-green  { background: var(--green-100); color: #166534; }
  .badge-purple { background: var(--purple-100); color: #5b21b6; }
  .badge-gray   { background: var(--gray-100); color: var(--gray-600); }

  .phase-body p { font-size: .95rem; color: var(--gray-700); margin: 0 0 8px; line-height: 1.55; }
  .deliverables {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 10px;
  }
  .deliverable-tag {
    background: var(--gray-100);
    color: var(--gray-700);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: .73rem; font-weight: 500;
  }

  /* ── TABLES ───────────────────────────────────────────── */
  .table-wrap {
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 28px;
    box-shadow: var(--shadow-sm);
  }
  table { width: 100%; min-width: fit-content; border-collapse: collapse; }
  thead { background: var(--gray-900); }
  thead th {
    padding: 14px 18px;
    text-align: left;
    font-size: .8rem; font-weight: 700;
    color: var(--gray-200);
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  tbody tr { background: var(--white); border-bottom: 1px solid var(--gray-100); }
  tbody tr:last-child { border-bottom: none; }
  tbody tr:hover { background: var(--gray-50); }
  tbody td {
    padding: 14px 18px;
    font-size: .95rem;
    color: var(--gray-800);
    vertical-align: top;
    line-height: 1.55;
  }
  td strong { color: var(--gray-900); font-weight: 600; }
  td .pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: .72rem; font-weight: 600;
  }

  /* ── FLOW DIAGRAM ─────────────────────────────────────── */
  .flow-container {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-sm);
  }
  .flow-title {
    font-size: .95rem; font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 8px;
  }
  .flow-title .icon { width: 18px; height: 18px; }
  .flow-steps {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
  }
  .flow-step {
    flex: 1;
    min-width: 120px;
    background: var(--brand-50);
    border: 2px solid var(--brand-200);
    border-radius: var(--radius-md);
    padding: 14px 12px;
    text-align: center;
    position: relative;
  }
  .flow-step.trigger { background: var(--gray-100); border-color: var(--gray-400); }
  .flow-step.action  { background: var(--gray-50); border-color: var(--gray-300); }
  .flow-step.condition { background: var(--gray-100); border-color: var(--gray-400); }
  .flow-step.output  { background: var(--gray-200); border-color: var(--gray-500); }
  .flow-step .step-label {
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 6px;
    color: var(--gray-700);
  }
  .flow-step .step-text {
    font-size: .88rem; font-weight: 600;
    color: var(--gray-800);
    line-height: 1.45;
  }
  .flow-arrow {
    display: flex; align-items: center;
    padding: 0 6px;
    color: var(--gray-400);
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  /* ── CODE BLOCKS ──────────────────────────────────────── */
  .code-block {
    background: var(--gray-900);
    border-radius: var(--radius-md);
    margin: 16px 0 24px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }
  .code-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    background: var(--gray-800);
    cursor: pointer;
    user-select: none;
    gap: 10px;
    transition: background .15s;
  }
  .code-header:hover { background: var(--gray-700); }
  .code-chevron {
    display: flex; align-items: center;
    color: var(--gray-400);
    flex-shrink: 0;
    transition: transform .2s ease;
  }
  .code-chevron svg { display: block; }
  .code-block.open .code-chevron { transform: rotate(90deg); }
  .code-lang {
    flex: 1;
    font-size: .72rem; font-weight: 700;
    color: var(--brand-300);
    text-transform: uppercase; letter-spacing: .08em;
  }
  .code-dots { display: flex; gap: 5px; flex-shrink: 0; }
  .code-dots span {
    width: 10px; height: 10px; border-radius: 50%;
  }
  .dot-red   { background: #ff5f57; }
  .dot-amber { background: #febc2e; }
  .dot-green { background: #28c840; }
  /* Pre oculto por defecto; visible cuando .open */
  .code-block pre {
    display: none;
    padding: 20px 22px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
  }
  .code-block.open pre { display: block; }
  code {
    font-family: 'JetBrains Mono', monospace;
    font-size: .8rem;
    line-height: 1.65;
    color: #e2e8f0;
  }
  /* Inline code fuera de bloques de código (tablas, párrafos, listas) */
  :not(pre) > code {
    color: var(--gray-900);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .76rem;
  }
  .c-comment { color: #64748b; }
  .c-key     { color: #93c5fd; }
  .c-str     { color: #86efac; }
  .c-num     { color: #fda4af; }
  .c-fn      { color: #c4b5fd; }
  .c-kw      { color: #f9a8d4; }

  /* ── INTEGRATION MAP ──────────────────────────────────── */
  .integration-map {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
  }
  .integration-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s;
  }
  .integration-card:hover { box-shadow: var(--shadow-md); }
  .int-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
  }
  .int-logo {
    width: 42px; height: 42px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
  }
  .int-name { font-size: .9rem; font-weight: 700; color: var(--gray-900); }
  .int-type { font-size: .73rem; color: var(--gray-500); }
  .int-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 7px 0;
    border-top: 1px solid var(--gray-100);
    font-size: .8rem;
  }
  .int-row:first-child { border-top: none; }
  .int-label { color: var(--gray-500); font-weight: 500; min-width: 90px; }
  .int-value { color: var(--gray-800); font-weight: 500; text-align: right; }

  /* ── KPI CARDS ────────────────────────────────────────── */
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
  }
  .kpi-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
  }
  .kpi-card .kpi-icon {
    margin-bottom: 10px;
  }
  .kpi-card .kpi-icon .icon { width: 28px; height: 28px; }
  .kpi-metric {
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--gray-500);
    margin-bottom: 6px;
  }
  .kpi-target {
    font-size: 1.5rem; font-weight: 800;
    color: var(--gray-900);
    line-height: 1;
    margin-bottom: 4px;
  }
  .kpi-source { font-size: .73rem; color: var(--gray-500); }
  .kpi-freq {
    display: inline-block;
    margin-top: 10px;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: .68rem; font-weight: 600;
    background: var(--brand-100);
    color: var(--brand-600);
  }

  /* ── ALERT BOXES ──────────────────────────────────────── */
  .alert {
    display: flex; gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: .85rem;
  }
  .alert-icon { flex-shrink: 0; margin-top: 1px; }
  .alert-icon .icon { width: 20px; height: 20px; }
  .alert-blue   { background: var(--brand-50); border-left: 4px solid var(--brand-400); }
  .alert-amber  { background: var(--amber-100); border-left: 4px solid var(--amber-500); }
  .alert-green  { background: var(--green-100); border-left: 4px solid var(--green-500); }
  .alert p { margin: 0; color: var(--gray-700); }
  .alert strong { color: var(--gray-900); }

  /* ── MOBILE MENU TOGGLE ───────────────────────────────── */
  .menu-toggle {
    display: none;
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 150;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: var(--brand-900);
    color: var(--white);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: var(--shadow-md);
    transition: background .2s;
  }
  .menu-toggle:hover { background: var(--brand-800); }
  .menu-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform .25s, opacity .25s;
  }
  body.menu-open .menu-toggle .menu-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  body.menu-open .menu-toggle .menu-toggle-bar:nth-child(2) {
    opacity: 0;
  }
  body.menu-open .menu-toggle .menu-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
  }

  /* ── RESPONSIVE ───────────────────────────────────────── */
  @media (max-width: 900px) {
    /* Prevent page-wide horizontal scroll */
    body { overflow-x: hidden; max-width: 100vw; }

    /* Menu */
    .menu-toggle { display: flex; }
    .menu-backdrop { display: block; pointer-events: none; }
    body.menu-open .menu-backdrop { pointer-events: auto; opacity: 1; }
    #sidebar { transform: translateX(-100%); }
    body.menu-open #sidebar { transform: translateX(0); }
    main, main.layout-simple { margin-left: 0; overflow-x: hidden; }

    /* General hero (index page) */
    .hero {
      /* padding-right: 68px deja espacio para el botón hamburguesa (44px + 16px margen + 8px buffer) */
      padding: 52px 68px 32px 20px;
    }
    .hero h1, .hero h2 { font-size: 1.55rem; }
    .hero p { font-size: .9rem; margin-bottom: 16px; }
    .hero-stats { gap: 20px; }
    .stat-value { font-size: 1.4rem; }

    /* General sections (index page) */
    section { padding: 28px 20px 32px; }

    /* Global elements */
    .flow-steps { flex-direction: column; }
    .flow-arrow { transform: rotate(90deg); align-self: center; }
    .priority-zero-banner { padding: 8px 16px; font-size: .72rem; }
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; }
    .table-wrap table { min-width: 440px; }
    .code-block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .integration-map { grid-template-columns: 1fr; }
    .card-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
    .kpi-grid { grid-template-columns: 1fr; }
    .two-col { grid-template-columns: 1fr; }
    .content-calendar { min-width: 340px; }

    /* ── LAYOUT-SIMPLE: HERO ─────────────────────────────── */
    main.layout-simple .hero {
      padding: 52px 68px 24px 20px;
    }
    main.layout-simple .hero h1,
    main.layout-simple .hero h2 { font-size: 1.5rem; }
    main.layout-simple .hero p { font-size: .9rem; margin-bottom: 10px; }

    /* ── LAYOUT-SIMPLE: PAGE CONTENT ────────────────────── */
    main.layout-simple .page-content {
      padding: 16px 16px 32px;
    }
    main.layout-simple .page-content section { padding: 0; border: none; }
    main.layout-simple .section-header { margin-bottom: 16px; }
    main.layout-simple .section-title { font-size: 1.2rem; }
    main.layout-simple .section-subtitle { font-size: .82rem; }
    main.layout-simple h3 { margin: 16px 0 8px; font-size: 1.05rem; }
    main.layout-simple h4 { font-size: .92rem; margin: 12px 0 6px; }
    main.layout-simple p { margin-bottom: 10px; }
    main.layout-simple .alert { padding: 10px 12px; margin-bottom: 12px; font-size: .85rem; }
    main.layout-simple .card { padding: 14px; }
    main.layout-simple .card-icon { margin-bottom: 8px; }
    main.layout-simple .card h4 { font-size: .9rem; margin-bottom: 6px; }
    main.layout-simple .table-wrap { margin-bottom: 12px; }
    main.layout-simple .flow-container { padding: 14px; margin-bottom: 12px; }
    main.layout-simple .info-box { padding: 12px 14px; margin-bottom: 12px; font-size: .9rem; }
    main.layout-simple .feature-list li { padding: 6px 0; font-size: .9rem; }
    main.layout-simple .code-block { margin: 8px 0 12px; }

    /* spec-box: label + value en columna en mobile */
    main.layout-simple .spec-box { padding: 12px 14px; margin-bottom: 12px; font-size: .88rem; }
    main.layout-simple .spec-row { flex-wrap: wrap; row-gap: 2px; }
    main.layout-simple .spec-value { font-size: .78rem; }

    /* slide schema */
    main.layout-simple .slide-schema-wrap { flex-direction: column; gap: 10px; margin-bottom: 12px; }
    main.layout-simple .slide-schema-img { width: 100%; min-width: 0; }
    main.layout-simple .slide-schema-legend { min-width: 0; padding: 12px 14px; font-size: .85rem; }
    main.layout-simple .schema-zone { padding: 5px 0; }

    /* ── SPECIALIST PAGES ───────────────────────────────── */

    
    .specialist-section { margin-bottom: 14px; border-radius: var(--radius-md); }
    .specialist-header { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; }
    .specialist-icon { width: 40px; height: 40px; }
    .specialist-title { font-size: 1.05rem; }
    .specialist-subtitle { font-size: .85rem; }
    .roadmap { padding: 14px 16px; }
    .roadmap-phase { margin-bottom: 12px; padding-bottom: 12px; }
    .phase-badge { width: 26px; height: 26px; font-size: .75rem; }
    .phase-header { gap: 8px; margin-bottom: 6px; }
    .phase-title { font-size: .88rem; }
    .phase-dates { font-size: .78rem; }
    .phase-desc { margin: 6px 0 0 34px; font-size: .88rem; line-height: 1.55; }
    .task-item { padding: 10px 12px; margin-bottom: 5px; gap: 10px; }
    .task-title { font-size: .88rem; }
    .task-detail { font-size: .82rem; word-break: break-word; }
    .task-tag { font-size: .62rem; }
  }

  /* ── SCROLLBAR ────────────────────────────────────────── */
  #sidebar::-webkit-scrollbar { width: 4px; }
  #sidebar::-webkit-scrollbar-track { background: transparent; }
  #sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

  /* ── PRIORITY ZERO BANNER ─────────────────────────────── */
  .priority-zero-banner {
    background: var(--gray-900);
    border-bottom: 3px solid var(--gray-600);
    padding: 10px 32px;
    display: flex; align-items: center; gap: 12px;
    font-size: .8rem; font-weight: 700;
    color: var(--gray-300);
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .priority-zero-banner .pz-dot {
    width: 8px; height: 8px;
    background: var(--white);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
    flex-shrink: 0;
  }

  /* ── TV SCREEN MOCKUP ─────────────────────────────────── */
  .tv-mockup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
  }
  .tv-mockup {
    background: var(--gray-900);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--gray-700);
  }
  .tv-screen {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    aspect-ratio: 16/9;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px; padding: 20px;
    position: relative;
    overflow: hidden;
  }
  .tv-screen.portrait { aspect-ratio: 9/16; }
  .tv-screen::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,.015) 2px,
      rgba(255,255,255,.015) 4px
    );
  }
  .tv-content-type {
    font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--gray-300);
    background: rgba(255,255,255,.1);
    padding: 3px 10px; border-radius: 12px;
    position: relative;
  }
  .tv-screen-title {
    font-size: 1.1rem; font-weight: 800;
    color: var(--white);
    text-align: center; line-height: 1.25;
    position: relative;
  }
  .tv-screen-sub {
    font-size: .72rem; color: var(--gray-400);
    text-align: center; position: relative;
  }
  .tv-duration {
    position: absolute; bottom: 10px; right: 12px;
    font-size: .65rem; font-weight: 700;
    color: var(--gray-400);
    background: rgba(0,0,0,.4);
    padding: 2px 7px; border-radius: 4px;
  }
  .tv-footer {
    padding: 10px 14px;
    display: flex; justify-content: space-between; align-items: center;
    background: var(--gray-800);
  }
  .tv-format-label {
    font-size: .7rem; color: var(--gray-400);
    font-family: 'JetBrains Mono', monospace;
  }
  .tv-res {
    font-size: .7rem; font-weight: 700;
    color: var(--brand-300);
    font-family: 'JetBrains Mono', monospace;
  }

  /* ── SPEC TABLE HIGHLIGHT ─────────────────────────────── */
  .spec-highlight {
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-bottom: 24px;
  }
  .spec-highlight h4 {
    font-size: .9rem; font-weight: 700;
    color: var(--gray-900); margin-bottom: 12px;
  }
  .spec-row {
    display: flex; justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--gray-200);
    font-size: .83rem;
  }
  .spec-row:last-child { border-bottom: none; }
  .spec-label { color: var(--gray-600); font-weight: 500; }
  .spec-value { color: var(--gray-900); font-weight: 700; font-family: 'JetBrains Mono', monospace; font-size: .78rem; }

  /* ── CONTENT CALENDAR ─────────────────────────────────── */
  .content-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 320px;
  }
  .cal-header {
    text-align: center;
    font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--gray-500);
    padding: 6px 2px;
  }
  .cal-cell {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 8px 6px;
    min-height: 60px;
    font-size: .68rem;
    color: var(--gray-700);
  }
  .cal-cell .cal-date {
    font-weight: 700; font-size: .7rem;
    color: var(--gray-500); margin-bottom: 4px;
  }
  .cal-cell .cal-event {
    display: block;
    background: var(--purple-100);
    color: #5b21b6;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: .62rem; font-weight: 600;
    margin-bottom: 2px;
    line-height: 1.3;
  }
  .cal-cell .cal-event.green { background: var(--green-100); color: #166534; }
  .cal-cell .cal-event.blue  { background: var(--brand-100); color: var(--brand-600); }
  .cal-cell .cal-event.amber { background: var(--amber-100); color: #92400e; }

  /* ── HIGHLIGHT / ACCENT ───────────────────────────────── */
  .accent-line {
    display: inline-block;
    width: 40px; height: 3px;
    background: var(--gray-800);
    border-radius: 2px;
    margin-bottom: 8px;
  }

  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
  }
  @media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } }

  ul.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
  }
  ul.feature-list li {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 0;
    font-size: .95rem;
    color: var(--gray-800);
    border-bottom: 1px solid var(--gray-100);
  }
  ul.feature-list li:last-child { border-bottom: none; }
  ul.feature-list li::before {
    content: '✓';
    font-size: .75rem; font-weight: 800;
    color: var(--teal-500);
    margin-top: 2px;
    flex-shrink: 0;
  }

  /* ── ROADMAP / PAGES ───────────────────────────────────── */
  main.layout-simple {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  main.layout-simple .hero {
    flex-shrink: 0;
    width: 100%;
  }
  main.layout-simple .page-content {
    flex: 1;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 48px 60px;
    box-sizing: border-box;
  }
  .specialist-section {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: var(--shadow-sm);
  }
  .specialist-header { padding: 24px 28px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--gray-200); background: var(--gray-100); }
  .specialist-icon { width: 56px; height: 56px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--gray-200); flex-shrink: 0; }
  .specialist-title { font-size: 1.25rem; font-weight: 800; color: var(--gray-900); }
  .specialist-subtitle { font-size: .95rem; color: var(--gray-700); margin-top: 4px; }
  .roadmap { padding: 28px 28px 32px; }
  .roadmap-phase { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px dashed var(--gray-200); }
  .roadmap-phase:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
  .phase-badge { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 800; color: var(--white); background: var(--gray-800); flex-shrink: 0; }
  .phase-desc { font-size: 1rem; color: var(--gray-700); margin: 12px 0 0 40px; line-height: 1.65; }
  .phase-title { font-size: 1rem; font-weight: 700; color: var(--gray-900); }
  .phase-dates { font-size: .85rem; color: var(--gray-600); font-weight: 600; }
  .task-list { list-style: none; padding: 0; margin: 0; }
  .task-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; margin-bottom: 8px; background: var(--gray-50); border-radius: var(--radius-sm); border-left: 3px solid var(--gray-300); font-size: .95rem; color: var(--gray-800); line-height: 1.55; }
  .task-item.done { border-left-color: var(--green-500); background: var(--green-100); opacity: .9; }
  .task-item.in-progress { border-left-color: var(--amber-500); background: var(--amber-100); }
  .task-item.priority { border-left-color: var(--rose-500); background: var(--rose-100); }
  .task-checkbox { width: 18px; height: 18px; border: 2px solid var(--gray-400); border-radius: 4px; flex-shrink: 0; margin-top: 2px; }
  .task-item.done .task-checkbox { background: var(--green-500); border-color: var(--green-500); }
  .task-content { flex: 1; }
  .task-title { font-weight: 600; color: var(--gray-900); margin-bottom: 2px; }
  .task-detail { font-size: .9rem; color: var(--gray-700); line-height: 1.5; }
  .task-tag { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }
  .task-tag.critical { background: var(--rose-100); color: #9f1239; }
  .task-tag.high { background: var(--amber-100); color: #92400e; }
  .task-tag.medium { background: var(--brand-100); color: var(--brand-600); }
  .task-tag.low { background: var(--gray-100); color: var(--gray-600); }
  .info-box { background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 18px 22px; margin-bottom: 24px; font-size: .95rem; color: var(--gray-800); line-height: 1.6; }
  .info-box strong { color: var(--gray-900); }
  /* Links de referencia a páginas de especialistas */
  .ref-links { display: flex; flex-direction: column; gap: 8px; margin: 24px 0; }
  .ref-link {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--brand-500);
    border-radius: var(--radius-md);
    color: var(--brand-700);
    text-decoration: none;
    font-size: .88rem; font-weight: 500;
    transition: background .15s, border-color .15s;
  }
  .ref-link:hover { background: var(--brand-50); border-left-color: var(--brand-600); color: var(--brand-800); }
  .ref-link .icon { flex-shrink: 0; opacity: .7; }
  .card-link { text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; display: block; }
  .card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .card-cta { display: inline-block; margin-top: 12px; font-size: .85rem; font-weight: 600; color: var(--brand-500); }

  /* ── VIDEO PAGE ────────────────────────────────────────── */
  .slide-schema-wrap {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 28px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .slide-schema-img {
    max-width: 100%;
    width: 560px;
    min-width: 280px;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-md);
  }
  .slide-schema-legend {
    flex: 1;
    min-width: 220px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    font-size: .9rem;
    color: var(--gray-700);
  }
  .schema-zone {
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-200);
    line-height: 1.5;
  }
  .schema-zone:last-child { border-bottom: none; }
  .schema-label {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: .82rem;
    font-weight: 600;
    color: var(--brand-600);
    background: var(--brand-50);
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 8px;
  }
  .spec-box { background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 18px 22px; margin-bottom: 20px; font-size: .95rem; line-height: 1.6; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .spec-box h4 { font-size: .9rem; margin-bottom: 12px; color: var(--gray-900); }
  .spec-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--gray-200); }
  .spec-row:last-child { border-bottom: none; }
  .spec-label { color: var(--gray-600); }
  .spec-value { font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: .82rem; color: var(--gray-900); }
  ul.checklist { list-style: none; padding: 0; margin: 0; }
  ul.checklist li { padding: 10px 0 10px 28px; position: relative; font-size: .95rem; color: var(--gray-800); line-height: 1.5; border-bottom: 1px solid var(--gray-100); }
  ul.checklist li:last-child { border-bottom: none; }
  ul.checklist li::before { content: '☐'; position: absolute; left: 0; font-size: 1rem; color: var(--gray-500); }

  /* ── FIX: anular margin-left de layout-simple en mobile ─
     Este bloque debe ir DESPUÉS de main.layout-simple { margin-left: var(--sidebar-w) }
     para ganar en la cascada CSS. ───────────────────────── */
  @media (max-width: 900px) {
    main.layout-simple { margin-left: 0; }
  }

  /* ── MOBILE PEQUEÑO (≤ 480px) ────────────────────────── */
  @media (max-width: 480px) {
    main.layout-simple .hero {
      padding: 48px 62px 18px 14px;
    }
    main.layout-simple .hero h1,
    main.layout-simple .hero h2 { font-size: 1.3rem; }
    main.layout-simple .hero p { font-size: .85rem; }
    main.layout-simple .page-content { padding: 12px 12px 24px; }
    .specialist-header { padding: 12px 14px; }
    .roadmap { padding: 12px; }
    .phase-desc { margin-left: 0; margin-top: 6px; }
    .task-item { padding: 8px 10px; margin-bottom: 4px; }
    main.layout-simple .card { padding: 12px; }
    main.layout-simple .info-box { padding: 10px 12px; }
    main.layout-simple .spec-box { padding: 10px 12px; }
  }