/* Novantium, "Desenho técnico"
   One family (Archivo, width axis 62..125) on white paper with navy line work.
   Gold marks the path being traced, never decoration. */

/* Wide fallback for the 125% display lines, so the font swap does not reflow the hero. */
@font-face {
  font-family: "Archivo Wide FB";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue");
  size-adjust: 136%; ascent-override: 70%; descent-override: 17%;
}

:root {
  --paper: #FFFFFF;
  --sheet: #F4F6F8;
  --grid: rgba(22, 54, 82, .05);
  --grid-major: rgba(22, 54, 82, .085);
  --line: #D5DCE3;
  --line-strong: #A9B5C1;
  --wire: #8290A0;
  --dim: #8C9AA8;
  --navy: #163652;
  --ink: #0E2740;
  --muted: #5E6670;
  --gold: #C4A064;
  --gold-lt: #E9CF94;
  --gold-dk: #7C5C30;
  --gold-tint: #FBF6EC;

  --ff: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-wide: "Archivo", "Archivo Wide FB", Arial, sans-serif;

  /* type scale: six sizes, five widths */
  --t-xs: .8125rem;   /* annotations, table heads, statuses */
  --t-s: .875rem;     /* UI fragments, nav, buttons */
  --t-m: 1.0625rem;   /* body */
  --t-l: 1.25rem;     /* h3, lede */
  --t-xl: clamp(1.9rem, 3.4vw, 2.9rem);   /* every h2 */
  --t-xxl: clamp(2.3rem, 4.9vw, 4.4rem);  /* motto, contact */
  --w-display: 125%;
  --w-head: 112%;
  --w-body: 100%;
  --w-ui: 88%;
  --w-cond: 74%;

  --r-ctl: 2px;   /* controls and graph nodes; drawn frames stay square */

  --wrap: 1280px;
  --gut: clamp(16px, 4vw, 48px);
  --col-gap: 32px;
  --sec: clamp(72px, 8vw, 112px);        /* where the background changes */
  --sec-tight: clamp(48px, 5.5vw, 80px); /* either side of a rule between white sections */
  --header-h: 72px;
  --ease: cubic-bezier(.6, 0, .2, 1);
  --ease-out: cubic-bezier(.16, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
html.is-loaded { scroll-behavior: smooth; } /* after load, so a #fragment in the URL lands instantly */
body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--ff);
  font-size: var(--t-m);
  line-height: 1.6;
  font-stretch: var(--w-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 600; text-wrap: pretty; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; color: inherit; }
s { text-decoration-thickness: 1px; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: var(--r-ctl); }

.wrap { max-width: calc(var(--wrap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--ink); color: #fff; padding: 10px 16px; text-decoration: none; border-radius: var(--r-ctl);
}
.skip:focus { top: 12px; }

/* one heading size for every section; the hooks get a shared header pattern */
.h-sec { font-size: var(--t-xl); line-height: 1.1; font-stretch: var(--w-head); letter-spacing: -.01em; max-width: 24ch; }
.hook-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 20px;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.hook-head .h-sec { grid-column: 1 / 10; }
.hook-answer { grid-column: 1 / 8; max-width: 60ch; }
.hook-answer strong { font-weight: 640; color: var(--ink); }
.anno { font-size: var(--t-xs); font-stretch: var(--w-cond); color: var(--muted); line-height: 1.35; }

/* section rhythm */
.band { background: var(--sheet); padding-block: var(--sec); }
.ruled { position: relative; }
.ruled::before {
  content: ""; position: absolute; top: 0; height: 1px; background: var(--line);
  left: max(var(--gut), (100% - var(--wrap)) / 2); right: max(var(--gut), (100% - var(--wrap)) / 2);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px;
  font-size: var(--t-s); font-weight: 600; font-stretch: var(--w-head);
  text-decoration: none; border-radius: var(--r-ctl); border: 1px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--ink); }
.btn-quiet { color: var(--navy); border-color: var(--line-strong); }
.btn-quiet:hover { border-color: var(--navy); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }
.brand { display: flex; align-items: center; min-height: 44px; flex: none; }
.brand img { width: 176px; height: auto; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav ul { display: flex; gap: 26px; }
.nav ul a {
  display: inline-block; padding: 12px 0;
  font-size: var(--t-s); font-weight: 500; text-decoration: none; color: var(--navy);
  background: linear-gradient(var(--gold), var(--gold)) 0 calc(100% - 6px) / 0 1px no-repeat;
  transition: background-size .25s var(--ease);
}
.nav ul a:hover,
.nav ul a[aria-current="true"] { background-size: 100% 1px; }
.nav ul a[aria-current="true"] { color: var(--ink); }

/* ---------- scroll: smooth wheel (Lenis), progress trace, current section ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* The trace runs along the header's bottom rule: gold up to where the reader is,
   with one tick per section, like the scale bar of a drawing. */
.scroll-trace { display: none; }
.site-header.has-trace .scroll-trace {
  display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  pointer-events: none;
}
.scroll-trace-bar {
  position: absolute; inset: 0;
  background: var(--gold);
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
}
.scroll-tick {
  position: absolute; bottom: 1px; width: 1px; height: 6px; margin-left: -.5px;
  background: var(--line-strong);
  transition: background-color .3s var(--ease);
}
.scroll-tick.is-passed { background: var(--gold-dk); }
/* header controls are always visible: keep focus on them from scrolling the page back up */
.site-header a, .site-header button { scroll-margin-top: calc(-1 * (var(--header-h) + 12px)); }
.nav-cta { min-height: 44px; padding: 0 18px; }
.menu-btn { display: none; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(28px, 3.4vw, 46px); padding-bottom: clamp(48px, 5vw, 72px); }

.motto {
  --m: var(--t-xxl);
  display: grid;
  grid-template-columns: repeat(3, max-content) 1fr;
  column-gap: calc(var(--m) * .3);
  row-gap: 14px;
}
.motto-line {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid;
  font-family: var(--ff-wide);
  font-size: var(--m);
  font-stretch: var(--w-display);
  font-weight: 640;
  line-height: 1;
  letter-spacing: -.012em;
  color: var(--ink);
}
.motto-dims {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid;
  font-stretch: var(--w-cond);
  font-size: var(--t-m);
  line-height: 1.35;
  color: var(--muted);
}
.motto-dims li { position: relative; width: 0; min-width: 100%; padding-top: 20px; padding-right: 8px; }
.motto-dims li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 11px;
  border-left: 1px solid var(--dim); border-right: 1px solid var(--dim);
  background: linear-gradient(var(--dim), var(--dim)) 0 50% / 100% 1px no-repeat;
  clip-path: inset(0);
  transition: clip-path 520ms var(--ease-out) calc(var(--i, 0) * 110ms);
}

.hero-intro {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end;
  margin-top: clamp(22px, 2.4vw, 32px);
}
.lede { grid-column: 1 / 8; font-size: var(--t-l); line-height: 1.5; max-width: 56ch; color: var(--navy); }
.hero-actions { grid-column: 8 / 13; justify-content: flex-end; display: flex; gap: 12px; flex-wrap: wrap; padding-bottom: 2px; }

/* ---------- contract graph ---------- */
.graph { margin: clamp(26px, 2.8vw, 38px) 0 0; }
.graph-title { font-size: var(--t-m); font-stretch: var(--w-ui); font-weight: 600; color: var(--navy); margin-bottom: 12px; }

.graph-plate {
  --pad-x: 28px;
  --gap: 32px;
  --cols: minmax(0, 1.25fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.25fr) minmax(0, 1.2fr);
  position: relative;
  padding: 18px var(--pad-x) 26px;
  border: 1px solid var(--line);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}
/* crop marks at the plate corners */
.graph-plate::before, .graph-plate::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; }
.graph-plate::before { left: -6px; top: -6px; border-left: 1px solid var(--navy); border-top: 1px solid var(--navy); }
.graph-plate::after { right: -6px; bottom: -6px; border-right: 1px solid var(--navy); border-bottom: 1px solid var(--navy); }

