/* ==========================================================================
   NEXUS theme-final / assets/css/sections/govtech.css
   Território exclusivo da seção #govtech (catálogo GovTech + INCO-LATAM).
   Só consome tokens de 01-tokens.css e reaproveita primitivos de 03-ui.css
   (.card, .badge, .btn) e transversais de 02-base.css/04-sections.css
   (.section, .section__head, .eyebrow, .stat-rail, .media-frame). Nenhum
   hex, nenhum px de raio, nenhuma família de fonte literal. Motion: só
   transform e opacity; as barras de família são estáticas por especificação
   e nunca animam largura.

   Índice:
   0. Painel da seção (a "div bonita com fundo")
   1. Ritmo vertical interno
   2. Cabeçalho e link de plataforma
   3. Ressalva institucional (destaque obrigatório)
   4. Painéis: famílias (barras) e motores
   5. Contorno de crachá na pele cult (motor, referências, catálogo)
   5.5 Mostruário de cenas + catálogo em crachás
   6. Bloco INCO-LATAM
   7. Rodapé: contratação e referências normativas
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Painel da seção

   Pedido do dono na revisão de index2.html, palavra por palavra: "diminuir a
   zona de respiro para escrever isso melhor, e poderia ser uma div bonita,
   com fundo". São duas coisas e as duas moram aqui.

   RESPIRO. A seção usava --section-y das duas pontas (na pele de vidro,
   clamp(6rem, 3.8rem + 8vw, 12rem) x 1.14 de densidade, ou seja 175px em
   1440px de largura, de cada lado) e ainda somava o padding do painel. O
   respiro externo cai para pouco mais de um terço; quem passa a marcar o
   começo e o fim da seção é a aresta do painel, não o vazio. Não é aperto:
   é trocar ar solto por ar contido, que é o que o painel faz de melhor.

   SUPERFÍCIE. Translúcida de propósito, e sem nenhum primitivo de cartão.
   Duas razões, as duas do §12.1:

   a) `.card` e `.panel` recebem a receita de vidro na pele glass. Este painel
      envolve .card.govtech-panel (famílias, motores) e .card.govtech-inco,
      que por sua vez contêm etiquetas de vidro (.govtech-motor__code,
      .govtech-inco__pais). Vidro em volta de vidro em volta de etiqueta são
      TRÊS camadas, e o §12.1 permite duas. Sem backdrop-filter aqui, a
      contagem continua exatamente em duas.
   b) "Vidro só sobre imagem, vídeo, aurora ou mesh. Nunca sobre fundo liso."
      Um painel OPACO por baixo dos cartões de vidro seria exatamente o fundo
      liso proibido, e os cartões virariam cinza sujo. Com alfa, a aurora da
      pele continua passando por baixo dos cartões e o vidro segue tendo o
      que borrar.

   O alfa está na SUPERFÍCIE, nunca na tinta: o §2.5 proíbe alfa em cor de
   texto, e nenhuma linha desta folha escreve `color` com alfa.
   -------------------------------------------------------------------------- */

.govtech.section {
  padding-block: calc(var(--section-y) * 0.38);
}

.govtech__panel {
  padding: clamp(var(--space-8), 2.4vw + var(--space-6), var(--space-14))
           clamp(var(--space-5), 2.2vw + var(--space-3), var(--space-12));
  border-radius: var(--radius-xl);
  border: var(--hairline) solid hsl(var(--border));
  background-color: hsl(var(--surface-2) / 0.62);
}

/* --------------------------------------------------------------------------
   1. Ritmo vertical interno
   Um único espaçamento entre os blocos da seção, sem margin duplicado por
   componente. O cabeçalho de seção já traz sua própria margem inferior
   (02-base.css); zera aqui para o ritmo ficar só nesta regra.

   O seletor desceu de `.govtech .container > * + *` para o painel: os blocos
   deixaram de ser filhos diretos do container quando ganharam o invólucro.
   -------------------------------------------------------------------------- */

.govtech .govtech__panel > * + * {
  margin-block-start: var(--space-10);
}

/* Três classes na especificidade porque a pele glass escreve
   `[data-skin="glass"] .section__head { margin-block-end: var(--space-14) }`
   e carrega DEPOIS das folhas de seção: com duas classes o empate ia para a
   pele e o cabeçalho ficava com respiro duplo (o dele mais o do ritmo). */
