/* =============================================================================
 * /resources — REGRAS QUE O BUILD NAO TEM
 * =============================================================================
 * Carregada DEPOIS das tres folhas compiladas e depois de zz-correcoes.css,
 * pelo proprio page-resources.php (ver o cabecalho do template: functions.php
 * enfileira uma lista fixa e nao pode ser tocado).
 *
 * Cada bloco abaixo existe porque a classe Tailwind equivalente NAO ESTA no CSS
 * compilado — foram conferidas uma a uma contra as tres folhas. Classe que nao
 * esta compilada nao pinta nada, entao aqui vira regra escrita.
 *
 * CORES. Nenhum hex cru neste arquivo. Tudo sai de var(--gs-*), e onde o
 * desenho precisa de transparencia a mistura e feita com color-mix() sobre o
 * mesmo token. Assim trocar o token troca a pagina inteira, que e o contrato
 * do design system.
 *
 * TIPOGRAFIA. So var(--font-sora) e var(--font-ibm-plex-mono), pelos aliases
 * --font-heading e --font-mono que as folhas compiladas ja declaram.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. A COLUNA LATERAL FIXA (o "col-lg-4" do esqueleto do blog)
 * -----------------------------------------------------------------------------
 * O corpo da pagina e a grade assimetrica do blog: indice a esquerda, trilho a
 * direita. O trilho so faz sentido se acompanhar a rolagem enquanto o indice,
 * que e muito mais alto, passa.
 *
 * MEDIDO no CSS compilado: `sticky` existe (1 ocorrencia), mas
 * `min-[992px]:sticky` NAO existe (0), e nenhuma utilitaria `top-[...]` com o
 * valor de que preciso existe. Sem esta regra o trilho rolaria junto e a
 * metade de baixo da coluna ficaria vazia.
 *
 * O deslocamento reaproveita --gs-anchor-offset (96px), que e a MESMA medida
 * que o tema ja usa para nao esconder ancoras atras do cabecalho fixo. Somo
 * 16px de respiro para o cartao nao encostar na barra.
 *
 * `align-self:start` e obrigatorio: dentro de um grid o item estica por padrao
 * (`stretch`), e um item esticado tem altura igual a da linha — position:sticky
 * nunca tem para onde deslizar. Este e o motivo classico de "sticky nao
 * funciona dentro de grid".
 * -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .gsr-rail {
    position: sticky;
    top: calc(var(--gs-anchor-offset, 96px) + 16px);
    align-self: start;
  }
}

/* -----------------------------------------------------------------------------
 * 1b. O TRILHO PRECISA OCUPAR A COLUNA QUE ELE TEM
 * -----------------------------------------------------------------------------
 * MEDIDO com ROLAGEM REAL — e a medida importa, porque o recorte estatico
 * desliga o sticky e esconde o defeito. Em 1440x900, com a pagina em y=900, a
 * coluna da direita mostra 514px de altura por 517px de largura de branco
 * absoluto: 68% do que se ve da coluna e vazio. O cartao sozinho ocupa 27% da
 * altura total da coluna (244px de 968px).
 *
 * A saida NAO e alargar a grade. `col-span-8` so existe compilada na variante
 * `min-[1200px]:`; trocar 7/5 por 8/4 deixaria a faixa de 992 a 1199 SEM regra
 * de grade nenhuma. E o mesmo tipo de armadilha que ja derrubou o rodape.
 *
 * A saida e o cartao ocupar melhor a largura que ele ja tem, e a coluna ganhar
 * um fim visivel:
 *
 *   PADDING 32px (era 28). Um degrau da escada de vaos, e o cartao passa a ter
 *   respiro compativel com os 517px em que ele esta pousado.
 *
 *   TITULO 24/30 (era 20/26). O cartao e a unica peca de conversao da faixa e
 *   competia em tamanho com o titulo de 18px dos itens do indice ao lado. A 24
 *   ele volta a ser a voz mais alta da linha, que e o papel dele.
 *
 *   A ESPINHA. Um fio de 1px que desce do cartao e se apaga, alinhado com a
 *   margem interna do texto (32px). Nao e enfeite: e a marca de que a coluna
 *   continua e termina ali, em vez de simplesmente acabar no ar. Vocabulario da
 *   casa — mesmo degrade de --gs-primary para transparente dos fios capilares.
 *
 * ⚠️ `position:absolute` E OBRIGATORIO. `.gsr-rail` E o elemento sticky; um
 * ::after no fluxo somaria altura a caixa, e caixa sticky mais alta = curso de
 * deslizamento mais curto — o cartao comecaria a rolar antes da hora. Absoluto,
 * ele desenha fora do calculo de altura.
 *
 * So a partir de 992px: abaixo disso a coluna e static, fica logo abaixo do
 * indice, e uma espinha pendurada no cartao nao marcaria fim de coisa nenhuma.
 * -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .gsr-rail > div {
    padding: 32px;
  }

  .gsr-rail p {
    font-size: 24px;
    line-height: 30px;
  }

  .gsr-rail::after {
    content: "";
    position: absolute;
    top: calc(100% + 48px);
    left: 32px;
    width: 1px;
    height: 200px;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--gs-primary) 30%, transparent),
      transparent
    );
  }
}

/* -----------------------------------------------------------------------------
 * 2. O PLACEHOLDER QUE OCUPA O LUGAR DA THUMBNAIL DE POST
 * -----------------------------------------------------------------------------
 * O esqueleto do blog abre cada item da lista com a imagem destacada do post.
 * A GUIDSE nao tem post, e nenhum asset do template comprado entra aqui.
 *
 * PROPORCAO. As imagens do blog de origem sao 435x277 (medido nos atributos
 * width/height do HTML colhido: 1.570). `aspect-ratio: 435 / 277` reproduz o
 * ritmo vertical do esqueleto sem copiar nada. O CSS compilado tem
 * `aspect-[16/9]` (1.778), que e outra proporcao — por isso a regra e escrita
 * aqui em vez de usar a utilitaria.
 *
 * O fundo e o mesmo vocabulario do resto do site: painel com degrade sutil,
 * hairline e uma malha de 28px identica a que o DarkGridCard do tema ja usa
 * nas suas proprias artes. Nao e imagem, e desenho.
 * -------------------------------------------------------------------------- */