.graph-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.wire { fill: none; stroke: var(--wire); stroke-width: 1.25; stroke-linejoin: round; transition: stroke .3s; }
.wire.halo { stroke: var(--paper); stroke-width: 7; }
.graph.has-trace .wire:not(.halo) { stroke: var(--line-strong); }
.trace { fill: none; stroke: var(--gold); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: var(--from, 1); opacity: 0; transition: opacity .2s; }
.trace.on { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .38s var(--ease) var(--d, 0ms), opacity 0s linear var(--d, 0ms); }
.port { fill: var(--paper); stroke: var(--wire); stroke-width: 1.25; transition: opacity .3s, fill .25s, stroke .25s; }
.port.on { fill: var(--gold); stroke: var(--gold-dk); }

.graph-scale {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); row-gap: 14px;
  margin-bottom: 14px;
}
.graph-dim {
  position: relative; grid-row: 1; height: 11px;
  border-left: 1px solid var(--dim); border-right: 1px solid var(--dim);
  background: linear-gradient(var(--dim), var(--dim)) 0 50% / 100% 1px no-repeat;
  font-size: var(--t-xs); font-stretch: var(--w-cond); color: var(--muted); line-height: 1;
}
.graph-dim span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--paper); padding: 2px 10px; white-space: nowrap; }
.graph-dim-l { grid-column: 1 / 4; }
.graph-dim-r { grid-column: 5 / 8; }
.graph-col {
  grid-row: 2; min-width: 0;
  font-size: var(--t-xs); font-stretch: var(--w-cond); font-weight: 560; color: var(--navy); line-height: 1.2;
  text-wrap: balance;
}
.graph-col-1 { grid-column: 1; }
.graph-col-2 { grid-column: 2; }
.graph-col-7 { grid-column: 7; }

.graph-nodes {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: var(--cols);
  grid-template-rows: repeat(4, auto);
  column-gap: var(--gap); row-gap: 12px;
}
.gn { display: flex; position: relative; z-index: 1; }
.gn-contrato { z-index: 4; }
.gn-fornecedor, .gn-un { z-index: 3; }
.gn-materiais, .gn-servicos, .gn-bm { z-index: 2; }
.gn-cnpj { grid-column: 1; grid-row: 1; }
.gn-ie { grid-column: 1; grid-row: 2; }
.gn-im { grid-column: 1; grid-row: 3; }
.gn-conta { grid-column: 1; grid-row: 4; }
.gn-materiais { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.gn-servicos { grid-column: 2; grid-row: 3 / 5; align-self: center; }
.gn-fornecedor { grid-column: 3; grid-row: 1 / 5; align-self: center; }
.gn-contrato { grid-column: 4; grid-row: 1 / 5; align-self: center; }
.gn-un { grid-column: 5; grid-row: 1 / 5; align-self: center; }
.gn-bm { grid-column: 6; grid-row: 1 / 5; align-self: center; }
.gn-itens { grid-column: 7; grid-row: 1 / 3; align-self: center; }
.gn-docobr { grid-column: 7; grid-row: 3 / 5; align-self: center; }

.node {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
  width: 100%; min-height: 60px; padding: 9px 12px 10px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  text-align: left; cursor: pointer;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.node:hover { border-color: var(--navy); }
.node-name { font-size: var(--t-s); font-weight: 600; font-stretch: var(--w-ui); line-height: 1.2; color: var(--ink); transition: color .25s; }
.node-sub, .node-meta, .node-status { font-size: var(--t-xs); font-stretch: var(--w-cond); line-height: 1.25; color: var(--muted); }
.node-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; transition: opacity .3s linear; }
.node-doc .node-name { font-weight: 540; }

/* document and status marks: navy = em dia, gold = a vencer, hollow ring = pendente */
.node-status::before, .st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--navy); }
.is-warn { color: var(--gold-dk); font-weight: 560; }
.is-warn::before { background: var(--gold); }
.is-miss { color: var(--ink); font-weight: 600; }
.is-miss::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gold-dk); }

/* example layers the client configures (categories, required documents, BM documents): dashed frame.
   layers the supplier sends or records through the portal: upload mark in the corner. */
.node-cfg { border-style: dashed; border-color: var(--wire); }
.node.node-sup { position: relative; padding-right: 28px; }
.node-by, .lg-sup {
  width: 12px; height: 12px; flex: none;
  fill: none; stroke: var(--navy); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.node-by { position: absolute; top: 9px; right: 9px; }
/* narrow grid columns (1024-1180): the mark moves to the status line so long words never reach it */
@media (min-width: 1024px) and (max-width: 1180px) {
  .node.node-sup { padding-right: 10px; }
  .node-by { top: auto; bottom: 10px; right: 8px; }
  .node-sup .node-status, .node-sup .node-meta { padding-right: 16px; }
}

.node-root {
  min-height: 112px; padding: 14px 16px;
  background: var(--ink); border-color: var(--ink);
}
.node-root:hover { border-color: var(--ink); }
.node-root .node-name { color: #fff; font-size: var(--t-l); font-stretch: var(--w-head); font-weight: 620; }
.node-root .node-sub { color: var(--gold-lt); font-size: var(--t-s); font-stretch: var(--w-ui); margin-top: 2px; white-space: nowrap; }
.node-root .node-meta { color: rgba(255, 255, 255, .82); margin-top: 8px; }

.node.is-trace { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background-color: var(--gold-tint); }
.node-root.is-trace { background-color: var(--ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--gold); }
/* dimming keeps text at AA: only frames lighten and names drop from ink to grey */
.graph.has-trace .node:not(.is-trace) { border-color: var(--line); }
.graph.has-trace .node:not(.is-trace) .node-name { color: var(--muted); }
.graph.has-trace .node:not(.is-trace):hover { border-color: var(--navy); }
/* dashed example frames keep their legend colour while dimmed, or the mark is lost in the resting trace */
.graph.has-trace .node-cfg:not(.is-trace) { border-color: var(--wire); }

/* bottom of the plate: who sends what (dimension lines under the document columns) and the legend */
.graph-foot {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); align-items: start;
  margin-top: 18px;
}
.graph-dim-b { grid-row: 1; height: auto; padding-top: 17px; border: 0; background: none; color: var(--navy); font-weight: 560; text-align: center; }
.graph-dim-b::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 11px;
  border-left: 1px solid var(--dim); border-right: 1px solid var(--dim);
  background: linear-gradient(var(--dim), var(--dim)) 0 50% / 100% 1px no-repeat;
}
.graph-dim-b span { position: static; display: block; transform: none; padding: 0; background: none; white-space: normal; text-wrap: balance; }
.graph-dim-b1 { grid-column: 1; }
.graph-dim-b7 { grid-column: 7; }
.graph-legend {
  grid-row: 1; grid-column: 2 / 7; justify-self: center;
  display: grid; gap: 7px; padding-top: 1px;
  font-size: var(--t-xs); font-stretch: var(--w-cond); color: var(--muted); line-height: 1.3;
}
.graph-legend li { display: flex; align-items: center; gap: 9px; }
.lg-cfg { flex: none; width: 22px; height: 13px; border: 1px dashed var(--wire); border-radius: var(--r-ctl); background: var(--paper); }
.graph-legend .lg-sup { margin: 0 5px; }

