/* ==========================================================================
   r54 — EnterpriseCX. DESENHO DE VERDADE (a copy nao mudou).

   A r53 cabia (733 / 734 contra o teto de 824), a copy estava intacta e o
   contraste resolvido — e nada disso pode regredir. O que falhou foi IMPACTO:
   as duas unidades desenhavam TUDO com retangulo, borda e rotulo mono. Um
   retangulo escuro com rotulo dentro nao e objeto visual, e uma grade deles e
   uma tabela sem dados. A 01 tirou razao 2,69x (piso 3x) com caixa de texto
   acima da referencia; a 02 repetia literalmente o dispositivo da 01 e suas
   faixas cinza liam como skeleton loader.

   OS DOIS ARQUETIPOS, agora com FORMA DESENHADA em SVG inline:

     01 CONTRASTE DE ESCALA — uma ELEVACAO de engenharia, chapada e
        monocromatica. A laje sangra pelas duas bordas e tem MATERIA: sob a
        pele rotulada, um corpo cuja face inferior CURVA desce ate o centro,
        com cinco estratos por dentro acompanhando a curva. No eixo, o apoio:
        10px de largura por 250px de altura, ACESO — sapata splayed (trapezio),
        bolsao de compressao no topo, bloom de tensao no pe e quatro trincas
        irradiando pelo chao, mais a cota que nomeia os 10px. O texto do ato
        mora no vao do balanco, pequeno e colado a esquerda; o terco direito
        fica em silencio.

     02 CAMADAS EM PROFUNDIDADE — linguagem OPOSTA a 01. Quatro planos a
        distancias diferentes, cada um com sua sombra: o CHAO EM PERSPECTIVA no
        fundo (23 radiais convergindo num ponto de fuga + 10 transversais de
        espacamento crescente, apagando no horizonte), os ESTRATOS que alargam
        e escurecem saindo por tras, o PAINEL ACESO contido e flutuante com
        sombra propria, e a FICHA da sua marca na frente com um fio ligando ela
        ao painel. Nenhuma banda full-bleed rotulada; nenhum tick etiquetado.

   Nenhuma das duas e centrada simetrica, nenhuma repete a outra, e nenhuma
   repete a vizinha (HumanNodeCapsule = split; ElasticCapacity = centrada
   simetrica, e fixa). Sequencia: A -> H -> F -> CENTRADO.

   A SANGRIA SEM OVERFLOW — `.ecx-bleed` (mecanica mantida, ela foi validada):
     `overflow-x: clip` + `overflow-clip-margin: var(--ecx-over)`. O objeto
     interno e mais largo que a calha por `--ecx-over` de cada lado; a margem
     de clip deixa ele PINTAR ate la, e um container de `clip` NAO tem overflow
     rolavel (ao contrario de `hidden`/`visible`), entao a pagina nao ganha um
     pixel de scroll horizontal. `overflow-y` fica `visible`, para o cartao da
     marca e os blooms nao serem cortados por cima. Em 1440 e 1280 a prancha e
     cortada pela borda da TELA antes do limite do clip — a sangria e de
     verdade. Em <=768 a calha zera: o objeto vai de borda a borda da tela.

   COR — ZERO cor nova. Toda tinta sai de token de base.css, e todo alfa e
   `color-mix(in srgb, var(--token) N%, transparent)`. Nao ha um unico rgb()
   cru nesta folha: nem branco, nem indigo, nem preto (a sombra e o proprio
   --bg-primary). Os `stop-color`/`stop-opacity` dos gradientes SVG sao
   declarados aqui, em classe, pelo mesmo criterio.

   CONTRASTE (fundo #05070C). Nenhum texto informativo usa --text-muted, que
   so tem 4,547 sobre o fundo PURO e reprova sobre qualquer elevacao:
     --text-primary (18,33) .ecx-title / .ecx-act-title / .ecx-statement /
       .ecx-lead strong / .ecx-cell--lit / .ecx-anno--you
     --text-secondary (7,86) .ecx-seam / .ecx-lead / .ecx-note / .ecx-adds /
       .ecx-cell / todas as .ecx-anno e .ecx-when
   O unico uso de branco a 10% e o numeral .ecx-num, que e decoracao pura e
   carrega aria-hidden. As duas figuras inteiras carregam aria-hidden e tem
   descricao textual propria em .sr-only-desc.

   MOVIMENTO: nenhum proprio. So o reveal ja existente, que o kill switch
   global de prefers-reduced-motion em animations.css cobre. Todo estado de
   repouso e o estado final — nada aqui e o quadro 0% de uma animacao.
   ========================================================================== */

