/* ==========================================================================
   NEXUS theme-final / sections/capacidades.css
   Territorio exclusivo da secao #capacidades. So consome tokens de
   01-tokens.css e primitivos de 03-ui.css / 04-sections.css (.btn, .card,
   .badge, .cluster, .eyebrow, .lead, .section, .section__head, .media-frame).
   Nenhum hex, nenhum px de raio, nenhuma familia de fonte literal.
   Motion: so transform e opacity animam; toda duracao usa
   calc(var(--dur-*) * var(--motion)) para o interruptor do estudio.

   Indice:
   1. Layout de duas colunas (lista + painel de video)
   2. Linha do accordion e cabecalho clicavel
   3. Icone, indice numerico e pulso indicador
   4. Painel expansivel (texto + marcadores)
   5. Painel de apoio (video)
   6. Alturas curtas e telas muito estreitas

   PALCO EM VIDEO (rodada de teste, agosto de 2026): .capacidades__media
   passou a hospedar <video> em vez de <img>. .media-frame ja posiciona
   video exatamente como posiciona img (04-sections.css), e play/pause por
   IntersectionObserver e reduced motion vivem em partials/capacidades.js,
   no mesmo padrao de hero.js — nada disso muda aqui.

   O arquivo escolhido foi nexus-x-retrato (720x1280, retrato profundo,
   proporcao 9/16). A borda de .media-frame sai (§5): sobre um video de
   marca em tela cheia ela lia como moldura de foto de catalogo, nao como
   uma tela ligada.

   ALTURA DA MOLDURA, corrigida na rodada do "espaço em branco" (dono, com
   captura): a moldura NAO trava mais a propria proporcao (--media-ratio:
   auto, §5) e passa a ESTICAR ate a altura da lista ao lado
   (align-items: stretch, §1), aberta ou fechada — object-fit: cover corta o
   video para caber, em vez de a lista ficar devendo altura ao video. */

/* --------------------------------------------------------------------------
   0. Cabeçalho em coluna única (agosto/2026, pedido do dono: "lead abaixo
   do título, em todos")

   O default do site já é coluna única (.section__head de 02-base.css:
   display:grid, uma faixa só). A pele surface é quem reabre em duas faixas
   — título numa coluna, lead na outra a partir de 900px — para as doze
   seções que usam .section__head "sem que nenhum partial saiba"
   (08-skin-surface.css §4.3). Tese, método, contato, govtech e cases já
   tinham saído dessa lista; #capacidades ainda não. Escopo por ID porque
   a folha da pele não é território deste agente: mesma técnica que
   #cases já usa lá (grid-template-columns: minmax(0, 1fr) vence a grade
   de duas colunas por especificidade, sem tocar em 08-skin-surface.css). */
#capacidades > .container > .section__head {
  grid-template-columns: minmax(0, 1fr);
}

#capacidades > .container > .section__head > .lead {
  grid-column: 1;
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   1. Layout de duas colunas
   Lista a esquerda, painel de video a direita. Empilha abaixo de 880px.
   Nunca contagem fixa de colunas: acima do ponto de quebra e uma proporcao
   fixa entre coluna fluida e coluna de apoio, nunca um grid rigido.
   -------------------------------------------------------------------------- */

.capacidades__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  /* stretch, nao start: e o que faz a midia acompanhar a altura da lista
     (§5), em vez de sobrar vazio abaixo do palco quando a lista e mais alta
     que a proporcao do video. Sem efeito visivel abaixo de 1080px, onde a
     segunda coluna nao existe ou nao tem media dentro. */
  align-items: stretch;
}