.graph-readout {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--col-gap); align-items: start;
  margin-top: 16px;
}
.trail-row { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.trail-label { flex: none; font-size: var(--t-xs); font-stretch: var(--w-cond); font-weight: 600; color: var(--gold-dk); }
/* connectors are wires ending in a port; they trail each item, so a wrapped line never starts with one */
.trail { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; font-size: var(--t-s); font-stretch: var(--w-ui); min-width: 0; }
.trail li { display: inline-flex; align-items: center; min-width: 0; color: var(--navy); line-height: 1.3; }
.trail li:not(:last-child)::after {
  content: ""; flex: none; width: 18px; height: 7px; margin: 0 8px;
  background:
    linear-gradient(var(--gold), var(--gold)) 0 50% / calc(100% - 6px) 1px no-repeat,
    radial-gradient(circle at calc(100% - 3.5px) 50%, var(--paper) 1.6px, var(--gold) 2px 2.7px, transparent 3.1px);
}
.trail li:last-child { font-weight: 600; color: var(--ink); }
.trail .trail-empty, .trail li.trail-empty:last-child { font-weight: 400; color: var(--muted); font-stretch: var(--w-cond); flex-shrink: 1; }
html:not(.js) .graph:not(.is-live) .trail-row { display: none; }
.graph-note { font-size: var(--t-s); line-height: 1.5; color: var(--muted); max-width: 56ch; }

/* ---------- fragments (shared) ---------- */
.frag {
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: var(--t-s);
  font-stretch: var(--w-ui);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  color: var(--navy);
  min-width: 0;
}
.num { text-align: right; white-space: nowrap; }
.ct { font-weight: 600; color: var(--ink); }
.sup { color: var(--muted); }
.tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: var(--r-ctl); font-size: var(--t-xs); font-weight: 560; }
.tag-wait { background: var(--gold-tint); color: var(--gold-dk); box-shadow: inset 0 0 0 1px rgba(196, 160, 100, .45); }
th { font-weight: 520; color: var(--muted); text-align: left; }
.st { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- platform: visão integrada ---------- */
.frag-port { padding: 18px 22px 8px; }
.port-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--navy); }
.port-title { font-weight: 640; color: var(--ink); font-size: var(--t-m); }
.port-ctx { color: var(--muted); }
.port-table th, .port-table td { padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.port-table th { font-size: var(--t-xs); padding-top: 10px; }
.port-table tbody tr:last-child td { border-bottom: 0; }
.port-table td + td, .port-table th + th { padding-left: 20px; }
.port-table td:first-child span { display: block; }
.port-table td:first-child .unit-m { display: none; }
.port-table td:nth-child(4) { white-space: nowrap; }
.meter { display: inline-block; vertical-align: middle; width: 96px; height: 6px; background: var(--sheet); border: 1px solid var(--line); margin-right: 10px; overflow: hidden; }
.meter span {
  display: block; height: 100%; width: 100%; background: var(--navy);
  transform-origin: 0 50%; transform: scaleX(calc(var(--v) / 100));
  transition: transform 700ms var(--ease-out) calc(var(--i, 0) * 90ms);
}
.meter.is-high span { background: var(--gold); }
.pct { display: inline-block; min-width: 44px; text-align: right; }

.sheet-intro { max-width: 56ch; margin: clamp(48px, 6vw, 72px) 0 24px; font-size: var(--t-l); line-height: 1.5; color: var(--navy); }
.sheet {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  background: var(--paper);
  border: 1px solid var(--line-strong);
}
.cell { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cell h3 { font-size: var(--t-l); font-stretch: var(--w-head); line-height: 1.2; }
.cell > p, .cell-text > p { font-size: var(--t-m); color: var(--muted); max-width: 50ch; }
.cell-text { display: grid; gap: 14px; align-content: start; }
/* fragments inside the sheet are drawn straight onto it: no second frame */
.cell .frag { background: none; border: 0; padding: 0; }
.cell > p + .frag { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.cell-budget, .cell-log {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 4vw, 56px); row-gap: 20px; align-items: start;
}
.cell-budget { border-bottom: 1px solid var(--line); }
.cell-perf { grid-column: 1 / 6; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cell-exc { grid-column: 6 / 13; border-bottom: 1px solid var(--line); }

.frag-budget { padding-top: 4px; }
.budget-top { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; }
.budget-bar { position: relative; height: 16px; background: var(--paper); border: 1px solid var(--line-strong); }
.bb-done, .bb-pend { position: absolute; top: 0; bottom: 0; clip-path: inset(0); transition: clip-path 600ms var(--ease-out); }
.bb-done { left: 0; width: 64.6%; background: var(--navy); }
.bb-pend {
  left: 64.6%; width: 7.6%;
  background: repeating-linear-gradient(135deg, var(--navy) 0 1px, transparent 1px 5px);
  border-left: 1px solid var(--paper);
  transition-duration: 320ms; transition-delay: 600ms;
}
.budget-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; }
.budget-figs dt { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--t-xs); }
.budget-figs dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); white-space: nowrap; }
.fig-free { transition: opacity 200ms linear 920ms; }
.key { width: 10px; height: 10px; border: 1px solid var(--navy); flex: none; }
.key-done { background: var(--navy); }
.key-pend { background: repeating-linear-gradient(135deg, var(--navy) 0 1px, transparent 1px 4px); }
.key-free { background: var(--paper); border-color: var(--line-strong); }