.gsr-cover {
  /* `display:block` e obrigatorio: o elemento e um <div> dentro de um <a>, e
   * aspect-ratio nao se aplica a caixa inline. */
  display: block;
  position: relative;
  aspect-ratio: 435 / 277;
  overflow: hidden;
  border: 1px solid var(--gs-border);
  border-radius: 14px;
  background-color: var(--gs-surface-2);
  background-image: linear-gradient(
    160deg,
    color-mix(in srgb, var(--gs-mint) 10%, transparent) 0%,
    transparent 46%
  );
  color: var(--gs-text-muted);

  /* Acento das artes. Em superficie clara o verde profundo tem contraste; a
   * variante escura troca por mint logo abaixo. O SVG le esta variavel, entao
   * o mesmo desenho serve aos dois fundos. */
  --gsr-accent: var(--gs-primary-deep);
}

/* Malha de 28px — mesma cadencia do .DarkGridCard-module__*__mesh do tema. */
.gsr-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--gs-text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--gs-text) 5%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.gsr-cover > svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* -----------------------------------------------------------------------------
 * 2b. LARGURA DO DESENHO QUANDO O ITEM VIRA LINHA
 * -----------------------------------------------------------------------------
 * A partir de 576px cada area do indice fica deitada: desenho a esquerda, texto
 * a direita (`min-[576px]:flex-row`, que existe compilada). O desenho precisa
 * parar de crescer, senao o flex divide a linha meio a meio e o texto — que e
 * o conteudo — fica espremido.
 *
 * `flex:0 0 auto` + largura fixa resolve. Nao existe utilitaria `basis-*`
 * compilada (medido: `basis-full` = 0 ocorrencias), entao a regra vem daqui.
 *
 * AS DUAS LARGURAS. O criterio e o texto ao lado, nao o desenho: ele fica
 * estreito o bastante para a descricao da area caber sem virar uma coluna
 * fina. 208px so entra a partir de 992px, onde a coluna do indice para de
 * ocupar a largura toda e passa a 7/12 — MEDIDO em 1440px: 747px de coluna.
 * Abaixo de 576px o item empilha e o desenho volta a 100% da largura.
 * -------------------------------------------------------------------------- */
@media (min-width: 576px) {
  .gsr-entry .gsr-cover {
    flex: 0 0 auto;
    width: 186px;

    /* `align-self:flex-start` guarda a proporcao.
     *
     * O item de lista e um flex row e o padrao e `align-items:stretch`: o
     * desenho era esticado ate a altura da coluna de texto e a proporcao saia
     * do lugar. MEDIDO em 991px de viewport, antes desta linha: 186x132, razao
     * 1.406 — o alvo e 1.571, a das imagens de origem. Com flex-start o
     * desenho volta a 186x118 (1.571) em qualquer largura. */
    align-self: flex-start;
  }
}

@media (min-width: 992px) {
  .gsr-entry .gsr-cover {
    width: 208px;
  }
}

/* -----------------------------------------------------------------------------
 * 3. O DESENHO REAGE AO HOVER DO ITEM INTEIRO
 * -----------------------------------------------------------------------------
 * No esqueleto do blog a thumbnail tem zoom no hover do card. Zoom exige
 * imagem; aqui o equivalente e o desenho ganhar presenca — a malha clareia e o
 * acento sobe de intensidade. Mesma duracao e mesma curva que o tema usa nos
 * cartoes (--motion-base / --motion-ease), para o movimento nao destoar.
 * -------------------------------------------------------------------------- */