/* Coluna de apoio mais estreita que a da foto antiga (320-400px): a 9/16 do
   retrato, 400px de largura já dariam 711px de altura, bem além da lista de
   seis linhas ao lado. 240-300px mantém a coluna com presença sem esticar o
   palco muito além da lista — ajuste pedido pelo dono na correção desta
   rodada ("pode reduzir a largura da moldura para o encaixe ficar
   natural").

   MÍDIA À ESQUERDA (31/08/2026, pedido do dono: "aqui inverte, passa o
   vídeo pra esquerda"). Só a ORDEM VISUAL troca: a coluna estreita passa a
   ser a primeira faixa física, e .capacidades__stage recebe `order: -1`
   (mesma técnica que html[data-nx-lay~="capacidades:palcoprimeiro"] já usa
   em 12-secoes.css) para ocupar essa faixa sem sair do lugar no DOM — o
   HTML continua lista-depois-palco, então leitor de tela e Tab seguem
   lendo o conteúdo antes da mídia. Escopado dentro do mesmo breakpoint da
   troca de colunas: abaixo de 880px o palco nem existe no DOM (JS só o
   monta a partir de 1080px), então a ordem de empilhamento do celular não
   muda. */
@media (min-width: 880px) {
  .capacidades__body {
    grid-template-columns: minmax(min(100%, 240px), 300px) minmax(0, 1fr);
  }

  .capacidades__stage {
    order: -1;
  }
}

.capacidades__list {
  display: grid;
  gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   2. Linha do accordion e cabecalho clicavel
   -------------------------------------------------------------------------- */

.capacidades__item {
  border: var(--hairline) solid hsl(var(--border));
  border-radius: var(--radius-lg);
  background-color: hsl(var(--card));
  overflow: hidden;
  transition: border-color calc(var(--dur-fast) * var(--motion)) var(--ease-out);
}

.capacidades__item:has(.capacidades__trigger[aria-expanded="true"]) {
  border-color: hsl(var(--primary) / 0.45);
}

.capacidades__item-heading {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

.capacidades__trigger {
  display: flex;
  align-items: center;
  inline-size: 100%;
  min-block-size: var(--tap-min);
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5);
  background-color: transparent;
  border: 0;
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  text-align: start;
  cursor: pointer;
  transition: background-color calc(var(--dur-fast) * var(--motion)) var(--ease-out);
}

.capacidades__trigger:hover {
  background-color: hsl(var(--accent) / 0.5);
}

.capacidades__trigger:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   3. Icone, indice numerico e pulso indicador
   -------------------------------------------------------------------------- */

/* Tinta: --faint-foreground, nunca hsl(var(--muted-foreground) / alfa).
   O alfa 0.6 que morava aqui media 2,43:1 no claro e 3,36:1 no escuro na pele
   padrão, e 2,98:1 / 3,63:1 na pele de vidro, contra os 4,5:1 do §8. "01" a
   "06" é numeração de conteúdo, é ela que amarra a linha aberta ao índice da
   capacidade, então o piso é o de texto de corpo, não o de texto grande.
   O gatilho pousa em superfície elevada (--card em repouso, --accent e
   --surface-2 em hover e dentro das peles), que é justamente o pior caso
   contra o qual --faint-foreground foi calibrado.
   Ver o bloco --faint em 01-tokens.css. */
.capacidades__index {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  color: hsl(var(--faint-foreground));
}

.capacidades__trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: var(--space-10);
  block-size: var(--space-10);
  border-radius: var(--radius-md);
  background-color: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  transition:
    background-color calc(var(--dur-fast) * var(--motion)) var(--ease-out),
    color calc(var(--dur-fast) * var(--motion)) var(--ease-out);
}

.capacidades__trigger-icon .nx-icon {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.capacidades__trigger[aria-expanded="true"] .capacidades__trigger-icon {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.capacidades__trigger-title {
  flex: 1;
  min-inline-size: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: hsl(var(--foreground));
}

/* pulso: unico elemento animado da linha, so transform e opacity, e so
   quando a linha esta ativa. Duracao multiplicada por --motion: zera com o
   interruptor do estudio e com prefers-reduced-motion (regra global de
   02-base.css ja sobrescreve toda duracao para 0.01ms em reduce). */
.capacidades__pulse {
  position: relative;
  flex: none;
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: var(--radius-full);
  background-color: hsl(var(--primary) / 0.35);
}

.capacidades__trigger[aria-expanded="true"] .capacidades__pulse {
  background-color: hsl(var(--primary));
  animation: nx-cap-pulse calc(var(--dur-slow) * 2 * var(--motion)) var(--ease-io) infinite;
}

@keyframes nx-cap-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.9);
    opacity: 0.3;
  }
}

