.callout{margin:1.6rem 0;padding:1.2rem 1.3rem 1.15rem;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-soft);position:relative;overflow:hidden}.callout:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--accent)}.callout-title{font-size:.69em;letter-spacing:.12em;text-transform:uppercase;font-weight:950;margin-bottom:.45rem}.callout.must{}.callout.must .callout-title{color:var(--accent)}.callout.recommend{}.callout.recommend:before{background:var(--teal)}.callout.recommend .callout-title{color:var(--teal)}.callout.explore{}.callout.explore:before{background:var(--accent-2)}.callout.explore .callout-title{color:var(--accent-2)}.callout.warning{}.callout.warning:before{background:var(--coral)}.callout.warning .callout-title{color:var(--coral)}
.principle{margin:2.3rem 0;padding:1.7rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:clamp(1.45rem,2.4vw,2.1rem);line-height:1.25;color:var(--ink-strong);font-weight:850;letter-spacing:-.025em}.principle em{color:var(--accent);font-style:normal}
.crosslink{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:1.3rem 0;padding:1rem 1.05rem;border-radius:14px;background:var(--surface-soft);border:1px solid var(--border);text-decoration:none;color:var(--ink-strong);transition:transform var(--motion-fast),border-color var(--motion-fast),background var(--motion-fast)}.crosslink:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--accent) 35%,var(--border));background:var(--surface)}.crosslink small{display:block;color:var(--ink-muted);font-weight:650}.crosslink strong{font-size:.96em}.crosslink .arrow{color:var(--accent);font-size:1.35em}
.diagram{margin:2rem 0;padding:22px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}.diagram figcaption{font-size:.72em;color:var(--ink-muted);margin-top:12px}
.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:1.4rem 0}.tool-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1rem;text-decoration:none;color:var(--ink-strong);box-shadow:var(--shadow-soft);transition:transform var(--motion-fast),box-shadow var(--motion-fast)}.tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.tool-card span{display:block;color:var(--ink-muted);font-size:.75em;margin-top:.3em}
.phase-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:1.5rem 0}.phase-pill{border-radius:999px;padding:.55rem .7rem;background:var(--surface-soft);border:1px solid var(--border);font-size:.72em;font-weight:800;text-align:center}.phase-pill.competitive{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 24%,var(--border))}
.search-popover{position:fixed;z-index:140;top:82px;right:24px;width:min(560px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:14px;display:none}.search-popover.is-open{display:block}.search-popover input{width:100%;border:1px solid var(--border);background:var(--surface-soft);color:var(--ink);border-radius:12px;padding:.75rem .85rem}.search-results{max-height:60vh;overflow:auto;margin-top:10px}.search-result{width:100%;text-align:left;border:0;background:transparent;color:var(--ink);padding:.7rem;border-radius:10px;cursor:pointer}.search-result:hover{background:var(--surface-soft)}.search-result strong{display:block;color:var(--ink-strong)}.search-result small{color:var(--ink-muted)}
.highlight-target{animation:targetGlow 1.6s var(--ease)}@keyframes targetGlow{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 8px var(--accent-soft)}}

