/* ============================================================
   overA Capital — page: abordagem
   2026-07-27 REALIGNMENT PASS.

   The page had drifted into being its own website: a 100svh espresso
   hero with radial glows + a noise grain overlay, then a 1700px
   espresso band — 61% of the page dark, on a site where EVERY other
   interior page (transações, blog, contato, carreiras) is paper or oat.
   It also carried its own type weights (Barlow 700) and its own icon
   family (Material Symbols Rounded @ wght 400 instead of the site's
   Outlined @ 300), which is what made it read heavy/"fat".

   This sheet puts the page back on the house system:
     · the top is the shared interior-page masthead (paper, --fs-page-title,
       hairline, heroSettle) that tx-top / cnt-top already use;
     · the rhythm alternates paper -> oat -> paper -> oat -> espresso footer,
       so every boundary is a real tone change and dark appears exactly once
       (the footer), as on every other interior page;
     · the four fake-app panels became real DATA FIGURES (.fig) — see that
       block; the product mock's chrome was most of the page's weight;
     · ~530 lines of dead CSS (.iv1-.iv6, .iodv, .iod__rail, .ab-st,
       .ab-mast, .rec-*) and four duplicated :root blocks removed.
   ============================================================ */

/* ------------------------------------------------------------------
   One page-scoped token. The figures' sub-labels are the only type on the
   site allowed below the 13px editorial floor — chart annotation earns it.
   ------------------------------------------------------------------ */
:root { --ab-ui: 0.75rem; }   /* 12px */


/* =========================================================
   SECTION 0 — PAGE MASTHEAD (.ab-hero)

   Third pass, 2026-07-27. The second pass fixed the right problem the
   wrong way: it got a real photograph onto the page (correct — the
   flat cream opening had no depth and the firm's own corridor was
   sitting unused), but it delivered that photograph as a full-bleed
   scrimmed dark hero with the type stepped up to --fs-h1. That is the
   HOME hero's device, so abordagem read as a second home page, and it
   broke the one rule the token file states outright: --fs-page-title
   is "THE one hero / page-title size — identical on every page".

   So: the masthead grammar goes back to the interior-page one that
   transações / blog / contato use — paper ground, header-height
   offset, --fs-page-title, hairline, heroSettle — and the photograph
   stays, CONTAINED in the right column instead of bled behind
   everything. Same house rule the page close already follows ("never
   full-bleed a photo"). Home keeps the full-bleed dark opening; this
   page gets a paper masthead with a picture in it. Different device,
   same family.
   ========================================================= */
.ab-hero {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding-top: calc(var(--header-h) + clamp(2.4rem, 5vw, 4.5rem));
  padding-bottom: clamp(4rem, 7vw, 6.5rem);
}

.ab-hero > .container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(2.4rem, 4.5vw, 3.6rem);
}

@media (prefers-reduced-motion: no-preference) {
  .ab-hero > .container { animation: heroSettle 0.9s var(--ease-out) both; }
}

.ab-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.ab-hero__head { max-width: 30rem; }

/* the same size every other page title is set at — not a step up */
.ab-hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: var(--fs-page-title);
  line-height: 1.05; letter-spacing: -0.02em;
  color: var(--ink); margin: 0;
}

.ab-hero h1 .accent,
.ab-close h2 .accent { font-style: normal; color: var(--accent); }

.ab-hero__lead {
  font-family: var(--sans);
  font-size: var(--fs-lead); line-height: 1.5;
  color: var(--ink-muted); max-width: 40ch; margin: 1.2rem 0 0;
}

.ab-hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; }

/* the photograph: contained, one card radius, the house photo treatment */
.ab-hero__ph { margin: 0; border-radius: var(--r); overflow: hidden; }

.ab-hero__ph img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3;        /* wider window: the 5/4 crop cut the wall sign */
  object-fit: cover;
  object-position: 68% 58%;   /* holds the whole OVER A sign in frame */
}