.gsr-cover,
.gsr-cover::before {
  transition:
    background-color var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease),
    opacity var(--motion-base) var(--motion-ease);
}

/* `:focus-within` ao lado de `:hover` em TODAS as tres regras.
 *
 * O alvo e um <a> que ocupa o item inteiro; quem navega por teclado ja recebe o
 * anel de foco, mas sem isto o desenho ficava inerte e o item lido pelo teclado
 * respondia menos que o item apontado pelo mouse. Mesma reacao para os dois
 * caminhos de entrada. */
.gsr-entry:hover .gsr-cover,
.gsr-entry:focus-within .gsr-cover {
  border-color: color-mix(in srgb, var(--gs-text) 35%, transparent);
  background-color: var(--gs-surface);
}

.gsr-entry:hover .gsr-cover::before,
.gsr-entry:focus-within .gsr-cover::before {
  opacity: 0.55;
}

/* O DESENHO ACENDE — vocabulario da camada de efeitos, sem elemento novo.
 *
 * `.fx-bead` acende com `drop-shadow` duplo (perto + longe) em vez de um
 * segundo elemento. Aqui o mesmo recurso vale para a arte inteira da area: um
 * unico `drop-shadow` sobre o <svg> que ja esta na pagina. Nao ha marcacao
 * nova, nao ha animacao em repouso — so uma transicao que responde a uma acao
 * real do visitante (apontar ou focar o item).
 *
 * `filter` e a unica propriedade fora de transform/opacity que esta folha
 * anima, e e em 4 elementos, so durante o hover. */
.gsr-cover > svg {
  transition: filter var(--motion-base) var(--motion-ease);
}

.gsr-entry:hover .gsr-cover > svg,
.gsr-entry:focus-within .gsr-cover > svg {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gs-primary) 42%, transparent));
}

@media (prefers-reduced-motion: reduce) {
  .gsr-cover,
  .gsr-cover::before,
  .gsr-cover > svg {
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
 * 4. VARIANTE ESCURA DO MESMO PLACEHOLDER
 * -----------------------------------------------------------------------------
 * O painel grande da secao do guia fica sobre fundo escuro. Mesma estrutura,
 * tokens trocados; o acento vira mint porque o verde profundo nao sobrevive
 * sobre --gs-surface-dark-1.
 * -------------------------------------------------------------------------- */
.gsr-cover-dark {
  border-color: var(--gs-border-dark);
  background-color: color-mix(in srgb, var(--gs-core-black) 55%, transparent);
  background-image: linear-gradient(
    160deg,
    color-mix(in srgb, var(--gs-mint) 12%, transparent) 0%,
    transparent 52%
  );
  color: var(--gs-text-muted-on-dark);
  --gsr-accent: var(--gs-mint);
}

.gsr-cover-dark::before {
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--gs-text-on-dark) 6%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--gs-text-on-dark) 6%, transparent) 1px, transparent 1px);
}

/* O painel do guia nao e um item de lista: ele acompanha a altura do texto ao
 * lado, entao a proporcao fixa sai a partir de 992px.
 *
 * `height:100%` FECHA A LINHA DE BASE DA SECAO. MEDIDO em 1440: as duas celulas
 * da grade vao de y=1971 a y=2377, mas o painel parava em 2329 — 48px de
 * desalinhamento entre o pe do desenho e o pe do texto, bem no lugar onde a
 * secao termina e o olho procura uma linha reta.
 *
 * ⚠️ O `min-height` FICA, e como PISO — nao trocar um pelo outro. `height:100%`
 * so tem valor se a celula tiver altura definida; no dia em que alguem puser
 * `align-items:start` nessa grade, a percentagem vira `auto` e o painel
 * colapsaria para a altura do SVG. Os 320px sao a rede. */
@media (min-width: 992px) {
  .gsr-panel {
    aspect-ratio: auto;
    min-height: 320px;
    height: 100%;
  }
}

/* A FAIXA DO MEIO — onde o painel virava um cartaz.
 *
 * Entre 576 e 991px a secao ainda e de coluna unica: o painel ocupa a largura
 * inteira do container e a proporcao 435/277 herdada de `.gsr-cover` o
 * transforma num bloco enorme. MEDIDO em 768: 723x460, ou seja 43% de toda a
 * faixa gasto em desenho ANTES do eyebrow — o titulo da secao so aparecia 500px
 * depois do inicio dela. O override de 992 nao alcancava aqui.
 *
 * 320px e a mesma altura do piso de 992: a arte tem a mesma presenca nos dois
 * regimes e a rolagem chega ao texto quase de imediato. Abaixo de 576 a
 * proporcao volta a valer — nessa largura 435/277 ja da uma caixa curta. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .gsr-panel {
    aspect-ratio: auto;
    height: 320px;
  }
}

/* -----------------------------------------------------------------------------
 * 5. O SINAL DE QUALIFICACAO
 * -----------------------------------------------------------------------------
 * Os cinco sinais sao os cinco trechos da frase que ja esta na pagina, listados
 * um a um. Cada um recebe um tracinho de acento a esquerda — o mesmo marcador
 * que page-insights.php usa nos seus pilares, para as duas paginas irmas
 * lerem igual.
 *
 * `grid-cols-[auto_1fr]` NAO esta no CSS compilado (medido: 0 ocorrencias);
 * por isso o alinhamento marcador/texto e escrito aqui.
 * -------------------------------------------------------------------------- */
