.topbar{position:fixed;inset:0 0 auto 0;height:var(--topbar-h);z-index:100;background:color-mix(in srgb,var(--canvas) 92%,var(--accent) 8%);backdrop-filter:blur(18px);border-bottom:1px solid color-mix(in srgb,var(--accent) 20%,var(--border));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding:0 clamp(18px,3vw,44px)}
.brand{display:flex;align-items:center;gap:0;font-weight:850;letter-spacing:.005em;color:var(--ink-strong);white-space:nowrap;font-size:.88em}
.part-nav{display:flex;justify-content:center;gap:4px;overflow-x:auto;scrollbar-width:none}.part-nav::-webkit-scrollbar{display:none}.part-nav button{border:0;background:transparent;padding:.58rem .66rem;border-radius:10px;font-size:.76em;font-weight:750;color:var(--ink-muted);cursor:pointer;white-space:nowrap;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}.part-nav button:hover{background:var(--surface-soft);color:var(--ink-strong)}.part-nav button[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.top-actions{display:flex;gap:8px}.icon-btn{border:1px solid var(--border);background:var(--surface);width:42px;height:42px;border-radius:12px;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-soft)}
.app-shell{max-width:var(--shell);margin:0 auto;padding-top:var(--topbar-h);min-height:100vh}.view{display:none}.view.is-active{display:block}.view-stage{will-change:transform,opacity}.view-stage.animating-out-left{animation:outLeft var(--motion) var(--ease) both}.view-stage.animating-out-right{animation:outRight var(--motion) var(--ease) both}.view-stage.animating-in-left{animation:inLeft var(--motion) var(--ease) both}.view-stage.animating-in-right{animation:inRight var(--motion) var(--ease) both}
@keyframes outLeft{to{opacity:0;transform:translateX(-32px)}}@keyframes outRight{to{opacity:0;transform:translateX(32px)}}@keyframes inLeft{from{opacity:0;transform:translateX(-32px)}}@keyframes inRight{from{opacity:0;transform:translateX(32px)}}
.hero{min-height:calc(100vh - var(--topbar-h));display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);align-items:center;gap:clamp(32px,6vw,92px);padding:clamp(64px,8vw,110px) clamp(22px,5vw,76px)}.hero-copy{max-width:860px}.hero h1{max-width:13ch;margin:.18em 0 .28em}.hero-lede{font-size:clamp(1.18rem,2vw,1.5rem);max-width:32em;color:var(--ink-muted)}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.hero-art{position:relative}.hero-art:before{content:"";position:absolute;inset:12% 8%;background:radial-gradient(circle,var(--accent-soft),transparent 65%);filter:blur(18px)}.hero-art img{position:relative;filter:drop-shadow(0 28px 50px rgba(35,32,90,.10))}
.journey-wrap{margin-top:52px;border-radius:var(--radius-lg);padding:18px 22px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-soft)}
.btn{border:0;border-radius:14px;padding:.82rem 1rem;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}.btn-primary{background:var(--ink-strong);color:var(--surface)}.btn-secondary{background:var(--surface);color:var(--ink-strong);border:1px solid var(--border);box-shadow:var(--shadow-soft)}
.part-layout{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);gap:clamp(28px,5vw,72px);padding:42px clamp(22px,4vw,62px) 120px}.sidebar{position:sticky;top:calc(var(--topbar-h) + 20px);align-self:start;max-height:calc(100vh - var(--topbar-h) - 40px);overflow:auto;padding-right:12px}.sidebar-title{font-size:.72em;text-transform:uppercase;letter-spacing:.11em;font-weight:900;color:var(--ink-muted);margin:0 0 14px}.sidebar-tree{list-style:none;padding:0;margin:0}.sidebar-tree li{margin:0}.sidebar-tree a{display:block;color:var(--ink-muted);text-decoration:none;border-left:2px solid var(--border);padding:.42rem .55rem .42rem .8rem;font-size:.78em;line-height:1.35;transition:all var(--motion-fast)}.sidebar-tree a:hover{color:var(--ink-strong);background:var(--surface-soft)}.sidebar-tree a.is-active{color:var(--accent);border-left-color:var(--accent);background:linear-gradient(90deg,var(--accent-soft),transparent);font-weight:800}.sidebar-tree .level-3 a{padding-left:1.35rem;font-size:.72em}
.content-wrap{min-width:0}.breadcrumb{font-size:.72em;color:var(--ink-muted);margin:8px 0 36px;display:flex;gap:8px;align-items:center}.part-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.65fr);gap:36px;align-items:center;padding:28px clamp(18px,2.2vw,34px) 58px;border-bottom:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));background:linear-gradient(135deg,var(--accent-soft),transparent 58%);border-radius:22px 22px 0 0}.part-number{font-size:clamp(5rem,13vw,10rem);font-weight:950;line-height:.75;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--accent) 50%,var(--border));letter-spacing:-.08em}.part-kicker{font-weight:900;text-transform:uppercase;letter-spacing:.16em;font-size:.72em;color:var(--accent)}.part-subtitle{font-size:1.16em;color:var(--ink-muted);max-width:34em}.reading-column{max-width:var(--reading)}.section-block{scroll-margin-top:calc(var(--topbar-h) + 34px)}
.placeholder{max-width:960px;margin:70px auto;padding:60px 24px 120px}.placeholder-card{padding:34px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}
.mobile-index-btn{display:none}