@media (max-width: 980px) {
  .ab-hero__grid { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 2.8rem); }
  .ab-hero__head { max-width: none; }
  .ab-hero__lead { max-width: 46ch; }
  .ab-hero__ph img { aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) {
  .ab-hero__cta { flex-direction: column; align-items: stretch; }
  .ab-hero__cta .btn { justify-content: center; }
}


/* ---- the four advantages: a hairline 4-up under the masthead ---- */
.abv {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.abv__item { padding: clamp(1.4rem, 2.2vw, 1.9rem) clamp(1.1rem, 1.8vw, 1.6rem) 0; }

.abv__item:first-child { padding-left: 0; }

.abv__item:last-child { padding-right: 0; }

.abv__item + .abv__item { border-left: 1px solid var(--line); }

.abv h3 {
  font-family: var(--display); font-weight: 400;
  font-size: var(--fs-h4); line-height: 1.16; letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 0.6rem;
}

.abv p {
  margin: 0; font-family: var(--sans);
  font-size: var(--fs-small); line-height: 1.5;
  color: var(--ink-muted); max-width: 30ch; text-wrap: pretty;
}

.abv__pay h3 {
  font-family: var(--sans); font-size: var(--fs-small); line-height: 1.5;
  letter-spacing: normal; color: var(--ink-muted); margin: 0 0 0.5rem;
}

.abv__pay p {
  font-family: var(--display); font-size: var(--fs-h4);
  line-height: 1.16; letter-spacing: -0.015em;
  color: var(--ink); max-width: none;
}

.abv__pay p .accent { font-style: normal; color: var(--accent); }

@media (max-width: 980px) {
  .abv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abv__item + .abv__item { border-left: 0; }
  .abv__item:nth-child(even) { border-left: 1px solid var(--line); }
  .abv__item:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: clamp(1.5rem, 2.4vw, 2rem); }
}

@media (max-width: 560px) {
  .abv { grid-template-columns: 1fr; }
  .abv__item:nth-child(even) { border-left: 0; }
  .abv__item:nth-child(n+2) { border-top: 1px solid var(--line); padding-top: clamp(1.3rem, 4vw, 1.7rem); }
}


/* ---- header: light masthead, so the transparent state reads ink
   (the same block blog / transações / contato / carreiras use) ---- */
.site-header:not(.site-header--solid) .nav-links a { color: var(--ink-muted); opacity: 1; }
.site-header:not(.site-header--solid) .nav-links a:hover,
.site-header:not(.site-header--solid) .nav-links a.is-active { color: var(--ink); opacity: 1; }
.site-header:not(.site-header--solid) .nav-cta.btn--ghost { border-color: var(--line); color: var(--ink); }
.site-header:not(.site-header--solid) .nav-cta.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.site-header:not(.site-header--solid) .nav-toggle span { background: var(--ink); }
.site-header:not(.site-header--solid) .lang-switch > summary { color: var(--ink-muted); }
.site-header:not(.site-header--solid) .lang-switch > summary:hover,
.site-header:not(.site-header--solid) .lang-switch[open] > summary { color: var(--ink); }


/* =========================================================
   DATA FIGURES (.fig) — replaces the .abp product mock, 2026-07-27.

   The mock wrapped 6 numbers in 18 filled/bordered shapes across four
   levels of box nesting (panel > card > row > icon chip), with a wallet
   glyph beside "Preço" carrying no information. That chrome-to-data
   ratio was the weight. And despite reading as charts, only one of the
   four actually plotted anything.

   These are charts. The rules they follow, in order:
     · FORM FIRST. Magnitude with one leader that is the point -> emphasis
       bars. A ranked score where no single row is the point -> one series,
       ONE colour (position already orders it; painting by rank would spend
       the identity channel re-encoding bar length). A distribution ->
       range plot. State in a sequence -> not a chart at all, an ordinal
       track.
     · COLOUR LAST, AND COMPUTED. Emphasis pair --accent #BA7027 (lead) vs
       --areia #CCC1AF (context) on --paper, checked with the validator:
       CVD dE 21.2, normal-vision dE 22.5 — both well clear, so the
       highlight actually pops. The pair's sub-3:1 contrast WARN obligates
       a relief channel; every mark carries a visible value label, so the
       value is never gated behind colour.
     · MARKS. Bars 10px (cap is 24 — never fill the slot), 4px rounded
       data-end and square at the baseline. Axes/spines hairline, solid,
       one step off surface, recessive. Markers 9px with a 2px surface
       ring. No border is ever drawn around a mark to separate it.
     · TEXT WEARS TEXT TOKENS. Values, names and captions stay in ink /
       ink-muted / ink-faint; the coloured mark beside them carries the
       identity. tabular-nums only where numbers align vertically.
     · No legend box: each figure plots a single series, so the label
       above it already names what is plotted.
   Scoped .fig-
   ========================================================= */