.govtech .govtech__panel > .govtech__head.section__head {
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   2. Cabeçalho e link de plataforma

   Dois defeitos apontados na revisão, com a mesma origem: a medida.

   HIFENIZAÇÃO. 02-base.css declara `hyphens: auto` em h1..h6 (correto para
   texto corrido em português). Sob a medida de 62ch que a pele glass impõe a
   TODO .section__head, o h2 desta seção não tinha largura para "produtos" e
   quebrava em "produ-tos". Título não hifeniza: `hyphens: manual` resolve a
   causa, e a medida mais larga abaixo tira o título da situação-limite.

   LEAD COLADO NO TÍTULO. O eyebrow, o h2 e o lead moravam num <div> sem
   classe dentro do .section__head. Grid só espaça FILHOS DIRETOS, então o
   `gap` do cabeçalho separava o <div> do link da plataforma, e nunca as três
   linhas dentro dele. .govtech__head-copy devolve o gap para onde ele
   precisa estar. É defeito de estrutura, não de pele: vale nas três.
   -------------------------------------------------------------------------- */

/* O cabeçalho deixa de ter medida própria e cada filho passa a declarar a
   sua. A medida única servia às três linhas ao mesmo tempo e não servia a
   nenhuma: era estreita para um h2 de 74 caracteres e larga para um lead.
   Nada aqui alinha à mão: `justify-items: inherit` faz o bloco de copy herdar
   o alinhamento que a PELE decidiu para .section__head (centro no vidro,
   início nas outras duas), então o mesmo CSS serve às três sem `if`. */
.govtech .govtech__head.section__head {
  max-width: none;
}

/* `max-width: none` com três classes porque DUAS folhas capam os filhos do
   cabeçalho partido em --measure: `.section__head--split > *` em
   04-sections.css e a redefinição de --measure para 56ch na pele glass.
   Medido antes da correção, em 1440px na pele de vidro: o bloco de copy
   nascia com 605px de largura máxima, então o `min(100%, …)` do título
   colapsava para esses mesmos 605px por causa do termo `100%`, e a
   hifenização voltava por baixo por mais larga que fosse a regra do título.
   Quem cap a medida agora é cada linha, uma a uma, logo abaixo. */
.govtech .govtech__head > .govtech__head-copy {
  display: grid;
  justify-items: inherit;
  gap: var(--space-5);
  inline-size: 100%;
  min-inline-size: 0;
  max-width: none;
}

/* 15em é medido na fonte do PRÓPRIO título (em, não ch do pai), então a
   caixa acompanha --fs-h2 e --scale em qualquer viewport e em qualquer pele,
   sem px e sem media query. Dá três linhas de display em 1440px, e nenhuma
   delas hifeniza.

   `text-wrap: pretty` no lugar do `balance` que 02-base.css dá a todo h1..h6.
   `balance` equaliza o comprimento das linhas, o que num título de quatro
   linhas empurra palavra longa para linha curta e devolve exatamente a
   pressão que produz hífen. Com a medida larga, `pretty` entrega três linhas
   cheias e cuida só do órfão da última, que é o defeito que sobra. */
/* TRACKING DO TÍTULO (rodada de agosto de 2026, "melhorar o título").
   --tracking-display é -0.03em e serve a display de todo tamanho, do h3 ao
   mega. Título de seção nesta escala (--fs-h2, até 3.25rem) fica solto nesse
   valor: o olho lê palavra a palavra em vez de ler o bloco. O degrau extra é
   escrito como calc SOBRE o token, nunca como valor absoluto, por duas
   razões: o estúdio controla --tracking-display e a relação tem que
   sobreviver a isso, e o PISO combinado é -0.04em, que é onde as hastes de
   "ss" e "rt" começam a se tocar em Funnel Display. Um centésimo abaixo do
   token, nunca dois. */
.govtech__title {
  hyphens: manual;
  text-wrap: pretty;
  letter-spacing: calc(var(--tracking-display) - 0.01em);
  font-weight: 680;
  max-inline-size: min(100%, 15em);
}

/* O lead fica MAIS ESTREITO que o título, não mais largo. --measure é 56ch
   medido na fonte de quem o usa, e o lead roda em --fs-lead: aplicado aqui
   ele media 861px contra 898px do título, ou seja, uma linha de apoio quase
   do tamanho do título que ela apoia, sem hierarquia nenhuma. 30em na própria
   fonte do lead dá 696px, sem px e sem media query. */
.govtech__lead {
  max-inline-size: min(100%, 30em);
}

.govtech__head-link {
  flex: none;
  align-self: flex-start;
}

.govtech-domain {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
}

/* --------------------------------------------------------------------------
   3. Ressalva institucional
   Citação literal do rodapé de produtos.holdnexus.com. Precisa ficar visível
   em destaque, nunca em letra miúda: caixa própria com borda de acento,
   ícone e texto no tamanho de leitura padrão do corpo.
   -------------------------------------------------------------------------- */

.govtech-ressalva {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-lg);
  border: var(--hairline) solid hsl(var(--border));
  border-inline-start-width: calc(var(--hairline) * 3);
  border-inline-start-color: hsl(var(--primary));
  background-color: hsl(var(--surface-2));
}

.govtech-ressalva__icon {
  flex: none;
  display: inline-flex;
  color: hsl(var(--primary));
  margin-block-start: var(--space-1);
}

