/* ============================================================
   overA Capital, page: Transações  (simplified, IGCP-style)
   A filterable WALL of clickable deal tombstones; each card opens
   an accessible native <dialog> that explains the seller, the buyer
   and the transaction. Page-scoped only — the shell (head/header/
   footer/site.js filter + count-up) is shared. The padded proof
   stats / espresso statement / founder quote bands were removed:
   the page is now hero -> wall -> one CTA, nothing else.

   It keeps the gold-standard tombstone card grammar (.txr-card,
   ported from index.html's inline <style>) scoped under .deal-wall
   so it can never touch the homepage rail — but the element is now a
   real <button> trigger, and the old expand-to-read disclosure is
   replaced by the dialog.
   ============================================================ */

/* ------------------------------------------------------------
   HEADER OVER PAPER HERO (page-scoped): base.css styles the unscrolled
   header for dark heroes (cream links/ghost CTA). Transações opens on
   paper, so repaint nav controls in ink tones until the header solidifies.
   (Copied verbatim from page-contato.css.)
   ------------------------------------------------------------ */
.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);
}

/* ------------------------------------------------------------
   TOP — a compact, gallery-style header: just the title "Transações",
   a hairline, then the grid. No hero lede, no proof band, no closing
   band — straight to the transactions. (The sector filter was removed
   at client request 2026-07-02; cards keep data-sector for later.)
   (Deliberately NOT .page-hero: that locks a ~78vh min-height on wide
   screens, which would leave a near-empty title screen.)
   ------------------------------------------------------------ */
.tx-top {
  background: var(--paper);
  padding-top: calc(var(--header-h) + clamp(2.4rem, 5vw, 4.5rem));
  padding-bottom: clamp(4.5rem, 9vw, 8rem);
}
.tx-top__head {
  margin-bottom: clamp(2.6rem, 5vw, 4rem);
  padding-bottom: clamp(1.6rem, 2.6vw, 2.2rem);
  border-bottom: 1px solid var(--line);
}
.tx-top__head h1 {
  font-size: var(--fs-page-title);
  line-height: 1.02;
  margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .tx-top > .container { animation: heroSettle 0.9s var(--ease-out) both; }
}

/* ------------------------------------------------------------
   THE WALL — a static logo-tombstone grid (explicitly NOT the
   homepage horizontal .txr rail: no drag, no scroll-snap, no
   overflow bleed). Reuses the shipped .deal-wall grid stepped to
   3-up at container width.
   ------------------------------------------------------------ */
@media (min-width: 901px) { .deal-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .deal-wall { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   CARD — the ported tombstone grammar, now a real <button> that
   opens the dialog. Box / logo-pair / flow are lifted from the
   homepage rail card and scoped under .deal-wall so they never
   collide with index.html's own copy.
   ------------------------------------------------------------ */
.deal-wall .txr-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: clamp(248px, 26vw, 300px);
  height: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.4rem, 2vw, 1.8rem);
  box-shadow: var(--shadow);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.deal-wall .txr-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(var(--lift));
}
.deal-wall .txr-card:active { transform: translateY(1px); }
.deal-wall .txr-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.deal-wall .txr-card__top { display: flex; align-items: center; min-height: 1.55rem; }
/* buyer-country flag on the card (injected by JS from data-buyer-country) */
.deal-wall .txr-card__flag { margin-left: auto; }
/* the wall chip is neutral paper (sector is information, not a color legend) */
.deal-wall .chip {
  background: var(--paper-2);
  color: var(--ink-muted);
  border-color: var(--line);
}

/* the real logo pair: fixed slot heights keep the skeleton geometric */
.deal-wall .txr-card__logo { display: flex; align-items: center; }
.deal-wall .txr-card__logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: 100%;
}
.deal-wall .txr-card__logo--target {
  height: var(--logo-target-h);            /* one logo size site-wide (tokens.css) */
  margin-top: clamp(1.2rem, 1.7vw, 1.6rem);
}
.deal-wall .txr-card__logo--target img { max-width: min(var(--logo-target-w), 82%); }
.deal-wall .txr-card__logo--acq {
  height: var(--logo-acq-h);
  margin-top: 0.55rem;
}
.deal-wall .txr-card__logo--acq img { max-width: min(var(--logo-acq-w), 64%); }