/* The figure sits in a big soft pale container with real air around it —
   OffDeal's move: a generous low-contrast panel holding small crisp UI.
   Bare on the page the same chart reads like a spreadsheet. Filled, no
   border, no shadow: their cards carry none. */
.fig {
  --fig-lead: var(--accent);      /* the emphasised mark */
  --fig-ctx:  var(--areia);       /* context marks, deliberately de-saturated */
  --fig-axis: var(--line-strong); /* hairline spine / scale — recessive, but --line (0.13) vanished on paper */
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  /* 2026-08-03: the band under it went oat, so the panel goes --paper —
     it now reads as a raised surface AND every marker's 2px ring (also
     --paper) finally sits flush with the surface it rings. */
  background: var(--paper);
  border-radius: 16px;
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
}

.fig__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.2rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--fig-axis);
}

.fig__label { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }

.fig__meta { font-size: var(--fs-xs); color: var(--ink-faint); text-align: right; }

.fig__note {
  margin: 1.3rem 0 0;
  font-size: var(--fs-xs); line-height: 1.5;
  color: var(--ink-faint); text-wrap: pretty;
}

.fig__note b { color: var(--ink-muted); font-weight: 600; }


/* ---------------------------------------------------------------
   THE ROWS ARE CONTROLS NOW — client review 2026-08-03.

   The figures already carried hover states (the bar re-tints, the marker
   grows) with nothing behind them: "você clica e não vai". Every row that
   moves under the cursor is a <button> now, and opens a drop with what
   sits behind it — the terms of a proposal, why a buyer is on the radar,
   what actually happens inside a stage of the mandate.

   Nothing about the resting look changes: the buttons are stripped back
   to the block they replaced, and the only added ink is one 8px chevron
   per row. Motion is grid-template-rows 0fr -> 1fr, which animates to the
   content's real height without measuring anything in JS
   (see assets/js/page-abordagem.js).
   --------------------------------------------------------------- */
.fig-item { min-width: 0; }

/* the reset: a button that is indistinguishable from the div it replaced */
.fig-bar,
.fig-dot,
.fig-track__b {
  display: block; width: 100%;
  margin: 0; padding: 0 1.35rem 0 0;   /* right gutter = the chevron's lane */
  background: none; border: 0; border-radius: 4px;
  font: inherit; color: inherit; text-align: left;
  -webkit-appearance: none; appearance: none;
  cursor: pointer; position: relative;
}

.fig-bar:focus-visible,
.fig-dot:focus-visible,
.fig-track__b:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}

/* the one added mark: a hairline chevron, quiet until hovered */
.fig-chev {
  position: absolute; right: 2px; top: 0.34rem;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(45deg);
  transition: transform .3s var(--ease), border-color .22s var(--ease);
}

.fig-bar:hover .fig-chev,
.fig-dot:hover .fig-chev,
.fig-track__b:hover .fig-chev { border-color: var(--ink); }

[aria-expanded="true"] > .fig-chev {
  transform: rotate(-135deg);
  border-color: var(--accent);
}

/* the drop */
.fig-drop {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s var(--ease);
}