.perf-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.perf-period { color: var(--muted); }
.perf-min { display: grid; grid-template-columns: minmax(0, 1fr) 96px 32px; gap: 12px; margin-top: 10px; height: 18px; font-size: var(--t-xs); font-stretch: var(--w-cond); color: var(--gold-dk); line-height: 18px; }
.perf-min span { grid-column: 2; position: relative; }
.perf-min span b { position: absolute; right: calc(20% + 6px); top: 0; white-space: nowrap; font-weight: 560; }
.perf-tick { position: absolute; left: 80%; top: 9px; bottom: -10px; width: 1px; background: var(--gold-dk); }
.perf-list li { display: grid; grid-template-columns: minmax(0, 1fr) 96px 32px; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.perf-list b { font-weight: 600; text-align: right; color: var(--ink); }
.perf-list .is-below b { color: var(--gold-dk); }
.score {
  position: relative; width: 96px; height: 6px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(var(--navy), var(--navy)) 0 0 / calc(var(--v) * 20%) 100% no-repeat;
}
.score::after { content: ""; position: absolute; left: 80%; top: -4px; bottom: -4px; width: 1px; background: var(--gold-dk); }

.exc-id { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-bottom: 12px; }
.exc-flow { --step: 12px; position: relative; display: grid; gap: var(--step); }
.exc-flow li { position: relative; padding-left: 22px; }
.exc-flow li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 7px; height: 7px; border: 1.25px solid var(--navy); background: var(--paper); border-radius: 50%; }
.exc-flow li::after { content: ""; position: absolute; left: 7px; top: 14px; bottom: calc(-1 * var(--step) - 6px); width: 1px; background: var(--line-strong); transform-origin: top; }
.exc-flow li:last-child::after { bottom: -12px; }
.exc-flow .exc-trigger { color: var(--gold-dk); font-weight: 600; }
.exc-flow .exc-trigger::before { border-color: var(--gold); background: var(--gold); }
/* the fork: trunk from the last step into a bar, one drop per possible outcome */
.exc-decide { position: relative; margin-top: 12px; padding-left: 22px; }
.exc-decide::before { content: ""; position: absolute; left: 7px; top: 0; height: 23px; width: 1px; background: var(--line-strong); transform-origin: top; }
.exc-label { font-size: var(--t-xs); font-stretch: var(--w-cond); color: var(--muted); line-height: 16px; height: 16px; margin-bottom: 16px; }
.exc-out { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.exc-out::before { content: ""; position: absolute; top: -10px; left: -15px; right: calc((100% - 10px) / 4); height: 1px; background: var(--line-strong); transform-origin: left; }
.exc-out li { position: relative; padding: 8px 10px; border: 1px dashed var(--line-strong); line-height: 1.3; }
.exc-out li::before { content: ""; position: absolute; left: 50%; top: -11px; height: 10px; width: 1px; background: var(--line-strong); }

.frag-log .exc-id { padding-bottom: 10px; margin-bottom: 0; border-bottom: 1px solid var(--navy); }
.log li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 8px 0; border-top: 1px solid var(--line); }
.log li:first-child { border-top: 0; }
.log time { color: var(--muted); white-space: nowrap; }

/* ---------- medição (Excel hook) ---------- */
.measure { padding-top: var(--sec); padding-bottom: var(--sec-tight); }
.measure-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 24px; align-items: start; }
.measure-margin { grid-column: 1 / 4; display: grid; gap: 10px; padding-top: 22px; }
.files { display: grid; gap: 4px; color: var(--muted); font-size: var(--t-xs); font-stretch: var(--w-cond); }
.files li { min-width: 0; overflow-wrap: anywhere; }
.files s { text-decoration-color: var(--muted); }
.measure-note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-m); max-width: 34ch; }
.frag-bm { grid-column: 4 / 13; padding: 20px 24px 18px; }
.bm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 12px; }
.bm-id { font-weight: 640; color: var(--ink); font-size: var(--t-m); }
.bm-ctx { color: var(--muted); }
.bm-head .tag { margin-left: auto; }
.bm-table th, .bm-table td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.bm-table th + th, .bm-table td + td { padding-left: 14px; }
.bm-table thead th { font-size: var(--t-xs); border-bottom-color: var(--navy); }
.bm-table tfoot th { white-space: nowrap; }
.bm-table tfoot th, .bm-table tfoot td { border-bottom: 0; padding-top: 12px; font-weight: 640; color: var(--ink); font-size: var(--t-m); }
.bm-table .u, .bm-table .pu { display: none; }
.bm-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; border-top: 1px solid var(--navy); }
.bm-track li { position: relative; display: grid; align-content: start; gap: 1px; padding: 14px 12px 0 0; }
.bm-track li::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); }
.bm-track .is-pending::before { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--gold-dk); }
.bm-track span:first-child { color: var(--ink); font-weight: 560; }
.bm-track time { color: var(--muted); }
.is-warn-t { color: var(--gold-dk); font-weight: 560; }
.bm-docs { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-xs); }

/* ---------- suppliers ---------- */
.suppliers { padding-block: var(--sec-tight); }
.sup-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; align-items: start; }
.sup-text { grid-column: 1 / 6; display: grid; gap: 18px; }
.sup-text h2 { margin-bottom: 4px; }
.sup-text p { color: var(--muted); max-width: 54ch; }

.frag-cat { grid-column: 7 / 13; padding: 22px 24px 18px; }
.cat-switch { border: 0; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 0; min-width: 0; }
.cat-switch legend { padding: 0; margin-bottom: 10px; font-size: var(--t-xs); color: var(--muted); }
.cat-switch label { position: relative; flex: 1 1 auto; }
.cat-switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cat-switch span {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-strong); margin-left: -1px; text-align: center; font-weight: 520; line-height: 1.2;
  transition: background-color .2s, color .2s;
}
.cat-switch label:first-of-type span { margin-left: 0; border-radius: var(--r-ctl) 0 0 var(--r-ctl); }
.cat-switch label:last-of-type span { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.cat-switch input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; position: relative; z-index: 1; }
.cat-switch input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; position: relative; z-index: 2; }
.cat-switch label:hover input:not(:checked) + span { background: var(--sheet); }
.cat-static { display: none; margin-bottom: 14px; font-weight: 600; color: var(--ink); }
html:not(.js) .cat-switch { display: none; }
html:not(.js) .cat-static { display: block; }
.cat-sup { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-bottom: 10px; }
.cat-sup .sup { color: var(--ink); font-weight: 600; }
.cat-count { color: var(--muted); }
.cat-cols { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 6px; border-bottom: 1px solid var(--navy); font-size: var(--t-xs); font-stretch: var(--w-cond); color: var(--muted); }
.checklist li { position: relative; display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.checklist .st { text-align: right; white-space: nowrap; }
.checklist .is-ok { color: var(--muted); }
/* switching category: kept rows glide (FLIP), new rows open downward and carry a short gold mark */
.checklist li.is-leaving { opacity: 0; transition: opacity 140ms linear; }
.checklist li.is-entering { clip-path: inset(0 0 100% 0); opacity: 0; }
.checklist li.is-entered { clip-path: inset(0 -16px 0 -16px); opacity: 1; transition: clip-path 260ms var(--ease-out) var(--d, 0ms), opacity 260ms linear var(--d, 0ms); }
.checklist li::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 2px; background: var(--gold); opacity: 0; transition: opacity .6s linear; }
.checklist li.is-marked::before { opacity: 1; transition-duration: 0s; }