.gsr-signal {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
}

.gsr-signal::before {
  content: "";
  margin-top: 0.62em;
  width: 12px;
  height: 1.6px;
  border-radius: 2px;
  background-color: var(--gs-mint);
}

/* -----------------------------------------------------------------------------
 * 5b. O QUINTO SINAL NAO FICA ORFAO
 * -----------------------------------------------------------------------------
 * Cinco itens em duas colunas deixam o ultimo sozinho, com um retangulo vazio
 * do mesmo tamanho ao lado. E por azar o quinto e justamente o unico que quebra
 * em duas linhas: MEDIDO em 1440, 39px de altura em 367px de largura, com
 * 367x39 de buraco a direita — falta de largura ao lado de largura sobrando.
 *
 * Ocupando a linha inteira ele passa a 747px, cai para uma linha e o <ul>
 * encolhe de 102 para 83px. Orfao e defeito, nao estilo.
 *
 * `:nth-child(odd)` E A PROTECAO, nao enfeite de seletor: se um dia a lista
 * virar seis sinais, o sexto e par e a regra simplesmente nao dispara. Sem essa
 * guarda, o ultimo item de uma lista par atravessaria a grade sem motivo.
 * -------------------------------------------------------------------------- */
@media (min-width: 576px) {
  .gsr-signal:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
}

/* -----------------------------------------------------------------------------
 * 5c. OS SINAIS PERTENCEM AO PARAGRAFO, NAO AO BOTAO
 * -----------------------------------------------------------------------------
 * MEDIDO na coluna de texto da faixa 3, de cima para baixo: 16 / 24 / 32 / 32.
 * Os cinco sinais sao a enumeracao do paragrafo imediatamente acima deles — e
 * estavam a distancia IGUAL do paragrafo que os gera e do link que vem depois.
 * Com vaos iguais nao ha grupo: a leitura nao sabe se a lista fecha o paragrafo
 * ou abre o CTA.
 *
 * 24 acima e 48 abaixo — os dois degraus vizinhos da escada de vaos da casa —
 * amarram a lista ao paragrafo e destacam o link como o proximo passo.
 *
 * O ALVO E `:has`, e de proposito. Nao ha classe no <ul>, e nenhuma vai ser
 * acrescentada por um numero: o que identifica essa lista e ter `.gsr-signal`
 * dentro, que e exatamente o que o seletor diz. As folhas compiladas ja usam
 * `:has` em dezenas de regras, entao o alvo suporta; e se nao suportasse, as
 * duas regras simplesmente nao casariam e ficaria o 32/32 de hoje. Degrada, nao
 * quebra. */
ul:has(> .gsr-signal) {
  margin-top: 24px;
}

ul:has(> .gsr-signal) + div {
  margin-top: 48px;
}

/* -----------------------------------------------------------------------------
 * 6. NUMERACAO DO INDICE
 * -----------------------------------------------------------------------------
 * `tabular-nums` nao esta compilada (medido: 0). Sem ela, "01" e "04" ficam com
 * larguras diferentes e a coluna de numeros do indice desalinha.
 * -------------------------------------------------------------------------- */
.gsr-num {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  transition: color var(--motion-fast) var(--motion-ease);

  /* 13px, nao 11. O ordinal e o unico elemento mono da faixa clara e a 11px ele
   * lia como legenda de rodape em vez de indice. Dois pixels devolvem o peso de
   * marcador sem chegar perto do titulo de 18px que vem logo abaixo. */
  font-size: 13px;
}

/* O TRACINHO — o verde de marca que faltava na faixa branca.
 *
 * MEDIDO na area do indice: 0,104% dos pixels amostrados tinham verde, e todo
 * ele estava DENTRO do cartao escuro do trilho. Sao 1157px de altura de faixa
 * clara — o corpo principal da pagina — sem uma unica marca da cor acima de
 * 16px, enquanto as outras tres faixas tem conector, linha mint e campo de
 * fios. Faixa clara com mais de 600px de altura carrega pelo menos uma marca de
 * 16px+ numa das dimensoes: e o contrato.
 *
 * POR QUE UM TRACINHO E NAO OUTRA COISA. E literalmente o mesmo gesto que
 * `.gsr-signal::before` ja usa na faixa 3 — regua curta, 2px, encostada no item
 * que ela marca. As duas listas da pagina passam a falar a mesma lingua em vez
 * de cada uma inventar o seu vocabulario.
 *
 * E LEGITIMO EM SUPERFICIE CLARA porque nao e texto e nao e enfeite: e
 * geometria de 2px que MARCA um ordinal, quatro ocorrencias na secao (uma por
 * area), que e o teto. Texto continua em --gs-primary-deep, que e quem tem
 * contraste aqui. */