/* ── ESQUELETO ────────────────────────────────────────────────────────────── */

.ecx-unit + .ecx-unit {
  margin-top: var(--stack-md);
}

/* ══ A CALHA DE SANGRIA ═══════════════════════════════════════════════════
   Ver o cabecalho. `--ecx-over` e o unico numero a mexer por largura. */
.ecx-bleed {
  --ecx-over: 260px;
  margin-inline: calc(-1 * var(--gutter));
  overflow-x: clip;
  overflow-clip-margin: var(--ecx-over);
}

.ecx-bleed > * {
  width: calc(100% + 2 * var(--ecx-over));
  margin-inline: calc(-1 * var(--ecx-over));
}

/* ── CABECALHO DA SECAO — ombro a ombro, nao centrado ─────────────────────── */

/* o titulo pertence a unidade 01: ele, a costura de entrada e a prancha tem de
   caber no mesmo print. A primeira linha do h2 ("Enterprise CX.") e curta e
   deixa um vao largo a direita: a costura mora NESSE vao, minuscula e encostada
   na borda direita, na altura da primeira linha. Custo de altura: zero — e o
   cabecalho deixa de ser um bloco centrado sem gastar um pixel.
   A caixa do titulo encolheu de 1000 para 900 e o corpo de 3,5 para 3,25rem:
   e a area de texto que a unidade 01 precisava devolver (a referencia medida
   nao aceita caixa de texto acima de ~190.000 px²). O titulo continua sendo o
   maior tipo da secao. */
.ecx-head {
  position: relative;
}

.ecx-title {
  max-width: 900px;
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

/* a costura de entrada: a primeira linha da tese herda a HumanNodeCapsule.
   Nao e subtitulo — e o fio que liga a operacao que o leitor acabou de ver a
   pergunta que a tese responde. Duas linhas no maximo, em qualquer largura. */
.ecx-seam {
  position: absolute;
  right: 0;
  top: 0.35em;
  max-width: 320px;
  margin: 0;
  text-align: right;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ── TIPOGRAFIA COMPARTILHADA ─────────────────────────────────────────────── */

.ecx-tag {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

/* o numeral: grande e apagado, o unico marcador de que sao dois movimentos e
   nao dois blocos soltos. Decoracao pura — aria-hidden no markup. */
.ecx-num {
  flex: none;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.ecx-act-title {
  margin: 0;
  font-size: clamp(1.375rem, 2vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-primary);
}

.ecx-lead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.ecx-lead strong {
  font-weight: 600;
  color: var(--text-primary);
}

.ecx-note {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.ecx-statement {
  margin: var(--space-5) 0 0;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

/* ── PRIMITIVAS DE DESENHO ────────────────────────────────────────────────── */

/* a anotacao. `inline-block`: ela e uma ETIQUETA de um objeto, nao um bloco de
   texto — nao deve ocupar a linha inteira nem ser lida como paragrafo. */
.ecx-anno {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--text-secondary);
}

.ecx-floor {
  display: block;
  height: 1px;
  background: var(--border-strong);
}

/* a celula: uma funcao da organizacao de suporte. Apagada = da gigante;
   acesa = nossa. Mesmo tipo, mesma medida — so a luz e o dono mudam. */
.ecx-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: var(--space-2) var(--space-3);
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  line-height: 1.25;
  color: var(--text-secondary);
}

.ecx-cell--lit {
  color: var(--text-primary);
}

/* ══ UNIDADE 01 — CONTRASTE DE ESCALA ═════════════════════════════════════
   A laje nao cabe na moldura e o apoio tem 10px. Nenhuma tinta acesa na massa:
   a regra da tinta — a alternativa nunca pesa mais que nos. A UNICA luz da
   unidade e o pilao, porque e ele o argumento. */

.ecx-law-stage {
  position: relative;
  margin-top: var(--stack-sm);
}

/* a etiqueta de 11px que nomeia um objeto de 1800px. O contraste de escala
   comeca aqui, antes da figura. */
.ecx-anno--mass {
  margin-bottom: var(--space-3);
}

/* ── a laje: pele rotulada + corpo desenhado ──────────────────────────────── */

/* a pele: UMA fileira de dez rotulos atravessando o quadro inteiro e saindo
   pelos dois lados. Sem borda por celula e sem fundo por celula — e UM material
   continuo, separado por fios de 1px, nao dez caixas. */
.ecx-beam {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: 1px;
  border-top: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.ecx-beam .ecx-cell {
  min-height: 112px;
  align-items: flex-start;
  padding-top: var(--space-5);
  /* material: a peca escurece para baixo, como algo que tem espessura */
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text-primary) 3.5%, transparent),
    transparent 70%
  );
}

/* o corpo: a face inferior CURVA desce ate o eixo — a massa inteira
   convergindo para o ponto onde o apoio esta. Cinco estratos por dentro
   acompanham a curva: a peca tem espessura, nao e uma barra. */
.ecx-slabwrap {
  filter: drop-shadow(0 26px 34px color-mix(in srgb, var(--bg-primary) 82%, transparent));
}

.ecx-mass {
  display: block;
  width: 100%;
  height: 140px;
  overflow: hidden;
}

.ecx-s-mass-top {
  stop-color: var(--text-primary);
  stop-opacity: 0.055;
}

.ecx-s-mass-bot {
  stop-color: var(--text-primary);
  stop-opacity: 0.012;
}

.ecx-mass-strata path {
  fill: none;
  stroke: color-mix(in srgb, var(--text-primary) 9%, transparent);
  stroke-width: 1;
}

.ecx-mass-edge {
  fill: none;
  stroke: color-mix(in srgb, var(--text-primary) 22%, transparent);
  stroke-width: 1.25;
}

/* ── o vao sob o balanco: no eixo, o apoio ────────────────────────────────── */

.ecx-under {
  position: relative;
  height: 262px;
}

.ecx-prop {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 400px;
  height: 262px;
}

.ecx-prop-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* o apoio, aceso. 10px de largura sob 1800px de carga — e ele que tem de ser
   VISTO, entao ele e a unica coisa com luz na unidade inteira. */
.ecx-s-pil-top {
  stop-color: var(--accent-color);
  stop-opacity: 0.95;
}

.ecx-s-pil-bot {
  stop-color: var(--accent-color);
  stop-opacity: 0.42;
}

.ecx-pillar {
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-color) 55%, transparent));
}