/* ---------- portal ---------- */
.portal { padding-top: var(--sec-tight); padding-bottom: var(--sec); }
.portal-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; align-items: start; }
.plan { grid-column: 1 / 9; min-width: 0; }
.plan h3 { font-size: var(--t-l); font-stretch: var(--w-head); margin-bottom: 14px; }
.plan-table { font-size: var(--t-m); }
.plan-table th { font-size: var(--t-xs); font-stretch: var(--w-cond); padding: 0 0 8px; border-bottom: 1px solid var(--navy); }
.plan-table td { padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.plan-table td:first-child { font-weight: 560; color: var(--ink); }
.plan-table td:last-child { color: var(--muted); white-space: nowrap; }
.plan-table th + th, .plan-table td + td { padding-left: 18px; }
.plan-table .is-example td:first-child { box-shadow: inset 2px 0 0 var(--gold); padding-left: 10px; }

.frag-alert { grid-column: 9 / 13; padding: 18px 20px 20px; margin-top: 40px; }
.frag-alert .anno { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.alert-title { display: flex; align-items: center; gap: 8px; font-size: var(--t-m); font-weight: 620; color: var(--ink); font-stretch: var(--w-body); }
.alert-body { margin-top: 6px; }
.alert-line { position: relative; display: grid; gap: 10px; margin-top: 14px; }
.alert-line li { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; padding-left: 20px; }
.alert-line li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); z-index: 1; }
.alert-line li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 13px; bottom: -16px; width: 1px; background: var(--line-strong); }
.alert-line time { color: var(--muted); white-space: nowrap; }
.alert-line .is-next::before { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--gold-dk); }
.alert-line .is-due::before { background: var(--gold); }
.alert-line .is-due span { color: var(--gold-dk); font-weight: 560; }

/* ---------- MCP ---------- */
.mcp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; align-items: start; }
.frag-mcp { grid-column: 1 / 8; padding: 18px 24px 8px; }
.mcp-src { font-size: var(--t-xs); font-stretch: var(--w-cond); color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--navy); }
.mcp-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.mcp-row:first-child { border-top: 0; }
.mcp-row dt { font-size: var(--t-xs); font-stretch: var(--w-cond); color: var(--muted); line-height: 1.5; }
.mcp-row dt time { display: block; }
.mcp-row dd { display: grid; gap: 10px; min-width: 0; line-height: 1.5; }
.mcp-q { font-size: var(--t-m); font-stretch: var(--w-body); font-weight: 600; color: var(--ink); line-height: 1.4; }
.chat-table { font-size: var(--t-s); }
.chat-table th { font-size: var(--t-xs); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.chat-table td { padding: 7px 0; border-bottom: 1px solid var(--line); }
.chat-table tbody tr:last-child td { border-bottom: 0; }
.chat-table th + th, .chat-table td + td { padding-left: 12px; }
.trail-static { font-size: var(--t-s); }
.trail-static li:last-child { font-weight: 400; color: var(--navy); }
.trail-static li:not(:last-child)::after { transform-origin: left; }

.mcp-side { grid-column: 9 / 13; display: grid; gap: 28px; min-width: 0; }
.frag-wire { display: flex; flex-direction: column; align-items: stretch; font-size: var(--t-s); font-stretch: var(--w-ui); }
.wbox { padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); line-height: 1.3; background: var(--paper); }
.wbox-strong { border-color: var(--ink); background: var(--ink); color: #fff; font-weight: 560; }
.wlink { position: relative; flex: 0 0 22px; width: 1px; margin-left: 22px; background: var(--wire); }
.wlink::before, .wlink::after { content: ""; position: absolute; left: -3px; width: 7px; height: 7px; border-radius: 50%; border: 1.25px solid var(--wire); background: var(--paper); }
.wlink::before { top: -4px; } .wlink::after { bottom: -4px; }
.caps > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-strong); }
.caps > div:last-child { border-bottom: 1px solid var(--line-strong); }
.caps dt { font-size: var(--t-xs); font-stretch: var(--w-cond); font-weight: 600; color: var(--navy); padding-top: 3px; }
.caps dd { font-size: var(--t-m); line-height: 1.5; }

/* ---------- steps ---------- */
.steps { padding-top: var(--sec); padding-bottom: var(--sec-tight); }
.steps-head { display: grid; gap: 16px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.steps-head p { max-width: 54ch; color: var(--muted); }
.step-line { --step-gap: 48px; --step-n: 44px; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--step-gap); row-gap: 40px; }
.step { position: relative; display: grid; gap: 12px; align-content: start; }
/* one segment per step, from this circle to the next */
.step:not(:last-child)::after {
  content: ""; position: absolute; top: calc(var(--step-n) / 2); left: var(--step-n);
  width: calc(100% + var(--step-gap) - var(--step-n)); height: 1px; background: var(--navy);
  transform-origin: left;
  transition: transform 300ms linear calc(var(--i) * 500ms + 200ms);
}
.step-n {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: var(--step-n); height: var(--step-n); margin-bottom: 10px;
  border: 1px solid var(--navy); border-radius: 50%; background: var(--paper);
  font-stretch: var(--w-head); font-weight: 600; font-size: var(--t-m); color: var(--ink);
  transition: transform 240ms var(--ease-out), opacity 240ms linear;
  transition-delay: calc(var(--i) * 500ms);
}
.step:last-child .step-n::before {
  content: "3"; position: absolute; inset: -1px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ink); color: #fff;
  transition: transform 260ms var(--ease-out) 1240ms;
}
.step h3 { font-size: var(--t-l); font-stretch: var(--w-head); line-height: 1.2; max-width: 22ch; }
.step p { color: var(--muted); max-width: 44ch; }
.step .step-out { max-width: none; color: var(--navy); font-size: var(--t-m); padding-top: 12px; border-top: 1px solid var(--line); }