/* an explicit display beats the UA's [hidden] { display:none } on
   specificity, so the attribute has to be honoured by hand */
.fig-drop[hidden] { display: none; }

.fig-drop.is-open { grid-template-rows: 1fr; }

.fig-drop > .fig-drop__in { min-height: 0; overflow: hidden; }

/* the air above the drop rides on the CHILD's margin, not on the wrapper's
   padding: padding on a 0fr grid item still paints, so it would leak a
   15px gap under every closed row */
.fig-drop__in > :first-child { margin-top: 0.95rem; }

.fig-drop__lead {
  margin: 0 0 0.7rem;
  font-size: var(--ab-ui); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-deep); font-weight: 600;
}

/* proposal terms: a two-column definition list on a hairline stack */
.fig-terms { margin: 0; display: flex; flex-direction: column; }

.fig-terms > div {
  display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: 0.5rem 1rem; padding: 0.5rem 0;
  border-top: 1px solid var(--fig-axis);
}

.fig-terms dt { font-size: var(--ab-ui); color: var(--ink-faint); }

.fig-terms dd { margin: 0; font-size: var(--ab-ui); color: var(--ink-muted); line-height: 1.5; text-wrap: pretty; }

/* why a buyer is on the radar: one calm paragraph, no chrome */
.fig-why {
  margin: 0; padding-top: 0.7rem;
  border-top: 1px solid var(--fig-axis);
  font-size: var(--ab-ui); line-height: 1.6; color: var(--ink-muted);
  text-wrap: pretty;
}

/* "como o seu deal é tocado nesta etapa" — the sub-steps of a stage */
.fig-sub { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.fig-sub li {
  position: relative; padding-left: 0.95rem;
  font-size: var(--ab-ui); line-height: 1.5; color: var(--ink-muted);
  text-wrap: pretty;
}

.fig-sub li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 4px; height: 1px; background: var(--areia-escuro);
}

@media (prefers-reduced-motion: reduce) {
  .fig-drop { transition: none; }
  .fig-chev { transition: none; }
}


/* ---- shared row: name left, value right (the direct label) ---- */
.fig-bar__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.5rem;
}

.fig-bar__name {
  font-size: var(--fs-xs); color: var(--ink-muted);
  transition: color .22s var(--ease);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* the value is the relief channel for the context marks' low contrast —
   it is always visible, never only in a tooltip */
.fig-bar__val {
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;   /* a vertically aligned column */
  flex: 0 0 auto;
}

.fig-bar__sub {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.45rem;
  margin-top: 0.42rem; min-width: 0;
  font-size: var(--ab-ui); color: var(--ink-faint);
}
/* the facts are separate spans: on desktop they read as one line with
   middots; on a phone (client review 2026-08-28) the first fact takes its
   own line and the rest stack under it, so nothing is ellipsized */
.fig-bar__sub > span { white-space: nowrap; }
.fig-bar__sub > span + span::before { content: "\00B7"; margin-right: 0.45rem; color: var(--line-strong); }
@media (max-width: 640px) {
  .fig-bar__sub { flex-direction: column; row-gap: 0.12rem; margin-top: 0.5rem; }
  .fig-bar__sub > span + span::before { content: none; }
  .fig-bar__sub > span:first-child { color: var(--ink-muted); font-weight: 600; }
  .fig-bar__sub > span + span { padding-left: 0.7rem; position: relative; }
  .fig-bar__sub > span + span::after {
    content: ""; position: absolute; left: 0; top: 0.5em; width: 4px; height: 4px;
    border-radius: 50%; background: var(--line-strong);
  }
}


/* ---- FIG 1: emphasis bars ---- */
.fig-bars { display: flex; flex-direction: column; gap: clamp(1.05rem, 1.6vw, 1.45rem); padding-top: 1.15rem; }

.fig-bar__track { height: 10px; }   /* the slot; the bar never fills it edge to edge */

.fig-bar__fill {
  display: block; height: 100%;
  background: var(--fig-ctx);
  border-radius: 0 4px 4px 0;   /* rounded data-end, square at the baseline */
  transform-origin: left center;
  transition: background-color .22s var(--ease);
}

.fig-bar--lead .fig-bar__fill { background: var(--fig-lead); }

.fig-bar--lead .fig-bar__name { color: var(--ink); font-weight: 600; }

.fig-bar:hover .fig-bar__name { color: var(--ink); }

.fig-bar:hover .fig-bar__fill { background: var(--areia-escuro); }

.fig-bar--lead:hover .fig-bar__fill { background: var(--accent-deep); }


/* ---- FIG 2: dot plot on a shared 0–100% scale ----
   One series, so one colour: rank is already carried by the row order. */
.fig-dots { display: flex; flex-direction: column; gap: clamp(1.15rem, 1.8vw, 1.6rem); padding-top: 1.15rem; }

.fig-dot__track { position: relative; height: 10px; }

/* the scale: a hairline that runs the full width, recessive */
.fig-dot__track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; margin-top: -0.5px;
  background: var(--fig-axis);
}