.ecx-footing {
  fill: color-mix(in srgb, var(--accent-color) 62%, transparent);
}

/* o bolsao de compressao no topo e o bloom de tensao no pe: a carga chegando
   e a carga saindo. Mesmo gradiente, duas pontas do mesmo pilar. */
.ecx-s-bloom-in {
  stop-color: var(--accent-color);
  stop-opacity: 0.30;
}

.ecx-s-bloom-out {
  stop-color: var(--accent-color);
  stop-opacity: 0;
}

/* as trincas: o chao cedendo a partir do ponto de contato. Sao linhas
   quebradas — nenhuma delas e um retangulo. */
.ecx-cracks path {
  fill: none;
  stroke: color-mix(in srgb, var(--text-primary) 26%, transparent);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* a cota: dois ticks, a linha entre eles e a chamada. E ela que transforma "um
   risco fino" em "dez pixels de apoio". */
.ecx-dim path {
  fill: none;
  stroke: color-mix(in srgb, var(--text-primary) 34%, transparent);
  stroke-width: 1;
}

/* a chamada da cota. Ancorada em % do quadro do apoio, entao ela acompanha
   quando o apoio encolhe por largura. */
.ecx-anno--prop {
  position: absolute;
  left: 73.5%;
  top: calc(71.8% - 9px);
  white-space: nowrap;
}

/* o vao do balanco. O texto e pequeno e mora aqui, a esquerda, dentro do ar
   que a laje abriu; a direita fica vazia de proposito — massa de um lado,
   silencio do outro. Custo de altura: zero. */
.ecx-void {
  position: absolute;
  left: 0;
  bottom: 16px;
  width: 340px;
}

.ecx-void .ecx-lead {
  margin-top: var(--space-4);
}

/* ══ UNIDADE 02 — CAMADAS EM PROFUNDIDADE ═════════════════════════════════
   Nada de elevacao chapada aqui. Quatro planos a distancias diferentes, cada
   um com sua sombra. "Ela esta viva" nao e um segundo desenho: e a distancia
   entre os planos. */

/* o ombro: a tag a esquerda, e o que a laje ganhou desde entao anotado na
   ponta direita da mesma linha. Duas pontas, nada no meio. */
.ecx-crown {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-10);
  align-items: baseline;
}