.govtech-ressalva__text {
  color: hsl(var(--foreground));
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   4. Painéis: famílias (barras proporcionais estáticas) e motores
   -------------------------------------------------------------------------- */

/* Mesma causa e mesma correcao do defeito de altura de #contratacao
   (agosto de 2026): os dois paineis (.card.govtech-panel, Familias e
   Motores) tem quantidades de conteudo diferentes, e align-items:start
   travava cada .card na altura do proprio conteudo em vez de deixar o CSS
   Grid esticar os dois ate o maior. .card ja fica com a caixa maior e o
   conteudo no topo (.card__body: display:grid; align-content:start),
   entao stretch (o valor de fabrica do Grid, explicito aqui de proposito)
   e tudo que faltava. [data-skin="surface"] ja redeclarava align-items:
   stretch para este mesmo seletor (08-skin-surface.css) por outro motivo,
   a matriz com filete; a fabrica passa a concordar com a pele em vez de
   depender dela para o alinhamento ficar certo nas outras quatro peles. */
.govtech-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--space-6);
  align-items: stretch;
}

.govtech-panel__title {
  margin-block-end: var(--space-5);
  font-size: var(--fs-h3);
}

/* ---- famílias: nome, quantidade e barra estática (largura fixa no HTML,
   nunca em transition; a revelação do item inteiro é só opacidade/transform,
   herdada de [data-reveal]) ---- */

.govtech-familias {
  display: grid;
  gap: var(--space-5);
}

.govtech-familia__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-2);
}

.govtech-familia__nome {
  color: hsl(var(--foreground));
  font-size: var(--fs-sm);
  font-weight: 600;
}

.govtech-familia__qtd {
  flex: none;
  color: hsl(var(--muted-foreground));
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.govtech-familia__track {
  inline-size: 100%;
  block-size: calc(var(--space-2) * 0.75);
  border-radius: var(--radius-full);
  background-color: hsl(var(--secondary));
  overflow: hidden;
}

.govtech-familia__fill {
  display: block;
  block-size: 100%;
  border-radius: var(--radius-full);
  background-color: hsl(var(--primary));
}

/* ---- motores: ícone, código (badge mono) e texto ---- */

.govtech-motores {
  display: grid;
  gap: var(--space-5);
}

.govtech-motor {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block-start: var(--space-5);
  border-block-start: var(--hairline) solid hsl(var(--border));
}

.govtech-motores > .govtech-motor:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.govtech-motor__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--space-11);
  block-size: var(--space-11);
  border-radius: var(--radius-md);
  background-color: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  font-size: var(--fs-lead);
}

.govtech-motor__body {
  min-inline-size: 0;
  display: grid;
  gap: var(--space-2);
}

.govtech-motor__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.govtech-motor__code {
  flex: none;
}

.govtech-motor__title {
  font-size: var(--fs-base);
}

.govtech-motor__text {
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   5. Catálogo: os 27 nomes de produto.
   MUDOU DE LUGAR (agosto/2026, pedido do dono no mostruário de cenas, ver
   §5.5: "os nomes do lado, porque daí não perde espaço"). Não é mais uma
   grade de crachás numa seção própria — virou a coluna de apoio do slider
   (`.govtech-showcase__catalogo`/`.govtech-showcase__nomes`, §5.5), mesmo
   dado (`g.produtos`, partials/govtech.js). `.govtech-chips`/`.govtech-chip`
   saíram do HTML; as variantes de Seções 2.0 que ainda os citam
   (`html[data-nx-lay~="govtech:denso"] #govtech .govtech-chips`,
   12-secoes.css, e o gap de matriz de `[data-skin="surface"] #govtech
   .govtech-chips`, mesma folha) ficam inertes — 0 elementos casam, sem
   erro — e não são território deste agente para limpar; ver adendo do
   relatório final.

   CORREÇÃO DE VISUAL (mesma rodada, revisão seguinte): a coluna nasceu como
   texto compacto em `columns`, com filete horizontal por linha — o dono
   reprovou o resultado ("tem que ser padrão da página e não tabela,
   deveria ser algo tipo Referências normativas"). Os 27 nomes voltam a ser
   crachá em §5.5, com as MESMAS classes de base do crachá de referência
   normativa (`.badge.badge--outline`) — nenhuma pílula nova, nenhum
   componente novo, só o seletor de cluster muda de coluna de texto para
   `display: flex; flex-wrap: wrap`.

   CONTORNO QUEBRADO NA PELE CULT cobre os quatro crachás que existem hoje na
   seção: o código do motor (A/B/C/BASE), o crachá de referência normativa, o
   crachá de cada nome do catálogo (§5.5) e o crachá "Conceito" da reforma
   editorial de agosto/2026 (mesmo §5.5) — a correção abaixo ganhou o quarto
   seletor.

   Origem do defeito: código de motor e crachá de referência/catálogo usam
   .badge--outline (03-ui.css: border de 1px nos quatro lados, cor
   --input). A pele cult SOMA um friso de metal (--ct-plate-bevel,
   09-skin-cult.css) pensado para placas maiores — card, botão — que
   nestes é só um hairline INSET NO TOPO (sem base, sem laterais:
   `box-shadow: inset 0 var(--ct-bevel) 0 .../0.4`, nunca as duas faces
   que o mixin completo usa). Num crachá do tamanho de uma palavra, esse
   friso de uma face só, por cima de uma borda já fraca (--input contra o
   fundo escuro do cult mede baixo contraste), lê como contorno que "some
   em cima, nos lados" — exatamente o relato do dono.

   Decisão do dono: tirar o contorno de vez, não tentar consertar o friso.
   Território: a folha da pele não é deste agente (09-skin-cult.css), mas o
   DEFEITO é desta seção — corrige aqui, por especificidade de ID (maior
   que o seletor de pele). Fundo sutil de superfície no lugar da borda, no
   padrão dos crachás preenchidos da casa (mesma receita de
   .badge--secondary, sem a borda dela). As outras quatro peles não tinham
   esse defeito (border completo e consistente nas quatro faces) e não são
   tocadas — só cult entra nesta regra. */
:is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin]))
  #govtech .govtech-motor__code,
