/* Arte da hero de "A empresa" (a convergência).
   Carregado SÓ nesta página (inc/head.php). Antes, toda página baixava a
   arte das quatro heros e usava uma: quem abria a home levava junto o
   ciclo, a convergência e a bifurcação sem ver nenhum dos três.
   ⚠️ O que a régua cobra é o TOTAL por página, style.css mais este.
   Dividir para caber no teto seria contornar a régua, não cumpri-la. */

/* ── A empresa · o funil: quatro frentes, uma conversa ────────────────────
   Substituiu um render de cubo comprado. A hero da home desenha um PERCURSO;
   esta desenha uma CONVERGÊNCIA — mesmo vocabulário de traço, argumento
   diferente, que é o que impede a segunda página de parecer a primeira.
   Sem animação: ambiente animado é exclusividade do hero da home
   (ESTRATEGIA §0.2). */
/* z-index 2 como o .hero__texto: a rede é o fundo (z-index 0) e nenhum
   decorativo pode passar na frente de conteúdo (§6.1) */
.convergencia {
  position: relative;
  z-index: 2;
  margin-top: var(--e8);
  display: grid;
  gap: var(--e4);
  justify-items: center;
}

.convergencia__origens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e3) var(--e5);
  width: 100%;
  max-width: 44rem;
  text-align: center;
}
.convergencia__origens span {
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--navy-200);
}
@media (min-width: 640px) {
  .convergencia__origens { grid-template-columns: repeat(4, minmax(0, 1fr)); }}

/* altura explícita: SVG estirado sem altura nasce 0×0 (§6.1) */
.convergencia__tracos { display: none; width: 100%; max-width: 44rem; height: 4rem; }
@media (min-width: 640px) { .convergencia__tracos { display: block; }}

.convergencia__uma {
  position: relative;
  font-family: var(--fonte-titulo);
  font-size: var(--t3);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--branco);
}
/* No celular as quatro curvas não caberiam legíveis, então o decorativo MUDA
   DE PAPEL em vez de desaparecer (§6.1): as curvas viram uma linha só,
   feita em CSS, com o mesmo degradê frio→marca. */
.convergencia__uma::before {
  content: "";
  position: absolute;
  top: calc(var(--e5) * -1);
  left: 50%;
  width: 1px;
  height: var(--e5);
  background: linear-gradient(var(--elevado), var(--pink-500));
}
@media (min-width: 640px) { .convergencia__uma::before { content: none; }}