.ecx-crown .ecx-tag {
  max-width: 620px;
}

.ecx-adds {
  margin: 0;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--text-secondary);
}

.ecx-fig--ground {
  margin-top: var(--space-8);
}

.ecx-ground {
  position: relative;
}

/* O PALCO. Uma so celula de grade: todos os planos ocupam a MESMA celula e se
   sobrepoem por z-index. E assim que a profundidade custa zero de altura — o
   painel e a ficha nao empilham abaixo do chao, eles ficam NA FRENTE dele. */
.ecx-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 380px;
  margin-top: var(--space-2);
}

.ecx-stage > * {
  grid-area: 1 / 1;
}

/* ── PLANO 0: o chao em perspectiva, o mais longe e o maior ───────────────── */

.ecx-bleed--ground {
  align-self: stretch;
  z-index: 1;
}

/* o chao ocupa o palco inteiro: se a coluna da frente crescer numa largura
   qualquer, o chao cresce com ela — nao ha altura fixa para desencontrar. */
.ecx-deck {
  display: block;
  /* a LARGURA vem da calha (`.ecx-bleed > *`), nao daqui: declarar 100% aqui
     ganharia da calha por ordem de cascata e matava a sangria do chao. */
  height: 100%;
}

/* as linhas apagam no horizonte: a mascara e o proprio ar entre a camera e o
   ponto de fuga. */
.ecx-s-deck-far { stop-color: var(--bg-primary); }
.ecx-s-deck-mid { stop-color: color-mix(in srgb, var(--text-primary) 34%, var(--bg-primary)); }
.ecx-s-deck-near { stop-color: var(--text-primary); }

.ecx-deck-lines path {
  fill: none;
  stroke: color-mix(in srgb, var(--text-primary) 15%, transparent);
  stroke-width: 1;
}

.ecx-s-hz-in {
  stop-color: var(--accent-color);
  stop-opacity: 0.13;
}

.ecx-s-hz-out {
  stop-color: var(--accent-color);
  stop-opacity: 0;
}

/* ── PLANOS 1 a 3: os estratos, o painel e a ficha ────────────────────────── */

/* a coluna dos tres planos da frente: contida (NAO sangra — e essa a diferenca
   de linguagem para a unidade 01) e deslocada do centro. */
.ecx-panelwrap {
  /* --pg = quanto cada laje alarga POR LADO a mais que a de cima. A laje mais
     baixa (a quinta) alarga 4x isso de cada lado, entao a coluna reserva
     exatamente essa folga dos dois lados: as lajes nunca passam do container,
     em largura nenhuma. UM numero governa geometria e limite. */
  --pg: 12px;
  --pgap: calc(4 * var(--pg));
  position: relative;
  align-self: start;
  justify-self: start;
  z-index: 2;
  width: min(940px, calc(100% - 2 * var(--pgap)));
  margin: 112px 0 0 var(--pgap);
}

/* PLANO 2 — o painel aceso: as oito funcoes, agora nossas. Ele FLUTUA: borda
   propria, corpo proprio e uma sombra longa caindo no chao la atras. */
.ecx-panel {
  position: relative;
  z-index: 3;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--accent-color) 34%, transparent);
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--accent-color) 11%, var(--bg-primary));
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text-primary) 5%, transparent),
    transparent 62%
  );
  box-shadow:
    0 44px 72px -26px color-mix(in srgb, var(--bg-primary) 94%, transparent),
    0 0 44px -12px color-mix(in srgb, var(--accent-color) 34%, transparent);
}

.ecx-live {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: color-mix(in srgb, var(--accent-color) 20%, transparent);
  border-radius: 4px;
  overflow: hidden;
}

.ecx-live .ecx-cell {
  min-height: 62px;
  background-color: color-mix(in srgb, var(--accent-color) 13%, var(--bg-primary));
}

