/* =========================================================================
   AMC — the site header, shared by every page. Self-contained: it carries its
   own colours, so pages with their own stylesheet (the console, the
   methodology) get the identical header without inheriting anything else.
   ========================================================================= */
nav.top { --n-bg: rgba(252,252,251,.88); --n-border: #e1e0d9; --n-ink: #0b0b0b; --n-ink-2: #52514e; --n-muted: #6b6a65;
          --n-hover: #f1f0ec; --n-mark: #0b0b0b; --n-mark-ink: #f9f9f7; --n-strong: #c3c2b7;
          position: sticky; top: 0; z-index: 20; background: var(--n-bg);
          backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
          border-bottom: 1px solid var(--n-border); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) nav.top { --n-bg: rgba(26,26,25,.88); --n-border: #2c2c2a; --n-ink: #f0efec; --n-ink-2: #c3c2b7; --n-muted: #898781;
    --n-hover: #242422; --n-mark: #f0efec; --n-mark-ink: #0d0d0d; --n-strong: #45443f; }
}
:root[data-theme="dark"] nav.top { --n-bg: rgba(26,26,25,.88); --n-border: #2c2c2a; --n-ink: #f0efec; --n-ink-2: #c3c2b7; --n-muted: #898781;
  --n-hover: #242422; --n-mark: #f0efec; --n-mark-ink: #0d0d0d; --n-strong: #45443f; }
nav.top .wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 16px; height: 58px; box-sizing: border-box; }
nav.top .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; color: var(--n-ink); }
nav.top .brand .mark { height: 30px; padding: 0 8px; border-radius: 8px; background: var(--n-mark); color: var(--n-mark-ink);
                       display: grid; place-items: center; font: 800 12.5px/1 "Inter Tight", Inter, system-ui, sans-serif; letter-spacing: .04em; }
/* Colombia's colours, not its flag: a strip in the flag's bands (yellow half,
   blue and red a quarter each) along the foot of the mark. The flag itself, or
   its arms, would read as a government site, which AMC is careful not to be. */
nav.top .brand .mark { position: relative; overflow: hidden; box-sizing: border-box; padding-bottom: 4px; }
nav.top .brand .mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
                              background: linear-gradient(90deg, #fcd116 0 50%, #003893 50% 75%, #ce1126 75%); }
@media (forced-colors: active) { nav.top .brand .mark::after { display: none; } }
nav.top .brand .name { font: 700 15px/1.1 "Inter Tight", Inter, system-ui, sans-serif; letter-spacing: -.01em; }
nav.top .brand .name small { display: block; font: 500 12px/1.2 Inter, system-ui, sans-serif; color: var(--n-muted); letter-spacing: 0; }
nav.top .links { display: flex; gap: 2px; margin-left: auto; align-items: center; }
nav.top .links a { text-decoration: none; color: var(--n-ink-2); font-size: 14.5px; font-weight: 500; padding: 7px 11px; border-radius: 9px; white-space: nowrap; }
nav.top .links a:hover { background: var(--n-hover); color: var(--n-ink); }
nav.top .links a[aria-current="page"], nav.top .links a[aria-current="section"] { color: var(--n-ink); background: var(--n-hover); }
nav.top .theme { border: 1px solid var(--n-border); background: transparent; color: var(--n-ink-2); border-radius: 9px;
                 width: 36px; height: 36px; cursor: pointer; display: grid; place-items: center; margin-left: 4px; padding: 0; }
nav.top .theme:hover { color: var(--n-ink); border-color: var(--n-strong); }
nav.top .theme svg { width: 17px; height: 17px; }
@media (max-width: 720px) {
  nav.top .brand .name small { display: none; }
  nav.top .links a.opt { display: none; }
}
@media (max-width: 540px) {
  nav.top .brand .name { display: none; }
  nav.top .links a { padding: 7px 8px; font-size: 14px; }
}
@media print { nav.top { display: none; } }

/* ---------------------------------------------------------------- Clyx Consulting
   The parent brand. The logo files are one-colour SVGs (traced from the
   official PNG) used as masks, so the mark takes the brand navy on a light
   page and the page's ink on a dark one, where navy would disappear. Here,
   not in amc.css, so the console and the methodology carry it too. */
.clyx { --clyx: #0b1f3a; display: inline-block; background: var(--clyx);
        -webkit-mask: url(brand/clyx-consulting.svg) left center / contain no-repeat; mask: url(brand/clyx-consulting.svg) left center / contain no-repeat;
        aspect-ratio: 958 / 632; height: 54px; flex: none; }
.clyx.word { -webkit-mask-image: url(brand/clyx.svg); mask-image: url(brand/clyx.svg); aspect-ratio: 958 / 457; height: 17px; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .clyx { --clyx: #f0efec; } }
:root[data-theme="dark"] .clyx { --clyx: #f0efec; }
@media (forced-colors: active) { .clyx { background: CanvasText; } }
nav.top .by { display: inline-flex; align-items: center; gap: 7px; padding-left: 14px; margin-left: -2px; border-left: 1px solid var(--n-border);
              height: 26px; text-decoration: none; color: var(--n-muted); font-size: 12px; white-space: nowrap; }
nav.top .by:hover .clyx { opacity: .8; }
.clyx-credit { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px; text-decoration: none; color: inherit; }
.clyx-credit small { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.clyx-credit:hover .clyx { opacity: .8; }
/* The header's widest stretch is just above each breakpoint: the subtitle goes
   first, then the endorsement (the footer carries the full logo anyway). */
@media (max-width: 900px) { nav.top .brand .name small { display: none; } }
@media (max-width: 800px) { nav.top .by { display: none; } }