/* ============================================================================
   PARCEIROS — cabeçalho da seção + carrossel horizontal preso ao scroll (.prch).

   A seção inteira "prende" (position:sticky) por uma faixa de scroll:
     · o BLOCO DE TEXTO fica parado à esquerda e só some em fade quando os
       cards chegam perto;
     · DUAS fileiras de cards entram pela direita e passam POR CIMA dele,
       defasadas entre si e com a onda vertical invertida.
   Nenhum card se repete: cada parceiro aparece uma única vez, e por isso o
   tamanho do pin é calculado no JS a partir do percurso das fileiras
   (ver initPartners() em js/app.js).

   O carrossel ANTERIOR (autoplay, .prcd/.prcm) está guardado inteiro em
   carrosel.html, na raiz do projeto.
   ============================================================================ */


/* o palco pinado (.prch__stage) já ocupa a viewport inteira, então a seção não
   leva padding vertical; e overflow:hidden aqui QUEBRARIA o position:sticky
   dele — quem recorta as fitas é o próprio palco. */
.parceiros {
  padding-block: 0;
  overflow: visible;
}

/* tipografia do bloco de texto — ele vive dentro do .prch__copy, que cuida da
   largura e do espaçamento entre título, subtítulo e CTA. */
.parceiros__title {
  font-family: var(--font-disp);
  font-weight: 330;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.parceiros__title .mut { color: var(--n-500); }
.parceiros__sub {
  font-family: var(--font-disp);
  font-weight: 300;
  font-size: clamp(15px, 1.8vw, 17.5px);
  line-height: 1.6;
  color: var(--mut);
}

.prch {
  /* 2 fileiras => card mais baixo. Altura manda, largura sai do aspect 42:55. */
  --card-h: clamp(200px, 33vh, 330px);
  --card-w: calc(var(--card-h) * .764);
  --gap: clamp(12px, 1.6vw, 24px);
  --row-gap: clamp(14px, 2vh, 26px);
  --edge: clamp(20px, 5vw, 40px);
  /* coluna de texto: alinhada à mesma sarjeta do .wrap do site */
  --copy-w: min(46vw, 540px);
  --copy-x: max(var(--wrap-pad), calc((100% - var(--wrap-max)) / 2));
  position: relative;
  /* a altura real (= faixa de scroll do pin) é calculada no JS */
}

/* palco pinado: ocupa a viewport inteira e recorta o que sai pelas laterais */
.prch__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* ── coluna de texto: PARADA. Fica atrás dos cards (z-index) e só perde
   opacidade quando a primeira coluna de cards se aproxima (JS). ── */
.prch__copy {
  position: absolute;
  z-index: 1;
  left: var(--copy-x);
  top: 0; bottom: 0;
  width: var(--copy-w);
  display: flex; flex-direction: column; justify-content: center;
  will-change: opacity;
}
.prch__copy .parceiros__sub { margin-top: clamp(14px, 1.8vw, 22px); }
.prch__copy .parceiros__cta { margin-top: clamp(20px, 2.4vw, 28px); align-self: flex-start; }

/* ── as duas fileiras: z-index 2 = por cima do texto ── */
.prch__rows {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
  /* o container ocupa a LARGURA TODA do palco, inclusive onde não há card —
     sem isto ele fica por cima da coluna de texto e engole os cliques do
     CTA. Os cards não são interativos, então nada precisa receber ponteiro. */
  pointer-events: none;
}
/* trilho: fita infinita (o JS duplica o conjunto de cards) e só ele recebe o
   translateX. SEM padding lateral: o passo do loop precisa ser exatamente
   n × (card + gap), e um padding quebraria a periodicidade. A folga inicial
   de leitura entra como deslocamento inicial no JS, não como padding. */
.prch__track {
  display: flex;
  align-items: center;
  gap: var(--gap);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.prch__card {
  position: relative;
  flex: none;
  margin: 0;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 10px;
  overflow: hidden;
  background-color: #010111;
  background-image: radial-gradient(78% 62% at 88% 26%, rgba(245, 68, 120, .30), rgba(245, 68, 120, 0) 62%);
  /* o JS escreve aqui: perspective() + translateY da onda + rotações 3D.
     A perspectiva vai DENTRO do transform do card (e não no trilho) p/ cada
     card ter seu próprio ponto de fuga no centro dele — no trilho, que tem
     ~1500px, os cards das pontas ficariam grotescamente distorcidos. */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  /* a legenda reage à largura do CARD, não da tela: --card-w sai de --card-h,
     que sai de vh — ou seja, depende da ALTURA da viewport. Media query por
     largura não pegaria o caso "notebook baixo" (card estreito). */
  container-type: inline-size;
}
.prch__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* brilho que varre o card conforme ele atravessa a tela (o JS move o X e a
   opacidade). Fica acima da foto e abaixo da legenda. */
.prch__glare {
  position: absolute;
  top: -25%; bottom: -25%;
  left: -55%; width: 85%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .10) 34%,
    rgba(255, 255, 255, .45) 50%,
    rgba(255, 255, 255, .10) 66%,
    rgba(255, 255, 255, 0) 100%);
  filter: blur(3px);
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}