/* the flow: a quiet sentence-case kicker, then the acquirer mark.
   The margin-bottom guarantees clear air between the acquirer logo and
   the hairline foot below it (client request 2026-07-02), even when the
   flexible margin-top:auto on the cue has no slack to give. */
.deal-wall .txr-card__flow {
  display: block;
  margin-top: clamp(0.9rem, 1.4vw, 1.2rem);
  margin-bottom: clamp(1.2rem, 2vw, 1.7rem);
}
.deal-wall .txr-card__kicker {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  line-height: 1;
}
.deal-wall .txr-card__arrow { color: var(--accent); font-size: 1.15rem; }

/* the cue foot — a quiet "Ver transação" that sits at the same baseline
   on every card (margin-top:auto), so the grid stays even. */
.deal-wall .txr-card__cue {
  margin-top: auto;
  padding-top: 0.95rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-muted);
  transition: color var(--dur) var(--ease);
}
.deal-wall .txr-card__cue .msym {
  color: var(--ink-faint);
  font-size: 1.15rem;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.deal-wall .txr-card:hover .txr-card__cue { color: var(--ink); }
.deal-wall .txr-card:hover .txr-card__cue .msym { color: var(--accent); transform: translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  .deal-wall .txr-card:hover,
  .deal-wall .txr-card:active { transform: none; }
  .deal-wall .txr-card:hover .txr-card__cue .msym { transform: none; }
}

/* per-deal anchors (linked from the homepage rail): clear the fixed header
   when the page jumps to a deal. The wall buttons carry id="deal-<slug>". */
.txr-card[id] { scroll-margin-top: calc(var(--header-h) + 2.5rem); }

/* ------------------------------------------------------------
   DEAL MODAL — native <dialog>. showModal() gives a real focus trap,
   Esc-to-close and a ::backdrop for free; JS fills it from the
   clicked card's data-* attributes. No-<dialog> browsers fall back
   gracefully (the card simply does nothing — content is still in the
   page for crawlers via the card logos + aria-label).
   ------------------------------------------------------------ */
.deal-modal {
  /* fixed + inset:0 + margin:auto centers it in the VIEWPORT regardless of
     scroll position. Without this the UA leaves a modal dialog at
     position:absolute (anchored to the top of the *document*), so opening a
     card near the page bottom smooth-scrolls the whole page up to it. */
  position: fixed;
  inset: 0;
  --dm-pad: clamp(1.9rem, 4vw, 2.75rem);
  width: min(620px, calc(100vw - 2rem));
  max-width: 620px;
  /* the editorial body is long: cap the frame and let .__inner scroll */
  max-height: min(85dvh, calc(100dvh - 2.5rem));
  margin: auto;                       /* center in the viewport */
  padding: 0;
  overflow: hidden;                   /* the frame; .__inner scrolls */
  border: 0;
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  /* layered warm depth instead of a box border: a hairline ring, a contact
     shadow, one deep ambient key — the document floats over the frost */
  box-shadow:
    0 0 0 1px rgba(28, 21, 8, 0.09),
    0 1px 2px rgba(28, 21, 8, 0.07),
    0 28px 80px rgba(28, 21, 8, 0.35);
}
/* the room recedes: deep warm frost, not a gray dim — the page stays
   readable as texture but every competing detail is gone */
.deal-modal::backdrop {
  background: rgba(24, 17, 7, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(0.85);
  backdrop-filter: blur(14px) saturate(0.85);
}
/* the scroll area for long descriptions; the close button (a direct
   child of <dialog>) stays pinned to the frame, never scrolls away */
.deal-modal__inner {
  max-height: min(85dvh, calc(100dvh - 2.5rem));
  overflow-y: auto;
  overscroll-behavior: contain;       /* the page behind never scroll-chains */
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--dm-pad) clamp(1.7rem, 3.4vw, 2.2rem);
}

.deal-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink-muted);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease), transform 0.15s var(--ease);
}
.deal-modal__close:hover { color: var(--ink); border-color: var(--line-strong); background: var(--paper); }
.deal-modal__close:active { transform: scale(0.94); }
.deal-modal__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the composed tombstone plate — now the modal's MASTHEAD: it runs
   full-bleed edge to edge under the frame's top corners (negative margins
   against the inner padding), so the dialog opens on the deal itself, not
   on white air. One whisper α seal engraved behind the marks (the
   .footer-mark grammar), a single hairline seam into the paper below. */