:is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin]))
  #govtech .govtech-legal__list .govtech-legal__chip,
:is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin]))
  #govtech .govtech-showcase__nomes .govtech-showcase__nome,
:is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin]))
  #govtech .govtech-showcase__marcador {
  background-image: none;
  box-shadow: none;
  border-color: transparent;
  background-color: hsl(var(--secondary));
}

/* --------------------------------------------------------------------------
   5.5 Mostruário de cenas — TERCEIRA VERSÃO (agosto/2026). Primeira era
   mosaico ("ficou horrível... com o slider"); virou slider de uma cena só,
   centralizado; o dono viu, gostou do formato, pediu dois ajustes: (1)
   moldura APAISADA, não "de pé"; (2) os nomes do catálogo do lado, "porque
   daí não perde espaço".

   DE 3 CENAS PARA 2 (06/08/2026, pedido do dono: "em govtech, pode remover
   a img que está do iphone e deixar só 2 imgs"). govtech-cena-3.webp (o
   celular sozinho em pedestal de mármore, confirmado abrindo o arquivo, não
   pelo alt antigo — ver o comentário grande em partials/govtech.js) saiu do
   rodízio e do disco. Nada nesta folha tinha contagem de cenas hardcoded:
   o layout de duas colunas, a moldura 16/9, o track flex e o indicador de
   progresso (logo abaixo) são todos genéricos em relação ao número de
   .govtech-showcase__slide/.govtech-showcase__dash que o partial emitir —
   por isso a redução para 2 não pediu nenhuma mudança de CSS aqui, só no
   HTML (partials/govtech.js) e nos aria-label dos traços.

   LAYOUT DE DUAS COLUNAS. `.govtech-showcase-layout` é quem decide isso
   agora, não mais uma largura própria centralizada no slider — a coluna do
   catálogo é o que dá ao slider seu limite direito em telas largas.
   Abaixo de ~900px (a mesma faixa "tablet retrato pra baixo" que o resto
   do arquivo usa como limiar de empilhamento) as duas colunas viram uma:
   slider em cima, nomes embaixo, os dois na largura cheia do painel.

   MOLDURA APAISADA. --media-ratio vira 16/9 (era 4/3 na versão anterior,
   "de pé" demais para o pedido). As artes nascem 1448×1086 (4/3 nativo);
   16/9 corta topo/base de cada cena, aceito de propósito (pedido do dono:
   "as 3 aguentam corte vertical") — `object-position: center` mantém o
   assunto (laptop/celular/tablet) centralizado no recorte.
   `media-frame--no-mask` (04-sections.css) desliga o véu de legibilidade
   de texto-sobre-mídia: não há texto sobreposto aqui, só a foto.

   DESLIZE, NÃO CROSSFADE. .govtech-showcase__track é o MESMO mecanismo de
   .portfolio-modal__track (sections/portfolio.css §13.2, carrossel do
   modal de portfólio): flex row, um .govtech-showcase__slide por cena, a
   caixa recorta com overflow:hidden (herdado de .media-frame) e o
   comportamento (partials/govtech.js) desloca a FAIXA por
   `transform: translate3d(-N * 100%, 0, 0)`, nunca `left`/`margin` — só
   `transform`, a propriedade contínua que o §6 permite. Sem JS, o track
   nasce sem transform nenhum: a primeira cena, única dentro da caixa
   recortada, é o que aparece.

   Setas (`.govtech-showcase__seta`) e indicador de progresso
   (`.govtech-showcase__dash`) são o MESMO vocabulário visual de
   `.case-block__seta`/`.case-block__dash` (sections/cases.css) — "no
   padrão das setas dos cases", pedido literal — renomeados para o
   namespace desta seção, sem virar componente novo.

   Nenhuma variante de Seções 2.0 (12-secoes.css) endereça este bloco —
   ele não quebra nenhuma, porque nenhuma o conhece. */