/* PLANO 3 — a fila de tomadas encaixada na borda de cima do painel: tracos
   uniformes e anonimos, SLOTS de arquitetura, nao um censo. */
.ecx-taps {
  position: absolute;
  z-index: 4;
  top: -13px;
  left: 30px;
  right: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 26px;
}

.ecx-tap {
  display: block;
  width: 4px;
  height: 26px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text-primary) 20%, transparent);
}

/* O UNICO ACENTO DA UNIDADE: a sua tomada, adiantada em relacao as outras. */
.ecx-tap--you {
  width: 10px;
  height: 44px;
  border-radius: 3px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-color) 55%, var(--text-primary)),
    color-mix(in srgb, var(--accent-color) 55%, transparent)
  );
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent-color) 45%, transparent);
}

/* PLANO 3, mais perto ainda: a ficha da sua marca, com sombra propria e um fio
   descendo ate a tomada. E o objeto mais proximo da camera na secao inteira. */
.ecx-brand {
  position: absolute;
  z-index: 5;
  top: -78px;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--accent-color) 46%, transparent);
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--accent-color) 16%, var(--bg-primary));
  box-shadow:
    0 18px 30px -12px color-mix(in srgb, var(--bg-primary) 94%, transparent),
    0 0 26px -6px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.ecx-brand::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 17px;
  background: color-mix(in srgb, var(--accent-color) 55%, transparent);
}

.ecx-anno--you {
  color: var(--text-primary);
  white-space: nowrap;
}

/* PLANO 1 — os estratos: cinco lajes saindo por TRAS do painel, cada uma mais
   LARGA, mais GROSSA e mais ESCURA que a de cima. Sem eixo, sem escala, sem
   numero — a leitura e "isso vai acumulando", nunca "isso mede X". E porque
   cada uma tem largura propria, elas lem como pilha vista de cima, nao como
   faixas listadas. */
.ecx-strata {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 14px 18px color-mix(in srgb, var(--bg-primary) 88%, transparent));
  margin-top: -10px;   /* a primeira laje nasce POR TRAS da borda do painel */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ecx-plate {
  display: block;
  border-radius: 0 0 12px 12px;
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
}

.ecx-plate--1 { width: 100%;                        height: 13px; background: color-mix(in srgb, var(--text-primary) 12%, transparent); }
.ecx-plate--2 { width: calc(100% + 2 * var(--pg));  height: 15px; background: color-mix(in srgb, var(--text-primary) 9.4%, transparent); }
.ecx-plate--3 { width: calc(100% + 4 * var(--pg));  height: 17px; background: color-mix(in srgb, var(--text-primary) 7%, transparent); }
.ecx-plate--4 { width: calc(100% + 6 * var(--pg));  height: 19px; background: color-mix(in srgb, var(--text-primary) 5%, transparent); }
.ecx-plate--5 { width: calc(100% + 8 * var(--pg));  height: 21px; background: color-mix(in srgb, var(--text-primary) 3.4%, transparent); }

/* as duas marcas de tempo, rentes a borda esquerda da coluna: "Today" acima da
   prancha, "the day you plugged in" abaixo dela — a ordem do DOM ja e a ordem
   cronologica em qualquer largura. */
.ecx-when {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* a legenda da prancha: uma linha so, as duas pontas do quadro */
.ecx-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-3);
}

.ecx-anno--base {
  text-align: right;
}

/* o fecho: duas colunas desiguais. O paragrafo longo a esquerda, a declaracao
   ancorada na ponta direita — o ultimo peso da secao nao esta no centro. */
.ecx-close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  column-gap: var(--space-10);
  align-items: start;
  margin-top: var(--stack-sm);
}

.ecx-close .ecx-lead {
  max-width: 620px;
}

.ecx-close-end {
  text-align: right;
}

/* ── LARGURAS ─────────────────────────────────────────────────────────────── */

/* 1320 e abaixo: a moldura encolhe, a sangria encolhe com ela — mas continua
   maior que a tela (1024 de calha + 360 de sangria da 1384 numa tela de 1024),
   entao as duas pranchas seguem sendo cortadas pelas duas bordas. */
@media (max-width: 1320px) {
  .ecx-bleed { --ecx-over: 180px; }
}

/* 1180 e abaixo: a pele da laje vai a duas fileiras de cinco e o painel aceso a
   duas de quatro. A peca fica mais fina e o apoio encolhe junto, para as duas
   unidades continuarem dentro do print. */