/* C refinada · portada deliberadamente limpia */
.hero.hero-clean{
  grid-template-columns:minmax(0,1fr);
  min-height:calc(100vh - var(--topbar-h));
  align-items:center;
  padding:clamp(72px,10vw,140px) clamp(24px,7vw,110px);
}
.hero-clean .hero-copy{max-width:1040px}
.hero-clean h1{max-width:15ch;font-size:clamp(3.4rem,7.3vw,7rem);line-height:.98;letter-spacing:-.055em;margin:.22em 0 .3em}
.hero-clean .hero-lede{max-width:42em;font-size:clamp(1.15rem,1.8vw,1.48rem)}
.hero-clean .hero-actions{max-width:900px;margin-top:38px}
.hero-note{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:54px;padding-top:18px;border-top:1px solid var(--border);font-size:.76em;color:var(--ink-muted);font-weight:650}

/* Producción v1 · jerarquía de portada refinada */
.hero-clean h1{font-size:clamp(3.25rem,6.5vw,6.25rem);max-width:15.5ch;line-height:1;letter-spacing:-.05em}
.hero-clean .hero-lede{max-width:44em}

/* Producción v6 · acento global contextual y gradientes ligeros */
.topbar{
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--canvas) 96%,var(--accent) 4%),
      color-mix(in srgb,var(--canvas) 94%,var(--accent-2) 6%));
  border-bottom-color:color-mix(in srgb,var(--accent) 28%,var(--border));
  transition:background var(--motion),border-color var(--motion);
}
.brand{transition:color var(--motion)}
.part-nav button[aria-current="page"]{
  background:var(--accent-gradient-soft);
  color:var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent);
}
.icon-btn{
  width:48px;height:48px;font-size:1.45rem;line-height:1;
  border-color:color-mix(in srgb,var(--accent) 14%,var(--border));
  transition:border-color var(--motion-fast),background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast);
}
.icon-btn:hover{border-color:var(--accent);background:var(--accent-gradient-soft);color:var(--accent);transform:translateY(-1px)}
#search-toggle,#theme-toggle{font-size:1.58rem;font-weight:800}
.sidebar-tree a.is-active{
  color:var(--accent);
  border-left-color:var(--accent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 15%,transparent),color-mix(in srgb,var(--accent-2) 5%,transparent),transparent 84%);
}
.part-hero{
  border-bottom-color:color-mix(in srgb,var(--accent) 30%,var(--border));
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent-2) 8%,transparent) 52%,transparent 78%);
  transition:background var(--motion),border-color var(--motion);
}
.part-kicker{background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.part-number{-webkit-text-stroke-color:color-mix(in srgb,var(--accent) 56%,var(--border))}


/* Producción v7 · gradientes más visibles y controles sin contenedor ornamental */
.topbar{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--canvas) 90%,var(--accent) 10%),
    color-mix(in srgb,var(--canvas) 86%,var(--accent-2) 14%));
  border-bottom-color:color-mix(in srgb,var(--accent) 38%,var(--border));
}
.part-nav button[aria-current="page"]{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 24%,transparent),color-mix(in srgb,var(--accent-2) 18%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent);
}
.sidebar-tree a.is-active{
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 24%,transparent),color-mix(in srgb,var(--accent-2) 12%,transparent),transparent 88%);
}
.part-hero{
  border-bottom-color:color-mix(in srgb,var(--accent) 42%,var(--border));
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent-2) 15%,transparent) 52%,transparent 82%);
}
.top-actions{gap:10px}
.top-actions .icon-btn{
  border:0;
  padding:0;
  background:transparent;
  box-shadow:none;
  width:56px;
  height:56px;
  border-radius:10px;
  line-height:1;
}
.top-actions .icon-btn:hover{
  border:0;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  box-shadow:none;
}
#search-toggle,#theme-toggle{
  font-size:3.15rem;
  font-weight:650;
  line-height:.8;
}
/* El botón de índice móvil conserva escala de control, no de icono principal. */
.top-actions .mobile-index-btn{font-size:1.4rem;width:44px;height:44px}