/* No lollipop stem: a stem light enough to stay subordinate was lighter than
   the scale it sat on, which inverted the reading (the filled part looked
   emptier than the track). This is a plain Cleveland dot plot — position on a
   visible scale, one bold marker, nothing else. */
.fig-dot__pt {
  position: absolute; top: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--fig-lead);
  box-shadow: 0 0 0 2px var(--paper);   /* the 2px surface ring, not a border */
  transition: transform .22s var(--ease);
}

.fig-dot:hover .fig-dot__pt { transform: scale(1.18); }

.fig-dot:hover .fig-bar__name { color: var(--ink); }

/* the axis, stated once for the whole group — without it a marker's position
   on the track carries no meaning */
/* the 1.35rem right gutter matches the chevron lane the rows now carry, so
   the "100%" end of the axis still lines up with the end of every track */
.fig-dots__scale {
  display: flex; justify-content: space-between;
  margin-top: 1.1rem; padding-top: 0.55rem; padding-right: 1.35rem;
  border-top: 1px solid var(--fig-axis);
  font-size: var(--ab-ui); color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}


/* ---- FIG 3: range plot on the real 6,0×–9,2× axis ---- */
.fig-range { padding-top: 1.5rem; }

.fig-range__plot { position: relative; height: 20px; }

.fig-range__axis {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; margin-top: -0.5px;
  background: var(--fig-axis);
}

/* interquartile band: context colour, the shape of the distribution */
.fig-range__band {
  position: absolute; top: 50%; height: 10px; margin-top: -5px;
  background: var(--fig-ctx);
  border-radius: 2px;
}

/* the median: the one accented mark in this figure */
.fig-range__med {
  position: absolute; top: 50%; width: 3px; height: 20px; margin: -10px 0 0 -1.5px;
  background: var(--fig-lead);
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 2px var(--paper);
}

.fig-range__scale {
  position: relative;
  display: flex; justify-content: space-between;
  margin-top: 0.7rem;
  font-size: var(--ab-ui); color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.fig-range__medlab {
  position: absolute; top: 0; transform: translateX(-50%);
  white-space: nowrap; color: var(--accent-deep); font-weight: 600;
}

/* the comparables list — the figure's table view: every plotted point is
   also a readable row, so nothing is reachable only by looking at a dot */
.fig-comps { margin: 1.9rem 0 0; display: flex; flex-direction: column; }

.fig-comps > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 0.55rem 0;
  border-top: 1px solid var(--fig-axis);
}

.fig-comps dt { font-size: var(--ab-ui); color: var(--ink-muted); }

.fig-comps dd {
  margin: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}


/* ---- FIG 4: ordinal track (state in a sequence — not a chart) ----
   Position carries the order; terracotta marks only the current step; and
   every state also carries a word, so the state is never colour alone. */
.fig-track { list-style: none; margin: 1.35rem 0 0; padding: 0; }

.fig-track__s { position: relative; padding: 0 0 1.5rem 1.75rem; }