.govtech-showcase-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .govtech-showcase-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
}

.govtech-showcase__carrossel {
  --media-ratio: 16 / 9;
  position: relative;
}

.govtech-showcase__track {
  display: flex;
  block-size: 100%;
  cursor: grab;
  touch-action: pan-y;
  transition: transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}

.govtech-showcase__track.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.govtech-showcase__slide {
  flex: none;
  inline-size: 100%;
  block-size: 100%;
}

/* `position: static` É A CORREÇÃO, não só um valor explícito (defeito
   diagnosticado por medição em CDP, agosto/2026: cenas 2 e 3 do mostruário
   ficavam com moldura vazia ao avançar o slider). Causa: `.media-frame img,
   video, picture, canvas` (04-sections.css §5) é seletor descendente e
   também casa com QUALQUER img dentro de `.govtech-showcase__carrossel`
   (que carrega `.media-frame`), inclusive as três aqui dentro, escrevendo
   `position: absolute; inset: 0` nelas. As duas regras têm a MESMA
   especificidade (classe + tipo); govtech.css carrega depois de
   04-sections.css no index.html, então esta declaração vence a disputa
   propriedade por propriedade — MENOS a de `position`, que 04-sections.css
   escreve e esta regra, antes desta correção, nunca redeclarava (regras não
   se substituem inteiras, só propriedade a propriedade).
   Consequência medida: as três imagens, absolutamente posicionadas, saem do
   fluxo do próprio `<li>`/slide e passam a se posicionar em relação ao
   ANCESTRAL POSICIONADO mais próximo — que deixa de ser `.media-frame`
   assim que `.govtech-showcase__track` ganha um `transform` (ele ganha um
   logo na montagem, para ir à cena 0), porque `transform` cria containing
   block para descendente absoluto. As três imagens colapsavam exatamente
   uma sobre a outra, ancoradas no canto do TRACK; ao deslizar o track em
   -100%, a pilha inteira (as três juntas) saía da caixa recortada e a
   moldura ficava vazia — nunca era só a cena ativa que sumia, era o
   conjunto, e a "cena 1" que aparecia antes de qualquer clique era, na
   prática, as três empilhadas e coincidentes.
   `position: static` devolve a imagem ao fluxo normal do próprio
   `.govtech-showcase__slide` (que já é `flex:none; inline-size:100%;
   block-size:100%`, do bloco acima): cada imagem passa a ocupar o slide que
   o HTML já desenha, o `<li>` volta a ser dono da própria posição, e é o
   `translate3d` do track (não mais nenhum posicionamento absoluto) quem
   decide qual cena aparece na caixa recortada. */
