/* ════════════════════════════════════════════════════════════════════════════
   r91 — DELEGATED SUPPORT. A SEGUNDA TESE MONUMENTAL DA HOME.

   Duas unidades num bloco so:
     1. a tese — cabeca de duas colunas + a divisa derivada, em sangria de 128;
     2. os tres beneficios, encostados nela, sob um fio, com peso claramente
        menor. Nao e uma quarta secao.

   ── O CONTRATO DE SANGRIA (SPEC §1.1) ──────────────────────────────────────
   O objeto e filho normal da `.container` (1296) e puxa -64 de cada lado, indo
   a 1424. O piso de um `bleed-128` e 1424 de largura util, e o colapso vai no
   PISO + 16 (a barra de rolagem): `max-width: 1439px`. Em innerWidth 1440 o
   clientWidth e 1424 e o objeto encosta exatamente; em 1439 ele ja voltou para
   a coluna, com a margem devolvida junto.

   ⚠️ O colapso devolve a MARGEM e a largura ao mesmo tempo, porque a largura
   aqui nunca e declarada: ela e a da coluna mais as duas margens negativas.
   Zerar a margem devolve as duas coisas de uma vez.
   ════════════════════════════════════════════════════════════════════════════ */

/* ══ UNIDADE 1 · A CABECA ════════════════════════════════════════════════ */

.delegated-section .dlg-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-10);
  margin-bottom: var(--space-8);
}

.delegated-section .dlg-eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
}

/* NAO usa `.section-title`: a classe global traz um max-width de 800 sem
   margem automatica e desloca o titulo do eixo da coluna. */
.delegated-section .dlg-title {
  margin: 0;
  max-width: none;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

.delegated-section .dlg-lede {
  margin: 0 0 var(--space-2);
  max-width: var(--measure-read);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ══ UNIDADE 1 · O OBJETO ════════════════════════════════════════════════ */

.delegated-section .dlg-obj {
  margin-inline: 0;   /* 1296 + 128 = 1424, a sangria cheia da casa */
}

.delegated-section .dlg-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* A DIVISA. Um unico contorno fechado, sem preenchimento, sem corte nenhum.
   O `vector-effect` mantem a espessura igual em qualquer escala. */
.delegated-section .dlg-parcel {
  fill: none;
  stroke: color-mix(in srgb, var(--accent-color) 88%, transparent);
  stroke-width: 2;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent-color) 38%, transparent));
}

.delegated-section .dlg-in {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  fill: var(--text-primary);
}

.delegated-section .dlg-out {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  fill: var(--text-secondary);
}

.delegated-section .dlg-fig {
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  fill: var(--accent-color);
}

.delegated-section .dlg-fig--out { fill: var(--text-primary); }

.delegated-section .dlg-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--text-muted);
}

/* O mesmo conteudo, dos mesmos arrays, para as larguras em que a divisa deixa
   de caber. Fora dessa faixa ele nao existe. */
.delegated-section .dlg-fallback { display: none; }

/* ══ UNIDADE 2 · OS TRES, ENCOSTADOS NA TESE ═════════════════════════════ */

.delegated-section .dlg-rail {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-light);
}

.delegated-section .dlg-rail-lab {
  display: block;
  margin-bottom: var(--space-5);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

/* Tres larguras DIFERENTES e nenhuma borda: o bloco e um rodape de rota, nunca
   uma grade de cartoes iguais (SPEC §4.6 — borda, alinhamento, peso igual). */
.delegated-section .dlg-rail-set {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.9fr) minmax(0, 1.04fr);
  gap: var(--space-10);
}

.delegated-section .dlg-ben {
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.delegated-section .dlg-ben:hover { opacity: 0.82; }

.delegated-section .dlg-ben-k {
  display: block;
  margin-bottom: var(--space-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.delegated-section .dlg-ben-n {
  margin: 0 0 var(--space-2);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.delegated-section .dlg-ben-d {
  margin: 0 0 var(--space-3);
  max-width: 42ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.delegated-section .dlg-ben-r { font-size: 0.875rem; }

/* ══ LARGURAS ════════════════════════════════════════════════════════════ */

/* O COLAPSO DA SANGRIA: piso 1424 + 16 da barra de rolagem. */
@media (max-width: 1439px) {
  .delegated-section .dlg-obj { margin-inline: 0; }
}

/* MEDIDO: abaixo de 1180 a escala uniforme do svg leva os nomes de 20px para
   menos de 16 e a mono para menos de 11 — o desenho continua correto e deixa
   de ser legivel. Entao ele SAI, e os mesmos dois conjuntos voltam como duas
   massas corridas, que e o que a divisa dizia: doze de um lado, sete do outro. */
@media (max-width: 1180px) {
  .delegated-section .dlg-svg { display: none; }
  .delegated-section .dlg-fallback { display: block; }

  .delegated-section .dlg-fb-block { padding-left: var(--space-5); }
  .delegated-section .dlg-fb-block--in {
    border-left: 2px solid color-mix(in srgb, var(--accent-color) 70%, transparent);
  }
  .delegated-section .dlg-fb-block--out {
    margin-top: var(--space-8);
    border-left: 2px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
  }
  .delegated-section .dlg-fb-lab {
    display: block;
    margin-bottom: var(--space-3);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
  }
  .delegated-section .dlg-fb-run {
    margin: 0;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-primary);
  }
  .delegated-section .dlg-fb-block--out .dlg-fb-run { color: var(--text-secondary); }
  .delegated-section .dlg-fb-sep { color: var(--text-muted); }
}

@media (max-width: 1100px) {
  .delegated-section .dlg-head {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
  }
  .delegated-section .dlg-title { font-size: 2.5rem; }
  .delegated-section .dlg-rail-set {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 720px) {
  .delegated-section .dlg-rail-set { grid-template-columns: 1fr; }
  .delegated-section .dlg-fb-run { font-size: 0.9375rem; }
}

@media (max-width: 620px) {
  .delegated-section .dlg-title { font-size: 2.125rem; }
}