/* ---------- segments ---------- */
.segments { padding-block: var(--sec-tight); }
.seg-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 16px; margin-bottom: clamp(32px, 4vw, 48px); }
.seg-head h2 { grid-column: 1 / 10; }
.seg-head p { grid-column: 1 / 7; color: var(--muted); max-width: 56ch; }
.seg-table { table-layout: fixed; font-size: var(--t-m); }
.seg-table thead th { font-size: var(--t-l); font-stretch: var(--w-head); font-weight: 600; color: var(--ink); padding: 0 24px 14px 0; border-bottom: 1px solid var(--navy); }
.seg-table thead td { border-bottom: 1px solid var(--navy); width: 22%; }
.seg-table tbody th { font-size: var(--t-m); font-stretch: var(--w-cond); font-weight: 560; color: var(--navy); padding: 16px 24px 16px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.seg-table td { padding: 16px 24px 16px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.seg-table tbody tr:last-child > * { border-bottom: 0; }

/* ---------- contact / title block ---------- */
.contact { padding-top: var(--sec-tight); padding-bottom: var(--sec); }
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; align-items: end; }
.contact-text { grid-column: 1 / 6; display: grid; gap: 18px; justify-items: start; min-width: 0; }
.contact-text h2 { font-family: var(--ff-wide); font-size: var(--t-xl); line-height: 1.05; font-stretch: var(--w-display); letter-spacing: -.012em; }
.contact-text p { color: var(--muted); max-width: 46ch; margin-bottom: 8px; }

.titleblock {
  grid-column: 7 / 13; min-width: 0;
  display: grid; grid-template-columns: 140px minmax(0, 1fr);
  border: 2px solid var(--ink);
  background: var(--paper);
}
.tb-logo { display: grid; place-items: center; padding: 18px; border-right: 1px solid var(--ink); }
.tb-logo img { width: 88px; }
.tb-fields { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.tb-fields > div { padding: 10px 14px 12px; border-bottom: 1px solid var(--ink); min-width: 0; }
.tb-fields > div:nth-child(2) { border-left: 1px solid var(--ink); }
.tb-fields > div:last-child { border-bottom: 0; }
.tb-wide { grid-column: 1 / -1; }
.tb-fields dt { font-size: var(--t-xs); font-stretch: var(--w-cond); color: var(--muted); }
.tb-fields dd { margin: 2px 0 0; font-weight: 560; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
.tb-fields a { display: inline-block; padding-block: 12px; margin-block: -12px; text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 40px; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { width: 40px; }
.footer-brand p { font-stretch: var(--w-head); font-weight: 560; color: var(--ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.footer-links a { display: inline-block; padding: 10px 0; text-decoration: none; font-size: var(--t-s); color: var(--navy); }
.footer-links a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.copy { color: var(--muted); font-size: var(--t-s); }

/* =========================================================
   Motion. Start states exist only with JS and without a
   reduced-motion preference, so no-JS, failed JS and reduced
   motion all render the final state from CSS alone.
   Each [data-play] block plays once (main.js adds .is-played).
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* contract graph build */
  .js .graph .node:not(.is-in) { opacity: 0; transform: translateX(var(--fx, 0px)) scale(var(--fs, 1)); clip-path: var(--clip, inset(-8px)); }
  .js .graph .node:not(.is-settled) .node-status { opacity: 0; }
  .js .wire { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js .wire.drawn { stroke-dashoffset: 0; }
  .js .port { opacity: 0; }
  .js .port.drawn { opacity: 1; }

  /* hero: the dimension lines under the motto draw left to right */
  .js .motto:not(.is-played) .motto-dims li::before { clip-path: inset(0 100% 0 0); }

  /* carteira: measured share fills each bar */
  .js .frag-port:not(.is-played) .meter span { transform: scaleX(0); }

  /* orçamento: medido, then em aprovação, then the free balance is named */
  .js .frag-budget:not(.is-played) .bb-done,
  .js .frag-budget:not(.is-played) .bb-pend { clip-path: inset(0 100% 0 0); }
  .js .frag-budget:not(.is-played) .fig-free { opacity: 0; }

  /* exceção: steps light up in order and end on the two possible decisions */
  .frag-exc .exc-flow li { transition: opacity 200ms linear calc(var(--i) * 280ms); }
  .frag-exc .exc-flow li::before { transition: transform 180ms var(--ease-out) calc(var(--i) * 280ms); }
  .frag-exc .exc-flow li::after { transition: transform 180ms var(--ease) calc(var(--i) * 280ms + 100ms); }
  .frag-exc .exc-label { transition: opacity 200ms linear 660ms; }
  .frag-exc .exc-decide::before { transition: transform 120ms var(--ease) 780ms; }
  .frag-exc .exc-out::before { transition: transform 200ms var(--ease) 880ms; }
  .frag-exc .exc-out li { transition: clip-path 280ms var(--ease-out) calc(1040ms + var(--j) * 90ms); }
  .js .frag-exc:not(.is-played) .exc-flow li { opacity: .35; }
  .js .frag-exc:not(.is-played) .exc-flow li::before { transform: scale(0); }
  .js .frag-exc:not(.is-played) .exc-flow li::after,
  .js .frag-exc:not(.is-played) .exc-decide::before { transform: scaleY(0); }
  .js .frag-exc:not(.is-played) .exc-label { opacity: 0; }
  .js .frag-exc:not(.is-played) .exc-out::before { transform: scaleX(0); }
  .js .frag-exc:not(.is-played) .exc-out li { clip-path: inset(-12px 0 calc(100% + 12px) 0); }
  .frag-exc .exc-out li { clip-path: inset(-12px 0 0 0); }

  /* medição: the spreadsheet names get struck through, then the BM settles row by row, total last */
  .js .files s { position: relative; display: inline; text-decoration: none; }
  .js .files s::after {
    content: ""; position: absolute; left: 0; right: 0; top: 56%; height: 1px; background: var(--muted);
    transform-origin: left; transition: transform 420ms var(--ease) calc(var(--i, 0) * 160ms);
  }
  .js .files li { position: relative; }
  .js .measure-body:not(.is-played) .files s::after { transform: scaleX(0); }
  .measure-body .bm-table tbody tr, .measure-body .bm-table tfoot tr, .measure-body .tag-wait { transition: opacity 300ms linear; }
  .measure-body .bm-table tbody tr:nth-child(1) { transition-delay: 520ms; }
  .measure-body .bm-table tbody tr:nth-child(2) { transition-delay: 620ms; }
  .measure-body .bm-table tbody tr:nth-child(3) { transition-delay: 720ms; }
  .measure-body .bm-table tfoot tr { transition-delay: 960ms; }
  .measure-body .tag-wait { transition-delay: 1080ms; }
  .js .measure-body:not(.is-played) .bm-table tbody tr,
  .js .measure-body:not(.is-played) .bm-table tfoot tr,
  .js .measure-body:not(.is-played) .tag-wait { opacity: 0; }

  /* MCP: the exchange replays in order, then the data origin trail draws */
  .frag-mcp .mcp-row, .frag-mcp .chat-table tbody tr { transition: opacity 260ms linear var(--t, 0ms); }
  .frag-mcp .trail-static li:not(:last-child)::after { transition: transform 200ms var(--ease) calc(1850ms + var(--i) * 120ms); }
  .js .frag-mcp:not(.is-played) .mcp-row,
  .js .frag-mcp:not(.is-played) .chat-table tbody tr { opacity: 0; }
  .js .frag-mcp:not(.is-played) .trail-static li:not(:last-child)::after { transform: scaleX(0); }

  /* atuação: the line is drawn through 1, 2, 3 and the last circle fills */
  .js .step-line:not(.is-played) .step:not(:last-child)::after { transform: scaleX(0); }
  .js .step-line:not(.is-played) .step-n { transform: scale(.8); opacity: 0; }
  .js .step-line:not(.is-played) .step:last-child .step-n::before { transform: scale(0); }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width: 1024px) {
  /* without JS there are no drawn wires: short stubs show each column feeding the next */
  html:not(.js) .graph:not(.is-live) .gn::after { content: ""; position: absolute; top: 50%; width: var(--gap); border-top: 1px solid var(--wire); }
  html:not(.js) .graph:not(.is-live) .gn-cnpj::after, html:not(.js) .graph:not(.is-live) .gn-ie::after, html:not(.js) .graph:not(.is-live) .gn-im::after, html:not(.js) .graph:not(.is-live) .gn-conta::after,
  html:not(.js) .graph:not(.is-live) .gn-materiais::after, html:not(.js) .graph:not(.is-live) .gn-servicos::after, html:not(.js) .graph:not(.is-live) .gn-fornecedor::after { left: 100%; }
  html:not(.js) .graph:not(.is-live) .gn-un::after, html:not(.js) .graph:not(.is-live) .gn-bm::after, html:not(.js) .graph:not(.is-live) .gn-itens::after, html:not(.js) .graph:not(.is-live) .gn-docobr::after { right: 100%; }
  html:not(.js) .graph:not(.is-live) .gn-contrato::after { content: none; }
}

@media (max-width: 1240px) {
  .nav { gap: 24px; }
  .nav ul { gap: 18px; }
}

@media (max-width: 1180px) {
  .graph-plate { --gap: 30px; --pad-x: 20px; }
  .node { padding: 8px 10px; }
  .node-root .node-name { font-stretch: var(--w-body); }
  .node-root { padding: 12px; }
  .node-root .node-sub { font-stretch: var(--w-cond); }
  .port-table td:nth-child(2), .port-table th:nth-child(2) { display: none; }
  .port-table td:first-child .unit-m { display: inline; }
}

@media (max-width: 1100px) {
  .menu-btn {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 14px; background: none;
    border: 1px solid var(--line-strong); border-radius: var(--r-ctl); cursor: pointer;
    font-weight: 560;
  }
  .menu-btn-lines { position: relative; width: 16px; height: 10px; border-top: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy); }
  .menu-btn[aria-expanded="true"] .menu-btn-lines { border-bottom-color: transparent; }
  .nav {
    position: absolute; left: 0; right: 0; top: var(--header-h);
    display: none; flex-direction: column; align-items: stretch; gap: 16px;
    padding: 8px var(--gut) 24px;
    background: var(--paper); border-bottom: 1px solid var(--line);
  }
  .nav.is-open { display: flex; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); background: none; font-size: var(--t-m); }
  .nav ul a[aria-current="true"] { text-decoration: underline 1px var(--gold); text-underline-offset: 6px; }

  /* no JS: the menu button cannot work, so the links sit in the header as a wrapped row */
  html:not(.js) .site-header { position: static; }
  html:not(.js) .header-row { height: auto; min-height: var(--header-h); flex-wrap: wrap; padding-block: 12px; }
  html:not(.js) .menu-btn { display: none; }
  html:not(.js) .nav { position: static; display: flex; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 0; border: 0; }
  html:not(.js) .nav ul { flex-direction: row; flex-wrap: wrap; gap: 0 18px; }
  html:not(.js) .nav ul a { border: 0; padding: 12px 0; font-size: var(--t-s); }
}

@media (max-width: 1023px) {
  .hero-intro { display: block; }
  .lede { max-width: 62ch; }
  .hero-actions { margin-top: 22px; }

  .hook-head .h-sec, .hook-answer { grid-column: 1 / -1; }
  .measure-margin, .frag-bm { grid-column: 1 / -1; }
  .measure-margin { padding-top: 0; }
  .frag-bm { max-width: 760px; }
  .measure-note { max-width: 56ch; }
  .sup-text, .frag-cat { grid-column: 1 / -1; }
  .plan, .frag-alert { grid-column: 1 / -1; }
  .frag-alert { margin-top: 0; max-width: 560px; }
  .frag-mcp, .mcp-side { grid-column: 1 / -1; }
  .mcp-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--col-gap); max-width: 760px; }
  .contact-text, .titleblock { grid-column: 1 / -1; }
  .frag-cat, .frag-mcp { max-width: 680px; }
  .seg-head h2, .seg-head p { grid-column: 1 / -1; }
  .cell-budget, .cell-log { grid-template-columns: minmax(0, 1fr); }
  .cell-perf, .cell-exc { grid-column: 1 / -1; border-right: 0; }

  /* the portfolio becomes one record per contract: valor, medido, saldo and vigência stay visible */
  .port-table, .port-table tbody, .port-table tr, .port-table td { display: block; }
  .port-table thead { display: none; }
  .port-table tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .port-table tbody tr:last-child { border-bottom: 0; }
  .port-table td, .port-table td + td { padding: 0; border: 0; }
  .port-table td:first-child .sup { display: inline; }
  .port-table td:nth-child(2) { display: none; }
  .port-table td:first-child, .port-table td:last-child { grid-column: 1 / -1; }
  .port-table td:not(:first-child):not(:last-child)::before { content: attr(data-label); display: block; font-size: var(--t-xs); font-stretch: var(--w-cond); color: var(--muted); }
  .port-table td.num { text-align: left; }
  .meter { width: calc(100% - 56px); max-width: 110px; }

  /* Graph becomes a vertical indented tree: categories own their single documents,
     the two shared documents sit under one label and take a right-hand bus from both categories */
  .graph-plate { display: flex; flex-direction: column; padding: 16px 10px 18px 12px; background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; }
  .graph-scale { display: none; }
  /* the legend leads the tree; the per-column dimension lines have no columns to sit under */
  .graph-foot { order: -1; display: block; margin: 0 0 14px; }
  .graph-dim-b { display: none; }
  .graph-legend { justify-self: auto; padding: 0 0 12px; border-bottom: 1px solid var(--line); background: var(--paper); }
  .graph-nodes { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
  .gn { margin-right: 28px; align-self: stretch; }
  .gn-contrato { margin-right: 0; margin-bottom: 4px; }
  .gn-fornecedor, .gn-un, .gn-cnpj { flex-direction: column; }
  .gn-fornecedor, .gn-un { margin-left: 22px; }
  .gn-fornecedor::before, .gn-un::before, .gn-cnpj::before {
    content: attr(data-side);
    font-size: var(--t-xs); font-stretch: var(--w-cond); color: var(--muted); line-height: 1.2;
    padding: 4px 0 6px 12px;
  }
  .gn-cnpj::before { content: attr(data-shared); margin-left: -22px; padding-left: 0; padding-top: 6px; }
  .gn-materiais, .gn-servicos, .gn-bm { margin-left: 44px; }
  .gn-ie, .gn-im, .gn-cnpj, .gn-conta, .gn-itens, .gn-docobr { margin-left: 66px; }
  .gn-un { margin-top: 8px; }
  .node { min-height: 44px; padding: 6px 12px; flex-direction: row; flex-wrap: wrap; align-items: baseline; align-content: center; justify-content: flex-start; column-gap: 10px; }
  .node-sub, .node-meta, .node-status { margin-top: 0; }
  .node-root { min-height: 0; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; padding: 10px 14px; }
  .node-root .node-meta { margin-top: 2px; }
  .graph-readout { display: block; }
  .trail-row { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .graph-note { margin-top: 10px; }
}

@media (max-width: 760px) {
  /* 12 columns with 32px gaps do not fit at 360px: collapse every page grid to one column */
  .hook-head, .measure-body, .sup-grid, .portal-grid, .mcp-grid, .contact-grid, .seg-head, .sheet { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .brand img { width: 150px; }
  .hero { padding-top: 22px; }
  .hero-wrap { display: flex; flex-direction: column; }
  .hero-intro { display: contents; }
  .motto { order: 1; display: block; --m: clamp(2.2rem, 10vw, 3.2rem); }
  .lede { order: 2; margin-top: 18px; font-size: var(--t-m); line-height: 1.5; }
  .hero-actions { order: 3; margin-top: 20px; }
  .graph { order: 4; margin-top: 28px; }
  .motto-line { display: block; }
  .motto-w { display: inline; }
  .motto-dims { display: grid; gap: 8px; margin-top: 16px; }
  .motto-dims li { width: auto; min-width: 0; padding: 0 0 0 18px; }
  .motto-dims li::before { width: 11px; height: auto; top: 3px; bottom: 3px; right: auto; border: 0; border-top: 1px solid var(--dim); border-bottom: 1px solid var(--dim); background: linear-gradient(var(--dim), var(--dim)) 50% 0 / 1px 100% no-repeat; }
  .dim-key.sr-only { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; color: var(--ink); font-weight: 600; font-stretch: var(--w-body); }
  .graph-title { margin-bottom: 10px; }
  .trail-row { grid-template-columns: 1fr; gap: 4px; }

  .frag-port { padding: 14px 14px 4px; }
  .port-table tr { grid-template-columns: 1fr 1fr; }

  .cell { padding: 24px 16px; }
  .budget-figs { grid-template-columns: 1fr 1fr; }
  .log li { grid-template-columns: 1fr; gap: 0; }

  .bm-table tr > :nth-child(2), .bm-table tr > :nth-child(4) { display: none; }
  .bm-table .u { display: inline; }
  /* the unit price column folds into a second line under the item name */
  .bm-table .pu { display: block; margin-top: 2px; color: var(--muted); font-size: var(--t-xs); }
  .bm-table th + th, .bm-table td + td { padding-left: 10px; }
  .frag-bm { padding: 14px; }
  .bm-head .tag { margin-left: 0; }
  .bm-track { grid-template-columns: 1fr; border-top: 0; margin-left: 3px; }
  .bm-track li { padding: 0 0 10px 16px; border-left: 1px solid var(--navy); }
  .bm-track li:last-child { padding-bottom: 0; border-left-color: transparent; }
  .bm-track li:last-child::after { content: ""; position: absolute; left: -1px; top: 0; height: 6px; width: 1px; background: var(--navy); }
  .bm-track li::before { left: -4px; top: 6px; }

  .frag-cat { padding: 18px 16px 14px; }
  .cat-switch { flex-direction: column; }
  .cat-switch span { min-height: 45px; margin-left: 0; margin-top: -1px; justify-content: flex-start; }
  .cat-switch label:first-of-type span { border-radius: var(--r-ctl) var(--r-ctl) 0 0; margin-top: 0; }
  .cat-switch label:last-of-type span { border-radius: 0 0 var(--r-ctl) var(--r-ctl); }
  .checklist li { flex-direction: column; gap: 2px; }
  .checklist .st { text-align: left; white-space: normal; }
  .checklist li::before { left: -10px; }

  .frag-alert { padding: 16px; }
  .alert-line li { grid-template-columns: 1fr; gap: 0; }
  .plan-table thead { display: none; }
  .plan-table, .plan-table tbody { display: block; }
  .plan-table tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .plan-table td:nth-child(1), .plan-table td:nth-child(2) { grid-column: 1 / -1; }
  .plan-table td { padding: 0; border: 0; }
  .plan-table td + td { padding-left: 0; color: var(--muted); }
  .plan-table td:last-child { white-space: normal; }
  .plan-table td:nth-child(4)::before { content: "Canal: "; }
  .plan-table td:nth-child(4) { text-align: right; }

  .frag-mcp { padding: 14px 16px 6px; }
  .mcp-row { grid-template-columns: 1fr; gap: 4px; }
  .mcp-row dt time { display: inline; margin-left: 6px; }
  .chat-table th:nth-child(1), .chat-table td:nth-child(1) { display: none; }
  .chat-table th:nth-child(2), .chat-table td:nth-child(2) { padding-left: 0; }
  .mcp-side { grid-template-columns: 1fr; }

  .step-line { grid-template-columns: 1fr; row-gap: 36px; }
  .step { padding-left: 64px; }
  .step-n { position: absolute; left: 0; top: 0; margin: 0; }
  .step:not(:last-child)::after { left: calc(var(--step-n) / 2); top: var(--step-n); width: 1px; height: auto; bottom: -36px; transform-origin: top; }

  .seg-table, .seg-table thead, .seg-table tbody, .seg-table tr, .seg-table th, .seg-table td { display: block; }
  .seg-table thead { display: none; }
  .seg-table tr { padding: 14px 0 6px; border-top: 1px solid var(--navy); }
  .seg-table tbody th { padding: 0 0 8px; border: 0; color: var(--ink); font-stretch: var(--w-body); font-weight: 600; }
  .seg-table td { padding: 8px 0 8px 108px; position: relative; border-bottom: 1px solid var(--line); }
  .seg-table td:last-child { border-bottom: 0; }
  .seg-table td::before { content: attr(data-seg); position: absolute; left: 0; top: 8px; width: 100px; color: var(--muted); font-stretch: var(--w-cond); font-size: var(--t-s); }

  .titleblock { grid-template-columns: 96px minmax(0, 1fr); }
  .tb-logo { padding: 12px; }
  .tb-logo img { width: 64px; }
  .tb-fields { grid-template-columns: 1fr; }
  .tb-fields > div:nth-child(2) { border-left: 0; }
  .footer-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .js .motto:not(.is-played) .motto-dims li::before { clip-path: inset(0 0 100% 0); }
  .js .step-line:not(.is-played) .step:not(:last-child)::after { transform: scaleY(0); }
}

@media (max-width: 400px) {
  .btn { padding: 0 16px; }
  .hero-actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  html, html.is-loaded { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}

/* below the supported range (320px, or 400% zoom): totals may wrap rather than widen the page */
@media (max-width: 359px) {
  .bm-table .num { white-space: normal; }
}