.fig-track__s:last-child { padding-bottom: 0; }

/* the spine */
.fig-track__s:not(:last-child)::before {
  content: ""; position: absolute; left: 4px; top: 1.05rem; bottom: 0.2rem;
  width: 1px; background: var(--fig-axis);
}

/* the step marker */
.fig-track__s::after {
  content: ""; position: absolute; left: 0; top: 0.34rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--areia-escuro);   /* done: filled, mid-tone */
  box-shadow: 0 0 0 2px var(--paper);
}

.fig-track__s--now::after { background: var(--fig-lead); }

.fig-track__s--next::after { background: transparent; border: 1px solid var(--line-strong); }

.fig-track__t { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--ink); line-height: 1.3; }

.fig-track__s--next .fig-track__t { color: var(--ink-muted); }

.fig-track__d { display: block; margin-top: 0.15rem; font-size: var(--ab-ui); color: var(--ink-faint); }

.fig-track__k {
  display: block; margin-top: 0.3rem;
  font-size: var(--ab-ui); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint);
}

.fig-track__s--now .fig-track__k { color: var(--accent-deep); font-weight: 600; }


@media (prefers-reduced-motion: reduce) {
  .fig-dot:hover .fig-dot__pt { transform: none; }
}

@media (max-width: 460px) {
  .fig-bar__name { white-space: normal; }
  .fig__head { flex-direction: column; gap: 0.3rem; }
  .fig__meta { text-align: left; }
}


/* =========================================================
   SECTION 1 — MÉTODO MAPEADO (.etp)
   The giro, "um relógio só": one master GSAP timeline governs the
   column slide, the stage index and the rests (see the script at the
   end of the page). Nothing here is a box: the old --paper-2 card with
   4.6rem of padding read as a fat inset panel — a device that appears
   nowhere else on the site. It is now the site's one tint band, --oat,
   sealed top and bottom by a hairline, with the statement welded to the
   same container-left spine the h1 above and the h2 below sit on.
   Scoped .etp-
   ========================================================= */
/* (retired 2026-08-28) the "Método mapeado" rotator (.etp-*) — replaced by the
   momento ledger (.cmp-*) at the end of this file. */

/* =========================================================
   SECTION 2 — "ELA É O PROCESSO" (.iod / .iodx)
   Three capability rows, each pairing a short benefit line with a
   data figure. Formerly 1707px of espresso — the single
   largest dark mass on the site and the main reason the page did not
   belong to it. Now paper, so the band reads as the continuation of
   the masthead it explains. Scoped .iod- / .iodx-
   ========================================================= */
.iod {
  position: relative;
  background: var(--oat);        /* took the tint from .etp — see that block */
  color: var(--ink);
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* ---- the claquete (client review 2026-08-03) ----------------------
   The band opened straight onto the first figure and the reviewer read
   it as "classificados": a marketplace of companies for sale. The head
   now states, in words, before any mock: whose screen this is (ours,
   internal), what it is showing (your mandate), and that the rows open.
   Headline left, framing right — the same two-column head the site uses
   elsewhere, so nothing new is invented visually. */
.iod__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: end;
}

.iod__kicker {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0 0 1.05rem;
  font-family: var(--sans); font-size: var(--fs-small); font-weight: 600;
  color: var(--accent);
}

.iod__kicker::before {
  content: ""; flex: 0 0 auto;
  width: 2rem; height: 1px; background: var(--accent);
}

.iod__frame { padding-bottom: 0.25rem; }

.iod__lead {
  font-family: var(--sans);
  font-size: var(--fs-body); line-height: 1.6;
  color: var(--ink-muted); max-width: 46ch;
  margin: 0 0 0.9rem; text-wrap: pretty;
}

.iod__lead b { color: var(--ink); font-weight: 600; }

/* (.iod__note retired 2026-08-28: the intro is one sentence now) */

@media (max-width: 900px) {
  .iod__head { grid-template-columns: 1fr; align-items: start; }
  .iod__lead { max-width: 56ch; }
}