.capacidades__chevron {
  display: inline-flex;
  flex: none;
  color: hsl(var(--muted-foreground));
  transition: transform calc(var(--dur-fast) * var(--motion)) var(--ease-out);
}

.capacidades__trigger[aria-expanded="true"] .capacidades__chevron {
  transform: rotate(180deg);
  color: hsl(var(--primary));
}

/* --------------------------------------------------------------------------
   4. Painel expansivel
   O atributo [hidden] recolhe sem altura animada (proibida pelo contrato).
   [data-animate-in] e escrito e removido por partials/capacidades.js em dois
   quadros: so opacity e transform entram em transicao.
   -------------------------------------------------------------------------- */

.capacidades__panel[hidden] {
  display: none;
}

.capacidades__panel-inner {
  padding: 0 var(--space-5) var(--space-5);
  display: grid;
  gap: var(--space-4);
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity calc(var(--dur-base) * var(--motion)) var(--ease-out),
    transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}

.capacidades__panel[data-animate-in] .capacidades__panel-inner {
  transition: none;
  opacity: 0;
  transform: translate3d(0, -0.5rem, 0);
}

.capacidades__text {
  max-width: var(--measure);
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.capacidades__markers {
  gap: var(--space-2);
}

/* Resultado esperado (06/08/2026, reforma editorial, item G da spec do dono).
   Fecha o painel de cada capacidade, depois dos quatro entregáveis. Peso e
   tinta um degrau acima da descrição, porque é a linha que resume o efeito.
   Todos os valores saem de token, nada de hex.

   SEM FILETE (06/08/2026, correção do dono depois da primeira prova: "preciso
   tirar o border inline start, não faz sentido, cara de IA isso, pode remover
   de todos ali"). A barra vertical que separava o resultado do texto acima
   saiu; o filete NÃO era o único separador — .capacidades__panel-inner já
   aplica `gap: var(--space-4)` uniforme entre texto, marcadores e
   resultado, então o respiro entre o resultado e o que vem antes já existe
   sem ele. O que resta é peso tipográfico (font-weight 600, mais escuro que
   .capacidades__text): suficiente para o resultado continuar lendo como
   fechamento, sem precisar de nenhuma linha decorativa nova no lugar do
   filete. */
.capacidades__resultado {
  max-width: var(--measure);
  margin: 0;
  color: hsl(var(--foreground));
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   5. Painel de apoio: imagem + selo da capacidade ativa
   -------------------------------------------------------------------------- */

.capacidades__stage {
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
  display: grid;
  gap: var(--space-4);
}

/* ALTURA SEGUE A LISTA, NÃO O VÍDEO (correção do dono, rodada do "espaço em
   branco": "no final está feio com um espaço em branco.. daria pra tirar?
   nem que seja cortar uma parte do vídeo em cima/embaixo"). A receita
   anterior travava --media-ratio em 9/16 (proporção nativa de
   nexus-x-retrato) e deixava a ALTURA depender só da LARGURA da coluna — com
   o acordeão fechado a lista de seis linhas ficava mais baixa que o vídeo, e
   sobrava vazio no rodapé do bloco (a lista terminava antes, o video depois).

   --media-ratio: auto desliga o aspect-ratio de .media-frame
   (04-sections.css): a moldura deixa de impor a própria altura e passa a
   ESTICAR (align-items: stretch em .capacidades__body, §1) até a altura da
   lista ao lado, aberta ou fechada. O corte fica por conta de object-fit:
   cover, já herdado de .media-frame video (04-sections.css) — exatamente o
   "cortar em cima/embaixo" que o dono aceitou. Mesma receita de
   .portfolio__card--resumo-largo em sections/portfolio.css (--media-ratio:
   auto + block-size: 100%), aqui adaptada a duas colunas de grid em vez de
   uma faixa.

   SEM BORDA. .media-frame desenha border + border-color: hsl(var(--border))
   para toda moldura de foto do site — good default para uma imagem de
   catálogo, mas sobre um vídeo de marca em tela cheia a linha lia como aro
   de retrato em vez de uma tela ligada. `border: 0` aqui é a única forma de
   tirá-la sem mexer no primitivo compartilhado por outras oito seções. */
.capacidades__media {
  --media-ratio: auto;
  border: 0;
  inline-size: 100%;
  block-size: 100%;
}

/* NO CELULAR O PALCO NÃO ENTRA (06/08/2026, decisão do dono: nenhum vídeo
   de marca no mobile). O retrato 9/16 empilhado ocupa quase uma tela
   inteira entre a lista de capacidades e a seção seguinte, e não acrescenta
   informação a quem já está lendo a lista.

   Mesma regra e MESMO LIMIAR do filme do hero (sections/hero.css): abaixo
   de 1080px o layout empilha e é onde o quadro atrapalha. O elemento também
   sai do DOM em partials/capacidades.js, porque `display: none` esconde mas
   NÃO impede o download (medido: `preload` dispara para nó não renderizado)
   e a economia de dados é justamente no celular. */
@media (max-width: 1079.98px) {
  .capacidades__media {
    display: none;
  }
}

/* Telas grandes: a coluna de apoio ganha um pouco mais de largura a partir
   do mesmo degrau em que o container cresce (§7.3), sem trocar a
   proporção — ela já é a do arquivo em qualquer largura. Coluna estreita
   continua primeiro na grade (§1): só o tamanho muda aqui. */
@media (min-width: 1560px) {
  .capacidades__body {
    grid-template-columns: minmax(min(100%, 260px), 320px) minmax(0, 1fr);
  }
}

/* Selo da capacidade ativa (.capacidades__stage-badge/-icon/-label), REMOVIDO
   (06/08/2026, pedido do dono: "pode tirar esse negocio abaixo desse
   video"). Era um figcaption sob o palco de vídeo, sem media query nenhuma
   escondendo-o em nenhuma largura — saiu do HTML em partials/capacidades.js
   (imagemBloco), então sai daqui também. Nada ocupa o lugar dele. */

/* Abaixo do ponto de quebra o painel deixa de ser sticky: em telas curtas
   (mobile, tablet retrato) o sticky empurraria a imagem para fora da vista
   util sem ganho nenhum, e o contrato proibe qualquer travamento agressivo
   de altura fora do hero. */
@media (max-width: 879px) {
  .capacidades__stage {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   6. Alturas curtas e telas muito estreitas
   Paisagem baixa (notebook deitado, tablet paisagem com pouca altura): o
   respiro interno da linha encolhe para caber mais accordion na dobra sem
   depender de altura fixa em nenhum elemento.
   -------------------------------------------------------------------------- */

@media (max-height: 700px) and (orientation: landscape) {
  .capacidades__trigger {
    padding-block: var(--space-3);
  }

  .capacidades__panel-inner {
    padding-block-end: var(--space-4);
  }
}

@media (max-width: 420px) {
  .capacidades__index {
    display: none;
  }

  .capacidades__trigger-title {
    font-size: var(--fs-lead);
  }
}

/* --------------------------------------------------------------------------
   MURAL EM MOVIMENTO (31/08/2026)

   Texto de um lado, duas colunas de imagem passando do outro — o "features-3"
   do React Bits, reescrito em CSS puro. Cada trilha repete a lista duas vezes
   (partials/tese.js) e desliza 50% da própria altura: no fim do ciclo o
   conteúdo está exatamente onde começou, então o laço não tem salto.

   As imagens são os mockups reais do portfólio, não arte gerada — é o mesmo
   trabalho que o texto ao lado está afirmando.
   -------------------------------------------------------------------------- */

/* O MURAL COMEÇA NA ALTURA DA CAIXA (31/08/2026, dono: "tem que ser as coisas
   lá rolando mais pra baixo, pra ficar alinhado com a caixa lateral"). Antes o
   layout tinha duas colunas e o mural subia até o topo da seção, ao lado do
   título. Agora são duas LINHAS: o cabeçalho ocupa a largura toda em cima, e
   a matriz de compromissos e o mural dividem a linha de baixo — as duas caixas
   começam no mesmo pixel. */
@media (min-width: 1024px) {
  .tese__layout--mural {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    column-gap: var(--space-8);
  }

  /* A margem entre o cabeçalho e a matriz mora AQUI: a pele zera a margem do
     .section__head quando ele vive dentro de .tese__intro (08-skin-surface.css),
     então aumentar o token global não chegava nesta seção — foi o que o dono
     viu ("dá um espaço maior desse texto pra parte de baixo"). */
  .hero__grid > .tese__intro {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-block-end: var(--space-10);
  }

  /* `align-self: start` é o que impede a matriz de esticar até a altura do
     mural (30 a 44rem): esticada, as duas fileiras de células ficavam altas e
     o texto boiava no topo de cada uma, com vão embaixo — a "simetria" que o
     dono cobrou. Agora cada fileira tem a altura do próprio conteúdo. */
  .hero__grid > .tese__list {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }


}

/* NO CELULAR O MURAL VIRA FAIXA (31/08/2026, dono: "isso porque não aparece
   no mobile, dá um jeito aí, nem que seja lateral"). Ele sumia porque duas
   colunas verticais não cabem numa tela estreita — mas a lista de quem
   contratou é argumento, não enfeite. Vira uma faixa horizontal: a primeira
   coluna deitada, correndo de lado. */
.mural {
  display: block;
  margin-block-start: var(--space-8);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.mural__col[data-sentido="desce"] {
  display: none;
}

.mural__trilha {
  display: flex;
  gap: var(--space-3);
  inline-size: max-content;
  animation-name: nx-mural-lado;
  animation-duration: calc(var(--motion) * 26s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.mural__item {
  display: grid;
  place-items: center;
  inline-size: 9.5rem;
  block-size: 5rem;
  padding: var(--space-3);
  border: var(--hairline) solid hsl(var(--border));
  border-radius: var(--radius-md);
  background-color: hsl(var(--card));
}

.mural__logo {
  display: none;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: 100%;
  opacity: 0.8;
}

[data-theme="dark"] .mural__logo[data-tema-logo="escuro"],
[data-theme="light"] .mural__logo[data-tema-logo="claro"] {
  display: block;
}

@keyframes nx-mural-lado {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (min-width: 1024px) {
  .mural__col[data-sentido="desce"] {
    display: block;
  }

  .mural {
    margin-block-start: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Colunas coladas (31/08/2026, duas voltas do dono: 16px, depois 8px,
       agora 4px — o filete de cada célula já separa uma da outra). */
    gap: var(--space-1);
    /* ALTURA FIXA, e precisa ser: `block-size: 100%` numa caixa de altura
       automática resolve para a altura do CONTEÚDO — as duas trilhas
       duplicadas — e o mural estica por mais de mil pixels (visto em captura
       quando ele ainda morava na tese). Aqui o valor acompanha a dobra. */
    /* ALTURA FIXA. `100%` numa célula de altura automática resolve para a
       altura do CONTEÚDO (as duas trilhas duplicadas) e o mural estica por
       mil e tantos pixels — aconteceu duas vezes nesta rodada, as duas vistas
       em captura. O valor abaixo cobre a caixa do acordeão ao lado. */
    block-size: clamp(26rem, 58svh, 38rem);
    overflow: hidden;

    /* Some nas duas pontas: sem isso a coluna termina numa aresta reta e o
       laço fica visível. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }

  .mural__col {
    overflow: hidden;
  }

  .mural__trilha {
    display: grid;
    gap: var(--space-1);
    animation-name: nx-mural-sobe;
    /* 46s era leitura de marquee institucional; o dono achou lento ("estão
       bem lentas"). 24s e 28s: as duas colunas continuam fora de sincronia
       (é o que dá vida ao mural) e o ciclo fecha antes de cansar. */
    animation-duration: calc(var(--motion) * 24s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
  }

  .mural__col[data-sentido="desce"] .mural__trilha {
    animation-name: nx-mural-desce;
    animation-duration: calc(var(--motion) * 28s);
  }

  .mural__item {
    overflow: hidden;
    border: var(--hairline) solid hsl(var(--border));
    border-radius: var(--radius-md);
    background-color: hsl(var(--card));
  }

  /* Célula de logo: o arquivo tem proporção livre, então a célula é que dá a
     medida e a logo se ajusta dentro, com ar em volta. */
  .mural__item {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    padding: var(--space-6);
  }

  /* TAMANHO ÓPTICO PADRONIZADO (31/08/2026, dono: "a JX está enorme e mais
     pra baixo, tem que pôr simetria nas logos"). Os arquivos têm proporções e
     margens internas muito diferentes — a JX é um monograma quase quadrado, a
     TerraVision é uma faixa larga. Travando a ALTURA e deixando a largura
     livre, todas ocupam a mesma faixa vertical e assentam na mesma linha. */
  .mural__logo {
    display: none;
    inline-size: auto;
    max-inline-size: 78%;
    block-size: auto;
    max-block-size: 2.25rem;
    opacity: 0.72;
    transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out);
  }

  /* A troca de variante é a MESMA do portfólio: dois irmãos no DOM, display
     por [data-theme], sem JS e sem media query. */
  [data-theme="dark"] .mural__logo[data-tema-logo="escuro"],
  [data-theme="light"] .mural__logo[data-tema-logo="claro"] {
    display: block;
  }

  .mural__item:hover .mural__logo {
    opacity: 1;
  }
}

@keyframes nx-mural-sobe {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -50%, 0); }
}

@keyframes nx-mural-desce {
  from { transform: translate3d(0, -50%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* Sem movimento: o mural sai de cena. Uma coluna de imagens parada não diz
   nada que o texto ao lado já não diga, e mantê-la só ocuparia metade da
   seção com decoração estática. */
@media (prefers-reduced-motion: reduce) {
  .mural {
    display: none;
  }
}

/* ÍCONE AO LADO DO TÍTULO, não acima (31/08/2026, pedido do dono). Dentro do
   próprio <h3>, em linha: assim ele acompanha a primeira linha do título e o
   bloco lê como uma unidade só. */
.tese-block__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.tese-block__icone {
  display: inline-flex;
  flex: none;
  translate: 0 0.15em;
  color: hsl(var(--signal));
}

/* Rótulo do mural: mesma tipografia dos rótulos de seção (mono, caixa alta),
   para ler como legenda e não como mais um título. */
/* O rótulo usa a MESMA tipografia dos títulos do acordeão ao lado (31/08/2026,
   pedido do dono: "coloca como a fonte ao lado de PRODUTOS WEB & APPS"): as
   duas colunas passam a ler como duas metades da mesma seção, não como uma
   legenda tímida ao lado de uma lista. */
.mural__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: normal;
  text-transform: none;
  color: hsl(var(--foreground));
}

.mural__titulo {
  text-align: center;
}

/* O bloco do mural ocupa a célula do palco — a mesma em que o vídeo da marca
   tocava. */
/* O bloco ocupa a célula INTEIRA (31/08/2026, "faz maior que pegue inteiro
   ali"): título ancorado no topo e o mural preenchendo o resto, sem a folga
   que o centramento deixava em cima e embaixo. */
.mural-bloco {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: var(--space-5);
  min-inline-size: 0;
  margin: 0;
  padding: var(--space-6);
}