.govtech-showcase__slide img {
  display: block;
  position: static;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

/* Setas manuais — mesma receita de .case-block__seta (sections/cases.css),
   "discretas": baixa opacidade em repouso, cheia sob hover/foco, nunca
   escondida por completo (uma seta invisível até o hover falha quem
   navega por teclado ou toque). z-index acima do track e do véu
   desligado. */
.govtech-showcase__seta {
  position: absolute;
  inset-block: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(2.5rem, 4vw + 1rem, 3rem);
  border: 0;
  background: linear-gradient(90deg, hsl(var(--scrim) / 0.3), hsl(var(--scrim) / 0));
  color: hsl(0 0% 100%);
  opacity: 0.55;
  cursor: pointer;
  transition:
    opacity calc(var(--dur-fast) * var(--motion)) var(--ease-out),
    background-color calc(var(--dur-fast) * var(--motion)) var(--ease-out);
}

.govtech-showcase__seta--prev {
  inset-inline-start: 0;
}

.govtech-showcase__seta--prev .nx-icon {
  transform: rotate(180deg);
}

.govtech-showcase__seta--next {
  inset-inline-end: 0;
  background-image: linear-gradient(270deg, hsl(var(--scrim) / 0.3), hsl(var(--scrim) / 0));
}

.govtech-showcase__carrossel:hover .govtech-showcase__seta,
.govtech-showcase__seta:hover,
.govtech-showcase__seta:focus-visible {
  opacity: 1;
}

.govtech-showcase__seta:hover {
  background-color: hsl(var(--scrim) / 0.22);
}

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

/* Indicador de progresso — mesma receita de .case-block__progresso/__dash
   (sections/cases.css): um traço por cena, o ativo preenchendo com o
   tempo do rodízio automático via `transform: scaleX()`, escrito inline
   pelo comportamento (partials/govtech.js), sincronizado no MESMO
   relógio que decide a próxima troca. */
.govtech-showcase__progresso {
  display: flex;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  padding-inline: var(--space-1);
}

.govtech-showcase__dash {
  position: relative;
  flex: 1 1 0;
  block-size: 0.1875rem;
  min-inline-size: 1.25rem;
  border: 0;
  border-radius: var(--radius-full);
  background-color: hsl(var(--border));
  overflow: hidden;
  cursor: pointer;
  padding: 0;
}

/* Alvo de toque do §7.5 sem esticar a barra visual — mesmo truque de
   .case-block__dash::before. */
.govtech-showcase__dash::before {
  content: "";
  position: absolute;
  inset-block: calc(var(--tap-min) / -2 + 0.09375rem);
  inset-inline: 0;
}

.govtech-showcase__dash-fill {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(0);
  background-color: hsl(var(--primary));
}

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

/* DEDO, não largura de tela (§7.5: o teste de alvo de toque é
   `pointer: coarse`, não viewport estreita). Mesmo tratamento que
   sections/cases.css deu ao carrossel dos cases nesta mesma rodada, pelo
   mesmo motivo: o `::before` acima resolve só o eixo VERTICAL do traço, e a
   seta fica em `clamp(2.5rem, …)`, ou seja, 40px de largura no telefone,
   quatro pixels abaixo do piso. Aqui os dois eixos fecham em `--tap-min`
   sem mexer no visual: a barra continua com 3px de altura e a seta continua
   com o mesmo gradiente e o mesmo ícone, só a caixa que o dedo alcança
   cresce. Em ponteiro fino nada disso se aplica. */
@media (pointer: coarse) {
  .govtech-showcase__seta {
    inline-size: var(--tap-min);
  }

  .govtech-showcase__dash {
    min-inline-size: var(--tap-min);
  }
}

/* Coluna do catálogo (pedido do dono: "os nomes do lado, porque daí não
   perde espaço"). Mesmo dado dos 27 produtos (`g.produtos`,
   partials/govtech.js).

   CORREÇÃO DE VISUAL (agosto de 2026): a primeira versão era texto denso em
   `columns` (multi-coluna de texto), com filete horizontal por linha — lia
   como tabela, e o dono reprovou: "tem que ser padrão da página e não
   tabela, deveria ser algo tipo Referências normativas". O cluster agora é
   o MESMO padrão do bloco de referências normativas (§7, `.govtech-legal__
   list`/`.govtech-legal__chip`): `display: flex; flex-wrap: wrap` em vez de
   `columns`, e cada nome vira um crachá `.badge.badge--outline` (HTML,
   partials/govtech.js) — sem pílula nova, sem componente novo. Os `<li>`
   não precisam de CSS próprio: dentro de um pai `flex`, cada filho já vira
   item de flex por conta própria, wrap incluso; quem carrega a tinta e o
   tamanho de fonte é a classe compartilhada `.govtech-showcase__nome`, ao
   lado de `.govtech-legal__chip`, lá no §7. */
.govtech-showcase__catalogo {
  min-inline-size: 0;
}

.govtech-showcase__nomes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* REFORMA EDITORIAL (agosto de 2026, spec do dono, item F): título da
   coluna vira "Portfólio conceitual" e ganha um crachá de marcação
   (`g.marcadorConceito`) ao lado, mais um aviso de texto (`g.avisoConceito`)
   logo abaixo — a regra dura da spec é "produto real e conceito nunca se
   misturam sem identificação clara", e os 27 nomes desta coluna são
   conceito, não produto entregue.

   `.govtech-showcase__catalogo-head` só existe para alinhar título e crachá
   na mesma linha: o título perde a margem inferior de `.govtech-panel__
   title` aqui dentro (fica no wrapper, não nele, senão o crachá desalinha
   verticalmente num flex) e o wrapper devolve a mesma folga antes do aviso
   por conta própria. */
.govtech-showcase__catalogo-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.govtech-showcase__catalogo-title {
  margin-block-end: 0;
}

/* Aviso de conceito: mesma tinta e tamanho da nota de referências legais
   (`.govtech-legal__nota`, §7) — é o mesmo tipo de texto de apoio, mesma
   receita, sem inventar um novo degrau de cor. */
.govtech-showcase__aviso {
  margin-block-start: var(--space-2);
  margin-block-end: var(--space-5);
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   6. Bloco INCO-LATAM
   Card partido em duas colunas fluidas (auto-fit): mídia e corpo. Em telas
   estreitas a mídia empilha acima do texto pela própria ordem do HTML.
   -------------------------------------------------------------------------- */

.govtech-inco {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  overflow: hidden;
}

.govtech-inco__media {
  --media-ratio: 16 / 10;
  border: 0;
  border-radius: 0;
}

.govtech-inco__body {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-8);
}

.govtech-inco__title {
  font-size: var(--fs-h3);
}

.govtech-inco__desc {
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.govtech-inco__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: var(--space-5);
  padding-block: var(--space-4);
  border-block: var(--hairline) solid hsl(var(--border));
}

.govtech-inco__stat {
  display: grid;
  gap: calc(var(--space-1) * 0.5);
}

.govtech-inco__stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 650;
  line-height: 1;
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums;
}