/* O tracinho usa o MESMO verde do ordinal que ele sublinha.
 *
 * Estava em `--gs-primary` (#00c589) a 8px de um `--gs-primary-deep`: dois
 * verdes diferentes lado a lado, e o acento mais claro que a etiqueta que ele
 * marca — 2,25:1 contra o branco. Era tambem o unico #00c589 de toda a faixa
 * clara, onde a arte da capa, a setinha e o CTA usam o verde profundo. */
.gsr-num::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  margin-top: 8px;
  background: var(--gs-primary-deep);
}

/* ENTRELINHA DO CORPO DO CARTAO.
 *
 * MEDIDO: 14px/20px = 1,43, a entrelinha mais apertada da rota, e justamente no
 * unico texto que quebra linha dentro do cartao (2 linhas em 461px, ~66
 * caracteres). O resto da pagina anda em 1,65 e os sinais da faixa 3 em 1,50 —
 * o cartao era o ponto fora da curva.
 *
 * Escrito a mao de proposito. A utilitaria equivalente nao entra aqui: esta
 * folha e o lugar contratado para o que a rota precisa, e uma classe a mais no
 * template seria uma dependencia do build para ganhar um numero. */
.gsr-body {
  line-height: 1.6;
}

/* O numero sobe de intensidade junto com o resto do item: verde profundo ->
 * verde da marca. E o mesmo par de tokens que a arte usa em `--gsr-accent`, so
 * que na direcao contraria, entao o item inteiro clareia em bloco. */
.gsr-entry:hover .gsr-num,
.gsr-entry:focus-within .gsr-num {
  color: var(--gs-primary);
}

/* A BORDA DO CARTAO NO HOVER — verde de marca, nao cinza.
 *
 * `.gs-card-border-hover:hover` (0,2,0) manda a borda para
 * `color-mix(--gs-text 35%)`, um cinza neutro: o cartao reagia com a cor do
 * TEXTO, nao com a cor da marca, e a unica coisa da pagina que ficava verde ao
 * apontar era o ordinal. Esta regra e (0,3,1) e vence a compilada sem
 * `!important` e sem tocar em `--gs-border`, que e token compartilhado pelas 14
 * rotas.
 *
 * `:focus-within` junto pelo mesmo motivo do bloco 3: o desenho e o ordinal ja
 * reagem aos dois caminhos de entrada, e deixar a borda so no mouse quebraria o
 * par. Duas propriedades no minimo por controle real — aqui sao tres (borda,
 * ordinal, sublinhado do titulo). */