@media (max-width: 1180px) {
  .ecx-beam { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 1px; }
  .ecx-beam .ecx-cell { min-height: 84px; padding-top: var(--space-4); }
  .ecx-mass { height: 96px; }

  .ecx-under { height: 206px; }
  .ecx-prop { width: 314px; height: 206px; }

  /* 276 e o que sobra a esquerda do apoio na pior largura desta faixa (1025):
     o texto encosta no vao, nunca no pilar. */
  .ecx-void { width: 276px; }

  .ecx-stage { min-height: 340px; }
  .ecx-panelwrap { margin-top: 96px; }
  .ecx-crown .ecx-tag { max-width: 520px; }
}

/* 1024 e abaixo: nao ha mais vao lateral para o texto morar dentro da figura,
   nem duas pontas para a linha do ombro e a do fecho. Tudo empilha, ancorado a
   esquerda — mas a figura continua sangrando. */
@media (max-width: 1024px) {
  /* o vao a direita da primeira linha do h2 fica curto demais: a costura desce
     para o fluxo, mas encostada a DIREITA — o cabecalho continua desequilibrado */
  .ecx-seam {
    position: static;
    max-width: var(--measure-read);
    margin: var(--space-5) 0 0 auto;
  }

  .ecx-void {
    position: static;
    width: auto;
    max-width: var(--measure-read);
    margin-top: var(--space-6);
  }

  /* sem vao lateral para gastar: as lajes alargam menos, e a folga que a coluna
     reserva encolhe junto (ela e derivada de --pg). */
  .ecx-panelwrap { --pg: 7px; }

  .ecx-crown {
    display: block;
  }

  .ecx-adds {
    margin-top: var(--space-4);
    text-align: left;
  }

  .ecx-close {
    display: block;
  }

  .ecx-close-end {
    margin-top: var(--space-5);
    text-align: left;
  }

  .ecx-close .ecx-lead,
  .ecx-close-end { max-width: var(--measure-read); }
}

/* 900 e abaixo: a sangria vira quase nada — as pranchas ja ocupam a largura
   toda da tela e nao ha o que transbordar. */
@media (max-width: 900px) {
  .ecx-bleed { --ecx-over: 24px; }

  .ecx-stage { min-height: 320px; }
  .ecx-panelwrap { margin-top: 88px; }
  .ecx-taps { left: 20px; right: 20px; }
}

/* 768 e abaixo: A SANGRIA ZERA. O objeto vai de borda a borda da tela e para
   ali — nada pinta fora, nada e cortado, e nao ha um pixel de overflow. */
@media (max-width: 768px) {
  .ecx-bleed {
    --ecx-over: 0px;
    overflow-clip-margin: 0;
  }

  .ecx-seam {
    margin-left: 0;
    text-align: left;
  }

  .ecx-under { height: 178px; }
  .ecx-prop { width: 272px; height: 178px; }

  .ecx-caption {
    display: block;
  }
  .ecx-anno--base {
    margin-top: var(--space-2);
    text-align: left;
  }
}

/* 560 e abaixo: no telefone a fila de quinze tracos viraria uma tarja. Ficam
   nove, com a sua no meio; o painel aceso vai a duas colunas e a pele da laje
   tambem (10 = 5 fileiras, 8 = 4 fileiras). Os estratos encolhem junto: a
   pilha continua com as cinco lajes, so que mais rasa. */
@media (max-width: 560px) {
  .ecx-beam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecx-live { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ecx-tap:nth-child(2),
  .ecx-tap:nth-child(4),
  .ecx-tap:nth-child(12),
  .ecx-tap:nth-child(14) { display: none; }

  .ecx-cell { font-size: 0.625rem; }
  .ecx-adds { font-size: 0.625rem; }

  .ecx-beam .ecx-cell {
    min-height: 58px;
    align-items: center;
    padding-top: var(--space-2);
  }
  .ecx-mass { height: 72px; }
  .ecx-under { height: 150px; }
  .ecx-prop { width: 229px; height: 150px; }

  .ecx-live .ecx-cell { min-height: 48px; }

  .ecx-stage { min-height: 300px; }
  .ecx-panelwrap { --pg: 4px; margin-top: 78px; }
}