.govtech-inco__stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.govtech-inco__paises {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Mesma correção de corpo do .govtech-legal__chip, mesma razão. */
.govtech-inco__pais {
  font-size: var(--fs-xs);
  color: hsl(var(--muted-foreground));
}

.govtech-inco__actions {
  margin-block-start: var(--space-2);
}

.govtech-inco__nota {
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   7. Rodapé: contratação (vias específicas do GovTech) e referências
   normativas citadas pelos produtos do catálogo.
   -------------------------------------------------------------------------- */

.govtech-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-8);
  padding-block-start: var(--space-8);
  border-block-start: var(--hairline) solid hsl(var(--border));
}

.govtech-vias__list {
  display: grid;
  gap: var(--space-4);
}

.govtech-via__title {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.govtech-via__text {
  margin-block-start: var(--space-1);
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

.govtech-legal__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --fs-xs, não --fs-mono: o crachá deixou de ser mono em 03-ui.css §3, e
   --fs-mono (0.6875rem) é o corpo calibrado para GLIFO MONO EM CAIXA ALTA,
   que tem altura de x maior. Em tipo de corpo, na mesma medida, "Lei 14.133,
   artigo 75" fica abaixo do limiar de leitura confortável. O degrau de
   ênfase continua existindo, e continua vindo do tamanho e da tinta, nunca
   de alfa (§2.5).

   `.govtech-showcase__nome` (§5.5, crachá de cada nome do catálogo) e
   `.govtech-showcase__marcador` (§5.5, crachá "Conceito" da reforma
   editorial de agosto/2026) entram no mesmo seletor de propósito: os três
   são o mesmo par `.badge.badge--outline`, a mesma tinta e o mesmo tamanho
   resolvem todos — reaproveitar em vez de duplicar a declaração, regra da
   casa de não inventar tinta nova por variante. */
.govtech-legal__chip,
.govtech-showcase__nome,
.govtech-showcase__marcador {
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-xs);
}

.govtech-legal__nota {
  margin-block-start: var(--space-3);
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   8. Telas estreitas: cabeçalho empilha, link de plataforma some da linha
   do título e desce junto com o resto do fluxo (herdado de
   .section__head--split, que já é flex-wrap por padrão).
   -------------------------------------------------------------------------- */

@media (max-width: 30rem) {
  .govtech-ressalva {
    flex-direction: column;
    gap: var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   9. Fecho da seção: caminho para o catálogo de produtos

   Pedido do dono, palavra por palavra: "em produtos que tem govtech, poderia
   pôr o botão lá no final dos produtos ou ver os produtos, algo assim".

   A seção termina hoje em referência normativa, que é o conteúdo mais frio
   dela: quem leu 27 produtos, 7 famílias e 3 motores chega ao fim sem para
   onde ir. O fecho devolve um destino, e o destino é o catálogo do site
   (#portfolio), onde os produtos aparecem um a um e com filtro.

   Filete acima em vez de caixa: o painel da seção já é uma superfície, e uma
   segunda superfície aqui dentro seria a terceira camada que o §12.1 proíbe
   na pele de vidro. O filete separa sem empilhar nada.
   -------------------------------------------------------------------------- */

.govtech__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  padding-block-start: var(--space-9);
  border-block-start: var(--hairline) solid hsl(var(--border));
  text-align: center;
}

/* O botão ganha um halo que só existe em `transform` e `opacity`: um
   pseudoelemento irmão, escalado a partir do centro, atrás do preenchimento.
   Nada de box-shadow em transição (§6 proíbe), nada de filter. */
.govtech__cta-btn {
  position: relative;
  isolation: isolate;
}

.govtech__cta-btn::before {
  content: "";
  position: absolute;
  inset: calc(var(--hairline) * -1);
  z-index: -1;
  border-radius: inherit;
  background-color: hsl(var(--primary));
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity calc(var(--dur-base) * var(--motion)) var(--ease-out),
    transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}

.govtech__cta-btn:hover::before,
.govtech__cta-btn:focus-visible::before {
  opacity: 0.28;
  transform: scale(1.12);
}

.govtech__cta-nota {
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  max-inline-size: min(100%, 28em);
}

/* --------------------------------------------------------------------------
   10. Efeitos

   Pedido do dono nesta rodada: "sinto falta de mais efeitos em tudo". Os três
   que entram aqui obedecem ao §6 sem exceção: só `transform` e `opacity`,
   toda duração multiplicada por var(--motion), e o estado inicial de cada um
   é escrito SOB UM ATRIBUTO QUE SÓ O JS ESCREVE
   (`[data-reveal-init]:not([data-revealed])`, de core/motion.js). Sem JS,
   nenhum destes seletores casa e a seção nasce inteira e visível, que é o
   que o failsafe do §6 exige. O failsafe de 1200ms continua sendo o teto.

   10.1 As barras de família crescem da esquerda.
   O contrato registra que elas são estáticas "por especificação: nenhuma
   largura anima", e continua verdade: a largura segue vindo do atributo
   style do partial e nunca entra em transição. O que anima é `scaleX` sobre
   essa largura, que é transform, é composto pela GPU e é explicitamente
   permitido pelo §6. A informação (a proporção entre as sete famílias) está
   na largura, e ela não muda; o crescimento só a apresenta.
   -------------------------------------------------------------------------- */

.govtech-familia__fill {
  transform-origin: left center;
  transition: transform calc(var(--dur-slow) * var(--motion)) var(--ease-out);
}

.govtech-familia[data-reveal-init]:not([data-revealed]) .govtech-familia__fill {
  transform: scaleX(0);
}

/* 10.2 (removido, agosto/2026) — era a cascata de entrada dos 27 chips do
   catálogo (--nx-i, opacity/transform escalonados). O catálogo virou lista
   de texto na coluna do slider (§5/§5.5); [data-reveal] no bloco inteiro
   (`.govtech-showcase__catalogo`, partials/govtech.js) já cobre a entrada,
   sem cascata item a item. */

/* 10.3 O ícone do motor responde ao ponteiro sobre a linha inteira. */
.govtech-motor__icon {
  transition: transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}

.govtech-motor:hover .govtech-motor__icon {
  transform: scale(1.08) rotate(-4deg);
}

/* 10.4 Ressalva: o filete de acento cresce do topo quando a caixa entra.
   scaleY sobre um pseudo, nunca border-width em transição. */
.govtech-ressalva {
  position: relative;
}

/* inset-block negativo de 1 filete: a caixa posicionadora é o PADDING BOX, e
   a ressalva tem borda de 1px em cima e embaixo. Sem essa compensação sobrava
   1px do filete de acento visível em cada ponta quando o pseudo está em
   scaleY(0), o que lê como sujeira e não como filete. */
.govtech-ressalva::after {
  content: "";
  position: absolute;
  inset-block: calc(var(--hairline) * -1);
  inset-inline-start: calc(var(--hairline) * -3);
  inline-size: calc(var(--hairline) * 3);
  background-color: hsl(var(--primary));
  transform-origin: top center;
  transition: transform calc(var(--dur-slow) * var(--motion)) var(--ease-out);
  pointer-events: none;
}

.govtech-ressalva[data-reveal-init]:not([data-revealed])::after {
  transform: scaleY(0);
}


/* Revisao do dono (12a rodada): a ressalva institucional sai da caixa grande
   com icone (lia como gerada) e vira uma linha minuscula no fecho da secao,
   como nota de rodape. Continua renderizada sempre (obrigacao da fonte).

   Segunda revisao do dono (agosto de 2026, mesma rodada da correcao de
   altura dos cartoes): o texto morava FORA de .govtech__panel, solto e
   centrado abaixo da div (partials/govtech.js escrevia o <p> depois dos
   dois </div> de fechamento). Passa a ser o ULTIMO filho de dentro do
   painel (rodape interno), sem mudar uma letra da citacao (obrigatoria por
   contrato, so posicao e estilo mudam). Fica menor (--fs-xs, ja era o menor
   degrau da escala, abaixo de --fs-sm/--fs-base do corpo) e em italico, pra
   ler como nota de rodape e nao como mais um paragrafo do painel.

   Selector de tres classes para vencer a regra de ritmo generica
   `.govtech .govtech__panel > * + *` (mesma especificidade, 0-3-0; o
   truque e o mesmo de .govtech__head.section__head um pouco acima neste
   arquivo, e pelo mesmo motivo: sem isso a nota herdava a mesma margem
   grande de qualquer bloco maior do painel, em vez da margem apertada que
   uma nota de rodape pede). O filete acima (border-block-start) separa a
   nota do bloco de Contratacao/Referencias sem empilhar uma segunda
   superficie (§12.1 da pele de vidro so proibe SUPERFICIE nova, filete nao
   e superficie). */
.govtech .govtech__panel > .govtech__ressalva-mini {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-6);
  border-block-start: var(--hairline) solid hsl(var(--border));
  font-size: var(--fs-xs);
  font-style: italic;
  line-height: 1.6;
  color: hsl(var(--faint-foreground));
  /* 13ª rodada, pedido do dono: a nota quebrava em 3 linhas espremidas num
     teto de 72ch com espaço de sobra dos lados. O teto acompanha o painel. */
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

/* CSS morto removido (agosto de 2026): ".govtech-panel--catalogo" e
   ".govtech-chips" centralizavam a antiga seção própria do catálogo, que
   já não existe desde a mudança de lugar registrada no §5 — nenhum HTML
   gerado por partials/govtech.js casa mais com essas classes. As duas
   variantes de Seções 2.0 que ainda citam ".govtech-chips"
   (12-secoes.css) ficam de fora por serem território de outro agente;
   ver nota do §5. */