.prch__card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48%;
  pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 13, 0), rgba(0, 0, 13, .5) 55%, rgba(0, 0, 13, .88));
}
.prch__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-2); padding: clamp(12px, 1.1vw, 18px);
}
.prch__foll  { font-family: var(--font-disp); font-weight: 329; font-size: clamp(10px, .75vw, 12px); line-height: 1.15; color: var(--n-400); }
.prch__meta  { text-align: right; }
.prch__name  { display: block; font-family: var(--font-disp); font-weight: var(--fw-med); font-size: clamp(13px, 1.05vw, 16px); line-height: 1.12; letter-spacing: -.4px; color: #fff; }
.prch__handle{ display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 4px; font-family: var(--font-disp); font-weight: 329; font-size: clamp(10px, .75vw, 12px); line-height: 1.15; color: var(--n-400); }
.prch__badge { width: 12px; height: 12px; flex: none; }

/* card estreito: "24,2 mil seguidores" + nome não cabem lado a lado — empilha.
   (o limiar tem que cobrir 227px: nesse tamanho os dois blocos somam ~193px
   de texto em ~192px úteis e a legenda quebra em duas linhas) */
@container (max-width: 250px) {
  .prch__cap { flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px; }
  .prch__meta { text-align: left; }
  .prch__name { font-size: 12px; letter-spacing: -.2px; }
  .prch__handle { justify-content: flex-start; margin-top: 2px; font-size: 10px; }
  .prch__foll { order: 3; margin-top: 2px; font-size: 10px; }
  .prch__badge { width: 10px; height: 10px; }
}

/* ── MOBILE: não cabe texto-à-esquerda + cards-à-direita. Empilha: texto em
   cima (parado, sem fade) e as duas fileiras embaixo, ainda pinadas. ── */
@media (max-width: 720px) {
  .prch {
    --card-h: clamp(140px, 22vh, 196px);
    --gap: 10px;
    --row-gap: 10px;
  }
  /* (a legenda empilhada vem do @container acima — o card aqui é estreito) */
  /* o row-gap entre texto e fileiras é escrito pelo JS (= amplitude + folga),
     senão o card ao subir invade o CTA logo acima. */
  .prch__stage { flex-direction: column; justify-content: center; gap: 48px; }
  .prch__copy {
    position: static;
    width: auto; align-self: stretch;
    padding-inline: var(--wrap-pad);
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .prch__rows { flex: none; }
}

/* ── FALLBACK: sem JS ou reduced-motion vira carrossel horizontal comum
   (swipe/arrasto nativo), sem pin, sem onda e com o texto em cima. ── */
.prch.is-static .prch__stage,
.prch.is-static .prch__stage { position: static; height: auto; overflow: visible; flex-direction: column; gap: 32px; padding-block: clamp(64px, 9vw, 100px); }
.prch.is-static .prch__copy { position: static; width: auto; align-self: stretch; padding-inline: var(--wrap-pad); opacity: 1 !important; }
.prch.is-static .prch__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-left: var(--edge) !important;
  transform: none !important;
}
.prch.is-static .prch__track::-webkit-scrollbar { display: none; }
.prch.is-static .prch__card { scroll-snap-align: center; transform: none !important; }
.prch.is-static .prch__glare { display: none; }
@media (prefers-reduced-motion: reduce) {
  .prch__stage { position: static; height: auto; overflow: visible; flex-direction: column; gap: 32px; padding-block: clamp(64px, 9vw, 100px); }
  .prch__copy  { position: static; width: auto; align-self: stretch; padding-inline: var(--wrap-pad); opacity: 1 !important; }
  .prch__track { overflow-x: auto; padding-left: var(--edge) !important; transform: none !important; }
  .prch__card  { transform: none !important; }
  .prch__glare { display: none; }
}

/* ============================================================================
   TECNOLOGIA + GENTE — banda escura entre a Plataforma e O fim da burocracia.

   Dois círculos que se cruzam: à esquerda o que só pessoa faz, à direita o que
   só máquina faz, e na lente (a interseção) o resultado. A lente é o desenho
   inteiro do bloco, então ela não é imagem: é a INTERSEÇÃO REAL dos dois
   círculos, feita com máscara — assim acompanha qualquer tamanho de tela sem
   ficar fora de registro com as bordas.

   É a seção 04. Entrou entre a Plataforma e O fim da burocracia, então tudo
   dali para baixo subiu um número (a burocracia virou 05, o FAQ virou 09).
   ============================================================================ */

.tecgente {
  background: var(--grad-dark);
  padding-block: clamp(72px, 9vw, 110px);
  overflow: hidden;
}

/* ---- cabeçalho ---- */
.tg__head { text-align: center; }
.tg__head .eyebrow { justify-content: center; }
/* O eyebrow padrão é pintado para fundo CLARO (--mut no rótulo, --rose no
   número). Aqui o fundo é escuro, e como .tg__head não é um .sec-head não
   herdava a variante on-dark: o rótulo saía apagado e o número, saturado
   demais. Estas duas linhas são as mesmas de .sec-head.on-dark. */
.tg__head .eyebrow { color: var(--n-400); }
.tg__head .eyebrow b { color: var(--rose-soft); }
.tg__title {
  margin-top: 14px;
  font-family: var(--font-disp);
  font-weight: 330;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: #fff;
  max-width: 780px; margin-inline: auto;
}
.tg__sub {
  margin-top: 18px;
  font-family: var(--font-disp);
  font-weight: 300;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: var(--n-400);
  max-width: 660px; margin-inline: auto;
}

/* ---- moldura: recorta os círculos, que sangram por cima e por baixo ---- */
.tg__frame {
  /* geometria dos círculos vive nas regras .tg__circle (proporção da moldura) */

  position: relative;
  margin-top: clamp(40px, 5vw, 64px);
  /* a moldura é MAIS BAIXA que os círculos de propósito: eles sangram por cima
     e por baixo e são recortados por ela, como na referência. */
  --p: 64;                        /* largura dos círculos, em % da moldura */
  /* A moldura tem proporção fixa para CABER os círculos inteiros. Antes ela era
     bem mais baixa que eles e sobravam só dois arcos quase RETOS nas laterais:
     nos extremos horizontais de um círculo a tangente é vertical, então é
     justamente ali que a curvatura não aparece. O que faz a forma ser lida é
     ver as calotas de cima e de baixo.
     Meio-termo: os círculos seguem maiores que a moldura e sangram (~7% de cada
     lado), mas o suficiente da curva fica dentro para o círculo se ler.
     Sem max-height: teto de altura com largura livre voltaria a cortá-los nas
     telas maiores. */
  aspect-ratio: 1.84;
  /* Sem borda e sem overflow: o desenho são só os dois círculos. A .tg__frame
     virou apenas a caixa que define a grade e a proporção — ela não aparece.
     A proporção continua importando: é ela que decide quanto do círculo fica
     dentro da área do conteúdo e, portanto, o quanto a curva se lê. */
  display: grid;
  /* A coluna do meio é a LENTE, não o texto que mora dentro dela.
     Com `auto` ela media os 230px do rótulo, enquanto a lente tem 351: as
     listas paravam onde o texto acabava e entravam 12 a 21px lente adentro.
     Dá para ver a linha de cada item cruzando a borda do círculo.
     A lente mede (2p - 100)% da moldura, então declarar isso aqui faz as
     colunas laterais pararem junto às bordas dela, e o `gap` vira folga de
     verdade em vez de uma distância até um ponto que não importa.

     Uma ressalva: a coluna do grid é % do CONTENT box e a lente é % do PADDING
     box (ela é absoluta), então a folga sai um pouco menor que o gap — metade
     do padding lateral da moldura. Medido, ela fica entre 16px (em 870) e 32px
     (em 2560): sempre positiva, que é o que importa. Igualar os dois exigiria
     somar o padding de volta no calc, e a fórmula ficaria pior de ler do que
     o problema que resolve. */
  grid-template-columns: 1fr calc((2 * var(--p) - 100) * 1%) 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(28px, 3.5vw, 44px) clamp(20px, 4vw, 56px);
}

/* ---- os dois círculos ----------------------------------------------------
   --p = largura de cada círculo, em % da moldura. Um encosta à esquerda, o
   outro à direita, então a interseção mede (2·p - 100)%. Com p=64 a lente fica
   com 44% do diâmetro, que é a proporção da referência. TUDO deriva de --p, inclusive o
   deslocamento interno da lente: os dois valores não podem divergir, e foi
   isso que quebrou a lente no mobile quando eram números soltos. Como o círculo é bem
   mais alto que a moldura, ele sangra por cima e por baixo e é recortado. */
.tg__circle {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: calc(var(--p) * 1%); aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  /* o preenchimento vive nos modificadores: cada círculo tem o seu, espelhado */
}
/* Preenchimento em gradiente LINEAR, não mais radial.
   Em 270deg o 0% fica na borda direita e o 100% na esquerda. Os dois são
   espelhados, e o efeito disso é que o azul de cada um aponta para DENTRO:
   o da esquerda acende na borda direita, o da direita na esquerda. Onde eles
   se cruzam as duas pontas fortes se somam, então a lente ganha peso sem
   precisar de nenhuma camada extra por baixo. */
.tg__circle--l {
  background: linear-gradient(270deg,
    rgba(35, 82, 167, .25) 0%,
    rgba(14, 32, 65, .25) 50%,
    rgba(14, 32, 65, 0) 100%);
}
.tg__circle--r {
  background: linear-gradient(270deg,
    rgba(14, 32, 65, 0) 0%,
    rgba(14, 32, 65, .25) 50%,
    rgba(35, 82, 167, .25) 100%);
}
/* --dx = o quanto cada círculo está AFASTADO do lugar final (o JS anima só ele).
   Os quatro elementos derivam dele e a matemática tem que fechar: a lente é o
   círculo da esquerda recortando o da direita, então ela anda junto com o da
   esquerda (-dx) e o miolo dela anda a diferença entre os dois (+2dx).
   Com dx grande os círculos nem se tocam — e é por isso que o efeito central
   NASCE da convergência, sem precisar ser animado à parte. */
.tg__circle--l { left: 0; transform: translate(calc(var(--dx, 0px) * -1), -50%); }
.tg__circle--r { right: 0; transform: translate(var(--dx, 0px), -50%); }

/* ---- a lente: interseção real, por aninhamento ----------------------------
   O .tg__lens É o círculo da esquerda com overflow:hidden; dentro dele o
   .tg__lens-in É o círculo da direita, também recortando. O que sobra dos dois
   é exatamente a área comum — sem máscara, sem imagem, acompanha qualquer
   tamanho de tela. O `left` é a borda esquerda do círculo da direita medida
   DENTRO da caixa do círculo da esquerda: (100-p)/p. */
.tg__lens {
  position: absolute;
  top: 50%; left: 0; transform: translate(calc(var(--dx, 0px) * -1), -50%);
  width: calc(var(--p) * 1%); aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.tg__lens-in {
  position: absolute;
  top: 0; left: calc((100 - var(--p)) / var(--p) * 100%);
  width: 100%; aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  transform: translateX(calc(var(--dx, 0px) * 2));
  /* sem véu de fundo: a cor vive nas PRÓPRIAS COLUNAS do canvas (cada uma tem
     seu gradiente azul→rosa). Um plano liso por baixo só empastava a trama. */
}
/* o canvas herda a cor daqui: o JS lê getComputedStyle(canvas).color */
/* CONTRA-DESLOCAMENTO — o pulo do gato da entrada.
   O canvas mora dentro do círculo da direita, então sem isto ele viaja junto e
   o efeito "chega da direita" em vez de nascer no encontro. A lente anda -dx e
   o miolo +2dx, ou seja, o canvas herda +dx: devolver -dx o deixa PARADO nas
   coordenadas da moldura. Aí as duas máscaras deslizam por cima de um efeito
   imóvel e o que se vê é ele sendo REVELADO pela interseção que cresce.
   E a interseção sempre nasce no centro: em qualquer dx ela vai de (W-D+dx) a
   (D-dx), cujo meio é W/2 — o dx se cancela. Abre do centro para fora sozinha. */
.tg__fx {
  display: block; width: 100%; height: 100%;
  transform: translateX(calc(var(--dx, 0px) * -1));
}

/* ---- rótulos dos círculos (só no mobile, ver o bloco responsivo) ---- */
.tg__cap { display: none; }

/* invólucro do diagrama: no desktop não existe para o layout, então círculos,
   lente e texto do centro continuam sendo filhos diretos da grade da moldura */
.tg__diagram { display: contents; }

/* ---- colunas ---- */
.tg__col { position: relative; z-index: 1; }
.tg__col--r { text-align: right; }

/* As colunas do grid são 1fr, então elas comiam toda a sobra da moldura e o
   border-bottom de cada item ia junto: numa tela larga a coluna ficava com
   407px para um texto de 254px, ou seja, 153px de linha esticada à toa, com o
   texto jogado contra a borda.
   Limitar a largura e ancorar cada coluna do lado de DENTRO da sua célula
   aproxima os dois blocos do centro e encurta as linhas na mesma medida.
   Só a partir do layout de duas colunas: no empilhado do mobile as colunas
   dividem a largura e têm de continuar coladas nas bordas. */
@media (min-width: 861px) {
  .tg__col { width: min(100%, 300px); }   /* 300 > 254 do item mais largo: não quebra linha */
  .tg__col--l { justify-self: end; }
  .tg__col--r { justify-self: start; }
}
.tg__col-title {
  font-family: var(--font-disp);
  font-weight: var(--fw-med);
  font-size: 15px;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 18px;
}
.tg__list { list-style: none; margin: 0; padding: 0; }
.tg__list li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  font-family: var(--font-disp);
  font-weight: 300;
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.35;
  color: var(--n-400);
}
.tg__list li:last-child { border-bottom: 0; }

/* ---- rótulo do centro, dentro da lente ---- */
.tg__center {
  position: relative; z-index: 1;
  justify-self: center;         /* a célula agora é a lente inteira */
  width: min(24vw, 230px);
  text-align: center;
  font-family: var(--font-disp);
  font-weight: 330;
  font-size: clamp(19px, 2vw, 28px);
  line-height: 1.18;
  letter-spacing: var(--ls-tight);
  color: #fff;
}

/* ---- responsivo: círculos em cima, listas embaixo ---- */
/* ===========================================================================
   MOBILE: mesmo arranjo HORIZONTAL do desktop, só que mais justo.

   Cheguei a empilhar os círculos na vertical, e funcionava, mas a seção subia
   para 1224px de altura: numa tela de telefone virava rolagem sem fim. Lado a
   lado, a mesma composição cabe em pouco mais de um terço disso.

   O que muda em relação ao desktop:
     · --p sobe de 64 para 74. Mais que isso (testei 78) e os dois círculos se
       fundem tanto que o desenho lê como um só: a crescente livre de cada um
       cai para 86px e os rótulos ficam espremidos contra a borda da tela. Com
       74 sobram 101px de cada lado, o bastante para o rótulo numa linha, e a
       lente ainda comporta o texto do centro em duas;
     · os rótulos dos círculos aparecem (no desktop as listas ficam ao lado e
       não haveria onde pô-los);
     · as listas passam de laterais a uma faixa abaixo, ainda lado a lado.

   A altura da faixa dos círculos sai de --p: no arranjo horizontal os dois têm
   a mesma extensão vertical, então a faixa mede um diâmetro. E padding
   percentual resolve contra a LARGURA, que é onde --p está ancorado, então a
   conta fecha sozinha em qualquer tela. Antes isso era um 88vw escrito na mão
   que não conversava com --p.
   =========================================================================== */
@media (max-width: 860px) {
  .tg__frame {
    --p: 74;
    --gut: clamp(20px, 4vw, 56px);
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "diag diag" "esq dir";
    align-items: start;
    row-gap: clamp(28px, 7vw, 48px);
    min-height: 0;
    aspect-ratio: auto;
    /* full-bleed: os círculos usam a padding box como referência, e assim ela
       coincide com a largura das colunas do grid. O respiro lateral volta nas
       listas, mais abaixo. */
    padding-inline: 0;
    padding-top: 0;
  }
  .tg__diagram {
    display: block;
    grid-area: diag;
    position: relative;
    padding-bottom: calc(var(--p) * 1%);   /* = um diâmetro */
  }
  /* posição dos círculos e da lente: idêntica ao desktop, nada a redefinir.
     Só a caixa de referência mudou (o .tg__diagram em vez da moldura). */

  /* ---- rótulos, na parte de cada círculo que a lente não cobre ----
     Essa faixa mede (100 - p)% da largura e fica colada na borda. Cada rótulo
     acompanha o seu círculo no percurso da entrada. */
  .tg__cap {
    display: block;
    position: absolute; top: 50%;
    width: calc((100 - var(--p)) * 1%);
    text-align: center;
    font-family: var(--font-disp);
    font-weight: var(--fw-med);
    font-size: clamp(12px, 3.2vw, 15px);
    line-height: 1.25;
    letter-spacing: var(--ls-tight);
    color: #fff;
  }
  /* PARADOS. Eles não acompanham o percurso do círculo: entram só em fade, já
     no lugar definitivo. Arrastando junto, o olho seguia o texto em vez da
     convergência, que é o que a entrada tem para contar. */
  .tg__cap--p { left: 0;  transform: translateY(-50%); }
  .tg__cap--t { right: 0; transform: translateY(-50%); }

  /* ---- texto do centro: no meio da faixa, e PARADO ----
     Fica fora do .tg__diagram, então se posiciona pela moldura; com o
     padding-top zerado os dois topos coincidem e a mesma conta serve. Não
     leva --dx: como o canvas, ele fica no lugar e a lente é que se abre. */
  .tg__center {
    position: absolute; top: 0; left: 50%;
    /* 66% da largura da lente, e não 86%: a linha ficava comprida demais e
       chegava perto de onde a lente já está estreitando. Mais curta, quebra em
       3 linhas e sobra folga dos dois lados. */
    width: calc((2 * var(--p) - 100) * 0.66%);
    margin-top: calc(var(--p) / 2 * 1%);
    transform: translate(-50%, -50%);
    margin-bottom: 0;
    font-size: clamp(16px, 4.2vw, 22px);
  }

  /* o respiro lateral que saiu da moldura volta aqui */
  .tg__col--l { grid-area: esq; padding-left: var(--gut); }
  .tg__col--r { grid-area: dir; padding-right: var(--gut); }
}
/* No estreito as listas CONTINUAM lado a lado. O que cede é a folga lateral e
   o vão entre elas, não o arranjo. */
@media (max-width: 520px) {
  .tg__frame { --gut: 14px; column-gap: 12px; }
  .tg__list li { font-size: 12.5px; line-height: 1.3; padding: 10px 0; }
  .tg__col-title { font-size: 13.5px; margin-bottom: 12px; }
}

/* sem script ou com reduced-motion o bloco nasce montado: o estado inicial da
   entrada (--dx e opacidade 0) é posto pelo JS, nunca aqui. */