.gsr-entry a.gs-card-border-hover:hover,
.gsr-entry a.gs-card-border-hover:focus-within {
  border-color: color-mix(in srgb, var(--gs-primary) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .gsr-num {
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
 * 7. O CONECTOR NEON — A RAMIFICACAO
 * -----------------------------------------------------------------------------
 * QUE RELACAO ESTE DESENHO AFIRMA, e por que e a unica honesta aqui.
 *
 * Esta pagina e um HUB, nao um fluxo. As quatro areas de `s02Cards` — Demos,
 * Insights, Help Center, FAQ — nao acontecem em sequencia: nenhuma depende da
 * anterior, nenhuma produz a proxima. Liga-las com uma seta seria mentir sobre
 * a relacao, e a numeracao 01..04 do indice ja empurra o olho para a leitura
 * errada (lista numerada le como ordem).
 *
 * A relacao VERDADEIRA e ramificacao: um ponto de partida, quatro destinos
 * paralelos. Entao o desenho e exatamente isso — uma porta de origem, um tronco
 * curto, e quatro filamentos que se abrem SIMETRICAMENTE (-5,5 / -1,7 / +1,7 /
 * +5,5 graus na saida da bifurcacao) para quatro portas iguais, alinhadas na
 * MESMA coluna. Mesmo x, mesmo raio, mesma cor: nada distingue uma da outra,
 * que e a afirmacao. Se as portas estivessem em x diferentes, voltaria a
 * insinuar ordem.
 *
 * ONDE. Na faixa do banner, deitado na sua tarja inferior — a ultima coisa
 * antes das quatro areas. Fica no espaco que ja era vazio: o conteudo do heroi
 * termina em y=518 e a secao em y=618 (MEDIDO a 1440x900), ou seja os 100px de
 * `pb-[100px]`. Nao empurra nada, nao cobre nada.
 *
 * POR QUE NAO NO TRILHO. A outra opcao seria ligar o trilho ao conteudo, mas o
 * trilho e um cartao de conversao sticky que JA se move sozinho com a rolagem —
 * empilhar um segundo movimento nele era a coisa que o briefing proibiu. E o
 * conector precisa de fundo escuro: `mix-blend-mode: screen` sobre a superficie
 * clara da faixa 2 simplesmente apaga o efeito.
 *
 * A CAIXA. `aspect-ratio` igual ao viewBox (1440/100) com `max-height` preso ao
 * padding inferior de cada breakpoint, para a fita nunca invadir o texto:
 *
 *     largura da secao   altura natural   pb da secao   max-height
 *     768                 51px             68px          60px
 *     992                 68px             88px          84px
 *     1425 (vw 1440)      99px            100px          96px
 *
 * Ate ~1500px a fita e full-bleed; acima disso o `max-height` prende a altura e
 * o `preserveAspectRatio="xMidYMax meet"` do SVG apenas centraliza o desenho —
 * nunca deforma. Abaixo de 768px ela sai de cena: sobrariam 47px de altura e o
 * desenho viraria um risco.
 *
 * ⚠️ CENTRALIZACAO POR `margin`, NAO POR `transform`. A fita e um
 * `.tj-fade-anim`, e `.tj-fade-anim.is-revealed` (0,2,0) declara
 * `transform: translate(0)` — mais especifico que qualquer `.gsr-wire`
 * (0,1,0). Um `translateX(-50%)` aqui morreria no instante do reveal e o
 * desenho pularia para o lado. `left/right:0` + `margin-inline:auto` centraliza
 * sem tocar em `transform`.
 * -------------------------------------------------------------------------- */
.gsr-wire {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-inline: auto;
  width: min(100%, 1440px);
  aspect-ratio: 1440 / 100;

  /* Mesma tarja z das outras artes do banner (`z-[-1]` nos dois <div> irmaos):
   * acima do fundo da secao, abaixo do texto. A secao ja e `isolate`, entao o
   * -1 nao escapa para o resto da pagina. */
  z-index: -1;
  pointer-events: none;

  /* O FURO DO ANEL VALE A SUPERFICIE EM QUE ELE ESTA POUSADO.
   *
   * O furo nao e furo: e fundo pintado, e a camada compartilhada resolve isso
   * pela variavel `--fx-surface`. O padrao dela e `--gs-core-black`, que acerta
   * sobre `--gs-surface-dark-3` (a faixa 4); o banner e `--gs-surface-dark-1`.
   * Sem esta linha o miolo de cada anel fica um disco visivelmente mais escuro
   * que a faixa em volta.
   *
   * Trocar a VARIAVEL, e nao reescrever a regra `.fx-port`, e o contrato que a
   * camada pede — assim o furo acompanha se a regra mudar la.
   *
   * NAO leva `.fx-on-light`: aquela classe e para secao CLARA, e as duas faixas
   * em que esta pagina usa efeito sao escuras (banner `--gs-surface-dark-1`,
   * fecho `--gs-surface-dark-3`). A faixa 2, que e branca, nao tem efeito
   * nenhum — nao ha nada nela para o anel preto estragar. */
  --fx-surface: var(--gs-surface-dark-1);
}

.gsr-wire svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .gsr-wire {
    display: block;
    max-height: 60px;
  }
}

@media (min-width: 992px) {
  .gsr-wire {
    max-height: 84px;
  }
}

@media (min-width: 1200px) {
  .gsr-wire {
    max-height: 96px;
  }
}

/* -----------------------------------------------------------------------------
 * 7b. A IGNICAO — o unico movimento do conector, e ele acontece UMA vez
 * -----------------------------------------------------------------------------
 * O conector NAO usa `data-fx-flow`. Nesta pagina nao ha processo rodando: um
 * tracejado marchando em loop no hub de conteudos seria decoracao fingindo
 * status, que e exatamente o que a referencia proibe. Ver o relato da equipe.
 *
 * O que existe e uma entrada: quando a faixa cruza a linha de reveal, o
 * filamento se DESENHA da origem ate as portas e para. Isso nao afirma estado
 * nenhum — afirma que a pagina esta chegando, que e o mesmo que os `tj-fade-anim`
 * ao redor ja dizem. Um disparo, `forwards`, fim.
 *
 * OS QUATRO ACENDEM JUNTOS. `pathLength="100"` normaliza os quatro caminhos, que
 * tem comprimentos reais diferentes, para o mesmo comprimento logico: com o
 * mesmo `dasharray` e o mesmo delay, os quatro chegam as suas portas no MESMO
 * instante. Uma cascata escalonada leria como ordem — o oposto do que o desenho
 * afirma. Aqui o escalonamento seria um erro de conteudo, nao de gosto.
 *
 * `dasharray: 100` sobre `pathLength: 100` = traco de 100 + vao de 100. Com
 * `dashoffset: 100` o caminho inteiro cai dentro do vao (invisivel); em 0, o
 * traco cobre o caminho inteiro. Sem sobra e sem salto — a mesma aritmetica que
 * `fx-march` exige em `zz-efeitos.css`.
 *
 * O DELAY VEM DA MARCACAO. `var(--fade-delay)` e a MESMA custom property que o
 * `.tj-fade-anim` da fita ja carrega no `style`. Uma fonte de verdade: mudar o
 * atraso no template move o fade e a ignicao juntos, e eles nunca saem de fase.
 *
 * Sem JS a classe `is-revealed` nunca chega e a fita fica invisivel — igual a
 * todos os outros `tj-fade-anim` da pagina. Comportamento consistente, nao caso
 * especial.
 * -------------------------------------------------------------------------- */
.gsr-wire .fx-glow,
.gsr-wire .fx-core {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.gsr-wire.is-revealed .fx-glow,
.gsr-wire.is-revealed .fx-core {
  animation: gsr-ignite calc(var(--motion-entrance) * 1.6) var(--motion-ease)
    var(--fade-delay, 0ms) forwards;
}

@keyframes gsr-ignite {
  to {
    stroke-dashoffset: 0;
  }
}

/* -----------------------------------------------------------------------------
 * 8. O CAMPO DE FIOS CAPILARES — um, e e este
 * -----------------------------------------------------------------------------
 * UM POR PAGINA, e o fecho e o lugar. As outras tres faixas ja tem textura
 * propria: o banner tem o halo desfocado e o `.gs-dot-grid`, a faixa 2 e clara
 * (e `screen` sobre superficie clara nao pinta nada), a faixa 3 tem
 * `.gs-section-pattern`. A faixa 4 e a unica superficie CHAPADA do site inteiro
 * — `--gs-surface-dark-3` puro — e a mais vazia: 442px de altura para um titulo
 * e dois botoes, com as duas laterais completamente livres (MEDIDO a 1440x900:
 * conteudo entre x=380 e x=1045, sobrando 380px de cada lado). E area vazia
 * resolvida com textura, sem inventar conteudo.
 *
 * O TECIDO, NAO O BURST. Nenhum `data-fx-burst="full"`: sem nucleo aceso, sem
 * `core-glow` pulsando. `.fx-field-layer` ja segura a opacidade em 0.34, que e
 * o ponto em que o fundo se percebe sem se olhar.
 *
 * AS QUATORZE HASTES. `data-fx-rays="14"` em vez das 30 do padrao, e a razao e
 * orcamento de movimento, medida com o proprio gerador: cada haste rende 1 ou 2
 * bolinhas viajando mais uma parada que cintila, entao 30 hastes = 61 elementos
 * animados so aqui — acima do teto de ~40 desta pagina antes de qualquer outra
 * coisa entrar. Com 14 sao 22 bolinhas + 9 cintilando = 31, e sobra folga para
 * a ignicao do conector.
 *
 * E as 22 so gastam frame enquanto a faixa esta na tela: o observador do
 * `efeitos.js` agora vigia `[data-fx-field]` e chama `pauseAnimations()` na
 * saida. Como o fecho e a ULTIMA faixa da pagina, na maior parte da visita ele
 * esta parado — mais um motivo para o campo estar aqui e nao no banner, que
 * fica visivel desde o primeiro frame.
 *
 * O ENQUADRAMENTO, que e o motivo de os quatro atributos estarem escritos.
 *
 * O SVG do gerador e 1000x625 com `preserveAspectRatio="xMidYMid slice"`: ele
 * recorta como `background-size: cover` e ancora no CENTRO. Na caixa de
 * 1425x442 (MEDIDO a 1440x900) a escala e 1.425 e sobra visivel apenas a faixa
 * y=157..467 do viewBox — 310 unidades de altura para 1000 de largura.
 *
 *   origem "8 76"  -> (80, 475). Encostada no canto inferior esquerdo da janela
 *                     visivel: o no de origem fica logo abaixo da borda, entao
 *                     nao ha o "ponto quente" que o dono desconfiou no burst —
 *                     ve-se o leque, nao o nucleo. A origem padrao ("14 88" =
 *                     y=550) cairia longe demais, e o trecho mais aceso dos
 *                     fios (o centro do `radialGradient`) sumiria no corte.
 *
 *   abertura "-66 2" -> a janela e 3.2x mais larga que alta, entao o leque tem
 *                     de ser DEITADO. Com a abertura padrao ("-96 6") metade
 *                     das hastes apontava para cima e saia do quadro em 310
 *                     unidades, deixando o terco direito da faixa vazio. Aqui a
 *                     diagonal ate o canto superior direito e -20 graus, e o
 *                     leque cobre de -66 a +2 em volta dela.
 *
 *   alcance 1060   -> as hastes rasas atravessam os 1000 de largura inteiros em
 *                     vez de morrer no meio. O gerador ainda encurta as das
 *                     pontas do leque (peso `sin(pi*t)`), que e o que impede a
 *                     ponta do tecido de formar um arco desenhado.
 * -------------------------------------------------------------------------- */

/* O campo e `position:absolute` com `z-index:0`, entao ele pinta ACIMA de
 * qualquer irmao NAO posicionado — inclusive do texto do fecho. Elevar o
 * conteudo e obrigacao de quem consome a camada. */
.gsr-fecho > .tj-container {
  position: relative;
  z-index: 1;
}

/* A COSTURA ENTRE AS DUAS FAIXAS ESCURAS.
 *
 * `--gs-surface-dark-1` (faixa 3) e `--gs-surface-dark-3` (faixa 4) tem 1,10 de
 * contraste entre si: encostadas e sem borda, elas se leem como UMA faixa de
 * 1100px, e o fecho perde o estatuto de fecho. O unico sinal de fronteira que
 * havia era acidental — o brilho do `.gs-section-pattern` da faixa 3 cortado num
 * degrau seco, que e um artefato, nao uma decisao.
 *
 * Um fio de mint a 14% e o suficiente: nao desenha uma regua, so diz que ali
 * comeca outra coisa. Mesmo vocabulario de hairline que os cartoes usam.
 *
 * ⚠️ A borda soma 1px a caixa da secao, e o bloco 8 acima documenta o
 * enquadramento do campo de fios medido numa caixa de 1425x442. Com a borda o
 * conteudo passa a 441 e o recorte desloca menos de meia unidade do viewBox —
 * dentro do erro do calculo, mas fica anotado para quem refizer a conta. */
.gsr-fecho {
  border-top: 1px solid color-mix(in srgb, var(--gs-mint) 14%, transparent);
}

/* -----------------------------------------------------------------------------
 * 8b. A ARTE DO CARTAO EM TELA ESTREITA
 * -----------------------------------------------------------------------------
 * A proporcao 435/277 do bloco 2 e a do feed de origem e vale onde o desenho
 * tem largura. Abaixo de 576px o item empilha, o desenho volta a 100% e MEDIDO
 * em 390 cada capa ocupa 45-47% da altura do proprio cartao — quase metade do
 * cartao e uma arte cujos detalhes internos, nessa escala, ja estao abaixo do
 * limiar de leitura: viram textura.
 *
 * Achatada para 435/210 a capa cai para ~34% do cartao, continua identificando
 * a area (que e a funcao dela) e a faixa devolve cerca de 188px de rolagem que
 * nao dizia nada. Arte que identifica pode ficar; arte que so ocupa, nao.
 * -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .gsr-entry .gsr-cover {
    aspect-ratio: 435 / 210;
  }
}

/* -----------------------------------------------------------------------------
 * 9. MOVIMENTO REDUZIDO — inclusive o que ESTA FOLHA escreveu
 * -----------------------------------------------------------------------------
 * O QUE ESTA FOLHA TEM DE DESLIGAR — e o que ela NAO precisa desligar.
 *
 * SEU. As transicoes de `.gsr-cover`, do <svg> dentro dele e do `.gsr-num` estao
 * zeradas nos blocos 3 e 6, cada uma ao lado da regra que a criou. Falta aqui a
 * unica animacao que esta pagina escreveu: a ignicao do conector.
 *
 * ⚠️ E ela NAO se desliga sozinha. `reveal.js` poe `is-revealed` de proposito
 * mesmo com movimento reduzido — o modulo documenta que nao testa a media
 * query, porque o CSS compilado ja neutraliza o `.tj-fade-anim`. Entao a
 * animacao dispararia assim mesmo. E nao basta parar: o estado de repouso e
 * `dashoffset:100`, que deixa o desenho INVISIVEL. Congelar aqui apagaria o
 * conector da pagina. Tem de voltar a linha inteira — `dasharray:none` e
 * `dashoffset:0` — que e o desenho completo, so que sem a entrada.
 *
 * DA CAMADA, nao meu. O cintilar das paradas, a marcha do tracejado e o respiro
 * do nucleo saem no bloco de movimento reduzido de `zz-efeitos.css`. E as
 * bolinhas que VIAJAM pelos fios — que sao SMIL (`<animateMotion>`) e que
 * nenhuma regra CSS alcanca — saem no `efeitos.js`, que chama
 * `svg.pauseAnimations()` no campo. Nao ha nada a fazer aqui por elas: uma copia
 * local dessa correcao seria uma segunda fonte de verdade para o mesmo defeito,
 * e as duas divergiriam na primeira vez que a camada mudasse de ideia.
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gsr-wire .fx-glow,
  .gsr-wire .fx-core,
  .gsr-wire.is-revealed .fx-glow,
  .gsr-wire.is-revealed .fx-core {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}