.deal-modal__plate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  margin: 0 calc(-1 * var(--dm-pad));
  padding: clamp(2.6rem, 5vw, 3.3rem) clamp(1.4rem, 3vw, 2rem) clamp(1.6rem, 3.2vw, 2rem);
  background: var(--paper-2);
  border-bottom: 1px solid var(--oat-deep);
  overflow: hidden;
}
.deal-modal__plate::before {
  content: "\03B1";
  position: absolute;
  right: -0.06em;
  bottom: -0.36em;
  font-family: var(--display);
  font-size: 9.5rem;
  font-weight: 500;
  line-height: 1;
  color: rgba(28, 21, 8, 0.045);
  pointer-events: none;
}
.deal-modal__logo,
.deal-modal__kicker { position: relative; }
.deal-modal__logo { display: flex; align-items: center; justify-content: center; }
.deal-modal__logo img { display: block; width: auto; height: auto; max-height: 100%; }
.deal-modal__logo--target { height: var(--logo-target-h); }   /* one logo size site-wide (tokens.css) */
.deal-modal__logo--target img { max-width: min(var(--logo-target-w), 64vw); }
.deal-modal__logo--acq { height: var(--logo-acq-h); margin-top: 0.15rem; }
.deal-modal__logo--acq img { max-width: min(var(--logo-acq-w), 52vw); }
.deal-modal__kicker {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  line-height: 1;
}
.deal-modal__arrow { color: var(--accent); font-size: 1.15rem; }

/* the buyer's origin — a quiet caption under the acquirer mark: a small
   rounded flag (inline SVG data-URI, the language-switcher flag grammar,
   redrawn here because base.css only ships switcher languages) + the
   country name in PT-BR. Hidden by JS when a card carries no country. */