/* Producción v8 · el acento de la parte gobierna todos los marcadores de navegación */
.brand{color:var(--accent)}
.topbar{border-bottom:2px solid var(--accent)}
.part-nav button{border:1px solid transparent}
.part-nav button[aria-current="page"]{
  border-color:var(--accent);
  color:var(--accent);
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--accent) 31%,transparent),
    color-mix(in srgb,var(--accent-2) 24%,transparent));
  box-shadow:none;
}
.sidebar-tree a.is-active{border-left-color:var(--accent)}
.part-hero{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--accent) 30%,transparent),
    color-mix(in srgb,var(--accent-2) 22%,transparent) 52%,
    transparent 84%);
  border-bottom-color:var(--accent);
}

.topbar{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--canvas) 84%,var(--accent) 16%),
    color-mix(in srgb,var(--canvas) 78%,var(--accent-2) 22%));
}
.sidebar-tree a.is-active{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 30%,transparent),
    color-mix(in srgb,var(--accent-2) 18%,transparent),
    transparent 90%);
}


/* Producción v10 · topbar neutra, sin pseudo-elementos decorativos y contenido sin fondos gradiente */
.topbar{
  background:#ffffff;
  border-bottom:2px solid var(--border);
  transition:border-color var(--motion),background var(--motion);
}
[data-theme="dark"] .topbar{
  background:var(--surface);
  border-bottom-color:var(--border);
}

/* El estado activo conserva el color contextual de la parte, sin ::after. */
.part-nav button[aria-current="page"]{
  color:var(--accent);
  border-color:var(--accent);
  background:transparent;
  box-shadow:none;
}
.part-nav button[aria-current="page"]:hover{
  background:transparent;
}

/* En el contenido interno, los contenedores dejan de usar fondos gradiente. */
.part-hero{
  background:transparent;
}
.callout.must,
.callout.recommend,
.callout.explore,
.callout.warning{
  background:transparent;
}
.crosslink:hover{
  background:transparent;
}
.phase-pill.competitive{
  background:transparent;
}

/* Producción v11 · ajustes finales de portada y color contextual */
/* La portada conserva el offset estructural de .app-shell por la topbar fija,
   pero su contenedor hero no agrega espacio superior propio. */
.hero.hero-clean{
  padding-top:0;
}

/* "Parte N" utiliza directamente el color contextual de la parte activa. */
.part-kicker{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:var(--accent);
}