/* Integración de assets visuales */
.diagram-wide{width:min(1120px,calc(100vw - var(--sidebar-w) - 120px));max-width:none;margin:2.4rem 0 2.8rem;padding:clamp(16px,2vw,26px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}
.diagram img,.diagram-wide img{display:block;width:100%;height:auto}
.visual-caption{font-size:.72em;color:var(--ink-muted);margin-top:12px;max-width:72ch}
.asset-figure{margin:2rem 0 2.4rem;padding:0;background:transparent;border:0;border-radius:var(--radius-lg);box-shadow:none;overflow:hidden}.asset-figure img{display:block;width:100%;height:auto}.asset-figure figcaption{padding:.65rem .15rem 0;color:var(--ink-muted);font-size:.72em;line-height:1.45}.asset-wide{width:min(1120px,calc(100vw - var(--sidebar-w) - 120px));max-width:none}.placeholder-card .asset-figure{width:min(1120px,100%);margin-inline:auto}

/* Producción v1 · diferenciación editorial entre diagramas y láminas */
.asset-diagram{margin-top:2.7rem;margin-bottom:3rem}
.asset-diagram img{border-radius:18px;background:var(--surface);border:1px solid color-mix(in srgb,var(--border) 82%,transparent)}
.asset-diagram figcaption{max-width:74ch}
.asset-summary{margin-top:3rem;margin-bottom:3.6rem;padding:clamp(10px,1.6vw,18px);border-radius:24px;background:color-mix(in srgb,var(--surface-soft) 46%,transparent);border:1px solid color-mix(in srgb,var(--border) 72%,transparent)}
.asset-summary img{border-radius:18px}
.asset-summary figcaption{padding:.72rem .25rem 0;max-width:68ch}
@media(max-width:720px){.asset-summary{padding:8px;border-radius:18px}.asset-diagram,.asset-summary{margin-top:2rem;margin-bottom:2.5rem}}
.search-empty{margin:.65rem;padding:.65rem;color:var(--ink-muted);font-size:.85em}
.mobile-index-btn[hidden]{display:none!important}


/* Producción v5 · ampliación de assets */
.asset-figure img.zoomable-asset{cursor:zoom-in;transition:filter var(--motion-fast),transform var(--motion-fast)}
.asset-figure img.zoomable-asset:hover{filter:brightness(1.015);transform:translateY(-1px)}
.asset-figure img.zoomable-asset:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.image-overlay{position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;padding:clamp(14px,3vw,40px);background:rgba(24,25,30,.78);backdrop-filter:blur(10px)}
.image-overlay.is-open{display:flex}
.image-overlay-panel{position:relative;width:min(1680px,96vw);max-height:94vh;overflow:auto;border-radius:18px;background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));box-shadow:0 28px 90px rgba(0,0,0,.28);padding:clamp(10px,1.5vw,20px)}
.image-overlay img{display:block;width:100%;height:auto;max-width:none;border-radius:12px}
.image-overlay-close{position:sticky;top:0;float:right;z-index:2;margin:0 0 -46px 0;width:42px;height:42px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--ink-strong);box-shadow:var(--shadow-soft);cursor:pointer;font-size:1.25rem}
.image-overlay-caption{clear:both;margin:.75rem .2rem .1rem;color:var(--ink-muted);font-size:.8em}
body.overlay-open{overflow:hidden}

/* Producción v6 · propagación del acento contextual */
.callout.must{}
.callout.must:before{background:var(--accent-gradient)}
.callout.explore{}
.callout.explore:before{background:var(--accent-2)}
.callout.explore .callout-title{color:var(--accent)}
.crosslink:hover{background:transparent}
.phase-pill.competitive{background:transparent;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 26%,var(--border))}
.image-overlay-panel{border-color:color-mix(in srgb,var(--accent) 32%,var(--border))}

/* Producción v10: los contenedores editoriales no usan fondos gradiente. */
.callout.must,.callout.recommend,.callout.explore,.callout.warning,.phase-pill.competitive{background:transparent}
.crosslink:hover{background:transparent}

/* Producción v11 · callouts vinculados cromáticamente a la parte activa */
.callout,
.callout.must,
.callout.recommend,
.callout.explore,
.callout.warning{
  background:transparent;
  border-color:color-mix(in srgb,var(--accent) 58%,var(--border));
}
.callout:before,
.callout.must:before,
.callout.recommend:before,
.callout.explore:before,
.callout.warning:before{
  background:var(--accent);
}
.callout .callout-title,
.callout.must .callout-title,
.callout.recommend .callout-title,
.callout.explore .callout-title,
.callout.warning .callout-title{
  color:var(--accent);
}