.iod__h { margin: 0; max-width: 34rem; min-width: 0; text-align: left; }

/* The site's couplet is ONE size with a colour-only accent: both lines sit
   at --fs-h2, only the colour changes. */
.iod__setup {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-muted);
  text-wrap: balance;
}

.iod__payoff {
  display: block;
  margin-top: 0.1em;
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.iod__payoff.accent { color: var(--accent); }

.iodx { margin-top: clamp(3rem, 6vw, 5rem); display: flex; flex-direction: column; gap: clamp(3.5rem, 7vw, 6rem); }

.iodx__row { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

.iodx__row:nth-child(even) { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }

/* the propostas row is the page's main proof — it gets the wider panel */
.iodx__row--wide { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }

.iodx__row:nth-child(even) .iodx__copy { order: 2; }

.iodx__copy { max-width: 30rem; }

.iodx__n { font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; color: var(--accent); font-variant-numeric: tabular-nums; }

.iodx__copy h3 { font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); margin: 0.6rem 0 0.7rem; text-wrap: balance; }

.iodx__copy p { font-family: var(--sans); font-size: var(--fs-body); line-height: 1.55; color: var(--ink-muted); margin: 0; max-width: 40ch; text-wrap: pretty; }

@media (max-width: 900px) {
  .iodx__row { grid-template-columns: 1fr; gap: clamp(1.6rem, 5vw, 2.4rem); }
  .iodx__row:nth-child(even) { grid-template-columns: 1fr; }
  .iodx__row:nth-child(even) .iodx__copy { order: 0; }
  .iodx__copy { max-width: none; }
}


/* =========================================================
   SECTION 3 — PAGE CLOSE (.ab-close)
   The tombstone photo in a contained, rounded card (the house
   "never full-bleed a photo" rule) beside the terracotta CTA, on the
   tint band — so the page closes paper -> oat -> espresso footer and
   no two adjacent surfaces repeat a tone. Scoped .ab-close
   ========================================================= */
.ab-close {
  background: var(--oat);
  border-top: 1px solid var(--line);
}

.ab-close__inner {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 43fr);
  column-gap: clamp(2rem, 5%, 4.5rem);
  align-items: center;
}

.ab-close__copy h2 {
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 20ch;
  color: var(--ink);
  text-wrap: balance;
}

.ab-close__copy .lead {
  color: var(--ink-muted);
  max-width: 42ch;
  margin: 1.4rem 0 2.4rem;
}

.ab-close__media {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.ab-close__media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
  aspect-ratio: 4 / 3;
  filter: grayscale(1) contrast(1.06);
}

@media (max-width: 900px) {
  .ab-close__inner { grid-template-columns: 1fr; row-gap: 2.4rem; }
}


/* =========================================================
   SECTION 3 — MOMENTOS (.cmp-), moved from the home 2026-08-28
   "M&A antigo | M&A overA" made concrete, momento by momento, as the
   payoff of the platform band above it. The one espresso band on the
   page: dark works as punctuation here, between the oat platform band
   and the oat close.

   Geometry: one framed object. Every row is the same 3-column grid —
   [momento] [M&A antigo] [M&A overA] — so the columns align without
   display:contents and the rows stay a real <ul>. The overA cells share
   the raised espresso-2 surface, capped in terracotta at the top, so the
   eye reads the right side as one object and the left as loose practice.
   Terracotta is rationed to the column cap, the column tag and ONE <b>
   per overA cell (a concept, never a number). Below 760px every momento
   becomes a stacked card: label, the antigo side, the raised overA side.
   ========================================================= */

.cmp.section { background: var(--espresso); }

/* ---- head ---- */
.cmp__head { max-width: 56ch; margin-bottom: clamp(2.2rem, 3.6vw, 3.2rem); }
.cmp__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--on-dark);
  text-wrap: balance;
}
.cmp__title .accent { font-style: normal; color: var(--accent-soft); }
.cmp__lead {
  margin: 1.1rem 0 0;
  font-family: var(--sans);
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--on-dark-muted);
  max-width: 48ch;
}