.deal-modal__origin {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.15rem;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  line-height: 1;
}
.deal-modal__flag {
  width: 20px;
  height: 14px;
  border-radius: 2.5px;
  flex: none;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(28, 21, 8, 0.10), inset 0 0 0 0.5px rgba(255, 255, 255, 0.28);
}
.deal-modal__flag--br { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'><rect width='28' height='20' fill='%23009C3B'/><path d='M14 2.6 25.4 10 14 17.4 2.6 10Z' fill='%23FFDF00'/><circle cx='14' cy='10' r='4.1' fill='%23002776'/></svg>"); }
.deal-modal__flag--es { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'><rect width='3' height='2' fill='%23AA151B'/><rect y='.5' width='3' height='1' fill='%23F1BF00'/></svg>"); }
.deal-modal__flag--fr { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'><rect width='3' height='2' fill='%23fff'/><rect width='1' height='2' fill='%23002395'/><rect x='2' width='1' height='2' fill='%23ED2939'/></svg>"); }
.deal-modal__flag--be { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'><rect width='3' height='2' fill='%23FDDA24'/><rect width='1' height='2' fill='%23000'/><rect x='2' width='1' height='2' fill='%23EF3340'/></svg>"); }
.deal-modal__flag--ch { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'><rect width='20' height='14' fill='%23D52B1E'/><rect x='8.6' y='3.1' width='2.8' height='7.8' fill='%23fff'/><rect x='6.1' y='5.6' width='7.8' height='2.8' fill='%23fff'/></svg>"); }
.deal-modal__flag--se { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'><rect width='16' height='10' fill='%23006AA7'/><rect x='5' width='2' height='10' fill='%23FECC02'/><rect y='4' width='16' height='2' fill='%23FECC02'/></svg>"); }
.deal-modal__flag--us { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 10'><rect width='19' height='10' fill='%23B22234'/><path d='M0 1.15H19M0 2.7H19M0 4.23H19M0 5.77H19M0 7.3H19M0 8.85H19' stroke='%23fff' stroke-width='.77'/><rect width='7.6' height='5.4' fill='%233C3B6E'/></svg>"); }

/* the quiet meta line under the plate: just the sector, nothing dressed */
.deal-modal__meta {
  margin: 1.35rem 0 0;
  text-align: center;
  font-family: var(--sans);
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  color: var(--ink-faint);
}

/* the editorial body — two serif sentence-case headings (Contexto /
   Racional da transação) over multi-paragraph Barlow prose, hairline
   separations. JS builds one <p> per "||"-joined paragraph. */
.deal-modal__body {
  margin: clamp(1.5rem, 3vw, 1.9rem) 0 0;
  border-top: 1px solid var(--line);
}
.deal-modal__section { padding: clamp(1.3rem, 2.4vw, 1.6rem) 0; }
.deal-modal__section + .deal-modal__section { border-top: 1px solid var(--line); }
.deal-modal__section h2 {
  font-family: var(--display);
  font-size: var(--fs-h4);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.7rem;
}
.deal-modal__section p {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 1.68;
  color: var(--ink-muted);
}
.deal-modal__section p + p { margin-top: 0.85em; }

/* editorial pull-quote after the racional — a quiet hairline-left block:
   Newsreader 400 ROMAN (never italic), curly quotes drawn by CSS, with a
   Barlow small attribution line (author medium, role regular). Hidden by
   JS when a deal carries no sourced quote. */
.deal-modal__quote {
  margin: 0.2rem 0 clamp(1.3rem, 2.4vw, 1.6rem);
  padding: 0.4rem 0 0.4rem 1.15rem;
  border-left: 2px solid var(--accent);
}
.deal-modal__quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
  line-height: 1.5;
  color: var(--ink);
}
.deal-modal__quote blockquote::before { content: "\201C"; }
.deal-modal__quote blockquote::after { content: "\201D"; }
.deal-modal__quote figcaption {
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-faint);
}
.deal-modal__quote-author {
  font-weight: 500;
  color: var(--ink-muted);
}

/* the closing block: the sell-side advisory line (IGCP's "assessora
   financeira exclusiva" pattern, in overA's plain voice) + the sourced
   press link when the deal has one. */
.deal-modal__foot {
  margin-top: 0.2rem;
  padding-top: clamp(1.15rem, 2vw, 1.4rem);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.deal-modal__advisory {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0;
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--ink);
}
.deal-modal__advisory::before {
  content: "\03B1";              /* the brand alpha mark */
  color: var(--accent);
  font-weight: 600;
}
.deal-modal__news {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.deal-modal__news .msym {
  color: var(--accent);
  font-size: 1.1rem;
  transition: transform var(--dur) var(--ease);
}
.deal-modal__news:hover { color: var(--ink); }
.deal-modal__news:hover .msym { transform: translate(2px, -2px); }
.deal-modal__news:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ---- choreography ----
   Open: the document MATERIALIZES — rises 16px, settles from 0.97 scale,
   comes into focus from a 6px blur, on the iOS sheet curve (fast arrival,
   long soft landing). The frost fades with it.
   Close: JS adds .is-closing and waits for animationend before calling
   dialog.close(), so leaving is a quick quiet sink instead of a snap —
   exits subtler and faster than enters. Reduced motion: both are instant
   (the JS skips the closing class entirely). */
@media (prefers-reduced-motion: no-preference) {
  .deal-modal[open] { animation: deal-modal-in 0.5s cubic-bezier(0.32, 0.72, 0, 1) both; }
  .deal-modal[open]::backdrop { animation: deal-backdrop-in 0.5s ease both; }
  .deal-modal.is-closing { animation: deal-modal-out 0.24s cubic-bezier(0.4, 0, 0.9, 0.4) both; }
  .deal-modal.is-closing::backdrop { animation: deal-backdrop-out 0.24s ease both; }
  @keyframes deal-modal-in {
    from { opacity: 0; transform: translateY(16px) scale(0.97); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
  }
  @keyframes deal-modal-out {
    to { opacity: 0; transform: translateY(8px) scale(0.985); filter: blur(3px); }
  }
  @keyframes deal-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes deal-backdrop-out {
    to { opacity: 0; }
  }
}

/* ---- mobile: a bottom sheet, not a shrunken card ----
   Full width, anchored to the bottom edge (margin:auto resolves the top),
   top corners only — the native presentation vocabulary for a phone. */
@media (max-width: 640px) {
  .deal-modal {
    width: 100vw;
    max-width: none;
    margin: auto 0 0;
    border-radius: var(--r) var(--r) 0 0;
    max-height: calc(100dvh - 2.75rem);
  }
  .deal-modal__inner { max-height: calc(100dvh - 2.75rem); }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .deal-modal[open] { animation-name: deal-modal-in-sheet; animation-duration: 0.55s; }
  .deal-modal.is-closing { animation-name: deal-modal-out-sheet; }
  @keyframes deal-modal-in-sheet {
    from { opacity: 0; transform: translateY(56px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes deal-modal-out-sheet {
    to { opacity: 0; transform: translateY(36px); }
  }
}

/* lock background scroll while a dialog is open (JS adds the class) */
body.modal-open { overflow: hidden; }

/* switcher summary must match the nav links over the light hero (added 2026-07-07) */
.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); }

/* ============================================================
   DEAL PAGE — /transacoes/{vendedor}-{comprador}/
   One real, crawlable URL per transaction (client request
   2026-08-03: without its own "/barra" a deal can never be
   indexed or cited). The page deliberately REUSES the modal's
   element classes (.deal-modal__plate / __logo / __kicker /
   __origin / __flag / __section / __quote / __advisory /
   __news) so the two surfaces can never drift apart visually —
   only the frame around them is page-scoped (.dpg*). Setting
   --dm-pad: 0 neutralises the plate's full-bleed negative
   margins, which only make sense inside the dialog.
   ============================================================ */
.dpg {
  --dm-pad: 0;
  display: block;
  background: var(--paper);
  padding-top: calc(var(--header-h) + clamp(1.8rem, 3.4vw, 3rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* the trail — small, quiet, and a real crawlable path back up */
.dpg__crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: clamp(1.5rem, 2.8vw, 2.2rem);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}
.dpg__crumbs a { color: var(--ink-muted); text-decoration: none; transition: color var(--dur) var(--ease); }
.dpg__crumbs a:hover { color: var(--ink); }
.dpg__crumbs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* the tombstone plate, now framed as a page masthead instead of
   running full-bleed under a dialog's top corners */
.dpg-plate {
  border: 1px solid var(--line);
  border-radius: var(--r);
  border-bottom-color: var(--oat-deep);
  padding-block: clamp(2.4rem, 4.6vw, 3.2rem);
}

.dpg-title {
  margin: clamp(1.8rem, 3.2vw, 2.6rem) 0 0;
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.dpg-lede {
  margin: 1.15rem 0 0;
  max-width: 62ch;
  font-family: var(--sans);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-muted);
}

/* the facts, as a definition list: the machine-readable spine of
   the page (vendedor / comprador / setor / origem / mandato) */
.dpg-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  margin: clamp(2rem, 3.6vw, 2.8rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-ink);
}
.dpg-facts__row {
  padding: 1.05rem 1.15rem 1.05rem 0;
  border-bottom: 1px solid var(--line);
}
.dpg-facts dt {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
  color: var(--ink-faint);
}
.dpg-facts dd {
  margin: 0.3rem 0 0;
  font-family: var(--display);
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--ink);
}

/* the editorial body — same sections as the modal, one notch up in
   type size because here it is the page, not a panel */
.dpg-body { margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.dpg .deal-modal__section p {
  font-size: var(--fs-body);
  line-height: 1.72;
  max-width: 68ch;
}
.dpg .deal-modal__section h2 { font-size: var(--fs-h3); }
.dpg .deal-modal__quote { margin-top: 1.6rem; max-width: 62ch; }
.dpg-foot { margin-top: clamp(0.6rem, 1.4vw, 1rem); }

/* the close — paper, one terracotta CTA, one way back to the wall */
.dpg-close {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(3.4rem, 6.5vw, 5.5rem);
}
.dpg-close__inner { max-width: 54ch; }
.dpg-close__inner h2 { font-size: var(--fs-h2); line-height: 1.04; margin: 0; max-width: 18ch; }
.dpg-close__inner .lead { margin: 1.2rem 0 2rem; max-width: 52ch; }
.dpg-close__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

@media (max-width: 560px) {
  .dpg-facts { grid-template-columns: 1fr; }
}

/* the wall card is now a real <a href="transacoes/{slug}/"> instead of a
   <button>: crawlers follow it, users can open a deal in a new tab, and
   the modal stays for the homepage's #deal-x deep links. */
.deal-wall a.txr-card { text-decoration: none; }