/* ==========================================================================
   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 QUE MUDOU AQUI, na correcao do dono depois da primeira prova: o
   arquivo escolhido foi nexus-x-retrato (720x1280, retrato profundo,
   proporcao 9/16), e nao mais uma foto paisagem quase-16:9. A moldura
   parou de IMPOR sua propria proporcao ao conteudo (que e o que a foto
   antiga exigia, por nao ter proporcao fixa nenhuma) e passou a CASAR com
   a do video: --media-ratio vira 9/16 em vez do par 1672/941 → 4/5, e a
   coluna encolhe (§1) para a altura do palco nao disparar acima da lista
   ao lado. A borda de .media-frame tambem sai (§5): sobre um video de
   marca em tela cheia ela lia como moldura de foto de catalogo, nao como
   uma tela ligada. */

/* --------------------------------------------------------------------------
   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);
  align-items: start;
}

/* 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"). */
@media (min-width: 880px) {
  .capacidades__body {
    grid-template-columns: minmax(0, 1fr) minmax(min(100%, 240px), 300px);
  }
}

.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);
}

/* PROPORÇÃO E MOLDURA (correção do dono, segunda rodada). nexus-x-retrato é
   720x1280, exatamente 9/16: --media-ratio casa com a proporção nativa do
   arquivo, então object-fit: cover (04-sections.css) não recorta quase nada
   — o vídeo cobre a moldura inteira, sem tarja e sem sobra, do jeito que o
   dono pediu ("o vídeo cobrindo 100% da moldura sem barra"). A foto antiga
   não tinha proporção fixa nenhuma, por isso a receita anterior alternava
   --media-ratio por breakpoint (1672/941 → 4/5); com o vídeo já entregando
   a proporção certa, uma medida única substitui as duas.

   SEM BORDA. .media-frame (04-sections.css) 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: 9 / 16;
  border: 0;
  /* 15ª rodada, pedido do dono: o retrato 9/16 na largura cheia da coluna
     ficava mais alto que o acordeão e sobrava um vazio enorme abaixo da
     lista. Teto de altura equivalente à lista típica; com a proporção
     travada, a largura encolhe junto e a moldura centraliza na coluna. */
  inline-size: min(100%, calc(37.5rem * 9 / 16));
  margin-inline: auto;
}

/* 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. */
@media (min-width: 1560px) {
  .capacidades__body {
    grid-template-columns: minmax(0, 1fr) minmax(min(100%, 260px), 320px);
  }
}

/* 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);
  }
}