/* ---- the framed ledger ---- */
.cmp__grid {
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r);
  overflow: hidden;
}
.cmp__grid .cmp__colhead,
.cmp__grid .cmp__row {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr) minmax(0, 1fr);
}
.cmp__cell { padding: clamp(1rem, 1.5vw, 1.45rem) clamp(1rem, 1.6vw, 1.6rem); }

/* ---- column head: the two worlds named once (mixed case: "overA" is never set in caps) ---- */
.cmp__colhead .cmp__cell { padding-block: 0.95rem; }
.cmp__tag {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cmp__tag--old { color: var(--on-dark-faint); }
.cmp__tag--new { color: var(--accent-soft); }

/* ---- the raised overA column: one continuous surface, capped in terracotta ---- */
.cmp__cell--new { background: var(--espresso-2); }
.cmp__colhead .cmp__cell--new { box-shadow: inset 0 2px 0 var(--accent); }

/* ---- rows: hairline-separated, never boxed ---- */
.cmp__rows { list-style: none; margin: 0; padding: 0; }
.cmp__row > .cmp__cell { border-top: 1px solid var(--line-on-dark); }

/* the momento label: information, set as a quiet rail */
.cmp__dim {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  line-height: 1.5;
}
.cmp__old, .cmp__new {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 1.62;
  text-wrap: pretty;
}
.cmp__old { color: var(--on-dark-muted); }
.cmp__new { color: var(--on-dark); }
/* the ONE emphasis inside a cell: the key concept of the overA side */
.cmp__new b { font-weight: 500; color: var(--accent-soft); }

@media (hover: hover) and (min-width: 761px) {
  .cmp__cell--new { transition: background-color var(--dur) var(--ease); }
  .cmp__row:hover .cmp__cell--new { background: var(--espresso-3); }
}

/* mobile-only per-cell tags: hidden while the column head is doing the job */
.cmp__tagm { display: none; }

/* ---- foot ---- */
.cmp__foot { margin-top: clamp(1.6rem, 2.8vw, 2.4rem); }
.cmp__foot .tlink { color: var(--on-dark); }
.cmp__foot .tlink .arr { color: var(--accent-soft); }

/* ---- phones (<=760px): one CARD per momento ------------------------
   The 3-column grid is unreadable on a phone. The frame dissolves into a
   stack of cards: the momento label is the card's head, the antigo side
   sits on the card, the overA side is the raised surface at its foot with
   its own terracotta tag. ---------------------------------------------- */
@media (max-width: 760px) {
  .cmp__grid { border: 0; border-radius: 0; overflow: visible; }
  .cmp__grid .cmp__colhead { display: none; }
  .cmp__rows { display: flex; flex-direction: column; gap: 0.9rem; }
  .cmp__grid .cmp__row {
    grid-template-columns: 1fr;
    border: 1px solid var(--line-on-dark);
    border-radius: var(--r);
    overflow: hidden;
    background: rgba(245, 239, 224, 0.025);
  }
  .cmp__row > .cmp__cell { border-top: 0; padding-inline: clamp(1.1rem, 4.5vw, 1.5rem); }
  .cmp__cell--dim { padding-top: 1.05rem; padding-bottom: 0; }
  .cmp__cell--old { padding-top: 0.6rem; padding-bottom: 1.05rem; }
  .cmp__cell--new { padding-top: 1rem; padding-bottom: 1.1rem; box-shadow: inset 0 1px 0 var(--line-on-dark); }
  .cmp__tagm {
    display: block;
    margin-bottom: 0.3rem;
    font-family: var(--sans);
    font-weight: 600;
    font-size: var(--fs-xs);
    letter-spacing: 0.01em;
  }
  .cmp__old .cmp__tagm { color: var(--on-dark-faint); }
  .cmp__new .cmp__tagm { color: var(--accent-soft); }
}