/* Arte da hero de Tráfego pago (o ciclo).
   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. */

/* ── Tráfego pago · a 1ª página de frente ─────────────────────────────────
   Nada aqui inventa uma quarta assinatura visual. A hero reusa a disposição
   e o ambiente da home (.hero__grade, .palco, .rede); as seções reusam
   .secao, .secao--tonal, .secao__cabeca, .lead. O que nasce novo são as
   peças que não existiam: a ARTE desta hero (.ciclo), a lista de escopo
   (.inclusos) e o FAQ (.perguntas). */

/* ── A arte da hero: o CICLO ──────────────────────────────────────────────
   A home desenha um percurso e "A empresa" uma convergência. Esta é a única
   das três que não tem fim: anúncio se acompanha todo dia, e o desenho diz
   isso sendo um anel. Mesmo idioma - traço fino, ponto de luz, rótulo curto -
   com o argumento que só esta página tem.

   Sem caixa em volta de nada: o cartão de vidro é a assinatura da hero da
   HOME (os .no e os .medidor), e repeti-la aqui apagaria o contraste que faz
   aquela valer. */
.ciclo {
  position: relative;
  z-index: 1;
  /* menor que a 1ª versão: os dois indicadores ocupam os cantos do palco
     e o anel precisa deixar o canto livre, como faz o fluxo da home */
  width: min(20rem, 72%);
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
}

.ciclo__anel { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Os marcos que ACENDEM quando o ponto passa por cima.
   ⚠️ Sincronia sem script: é a MESMA animação de 16 s nos quatro, deslocada
   por `animation-delay` NEGATIVO. O ponto leva 4 s de um marco ao seguinte,
   então os atrasos são 0, -12 s, -8 s e -4 s - com delay negativo a animação
   nasce adiantada, e o pico de cada marco cai no instante em que o ponto
   chega nele. Feito por script, pararia de funcionar sem JavaScript.
   ⚠️ `transform-box: fill-box` aqui é o CERTO (ao contrário do pulso, que usa
   view-box): cada círculo cresce em torno de SI mesmo, não do anel. */
.ciclo__halo,
.ciclo__nucleo { transform-box: fill-box; transform-origin: center; }
.ciclo__nucleo { fill: var(--sky-500); }
.ciclo__halo   { fill: var(--pink-300); opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .ciclo__halo   { animation: marco-halo   16s linear infinite; }
  .ciclo__nucleo { animation: marco-nucleo 16s linear infinite; }
  .ciclo__marco-luz--1 .ciclo__halo, .ciclo__marco-luz--1 .ciclo__nucleo { animation-delay: 0s; }
  .ciclo__marco-luz--2 .ciclo__halo, .ciclo__marco-luz--2 .ciclo__nucleo { animation-delay: -12s; }
  .ciclo__marco-luz--3 .ciclo__halo, .ciclo__marco-luz--3 .ciclo__nucleo { animation-delay: -8s; }
  .ciclo__marco-luz--4 .ciclo__halo, .ciclo__marco-luz--4 .ciclo__nucleo { animation-delay: -4s; }}

/* O ponto de luz que percorre o anel.
   ⚠️ `transform-box: view-box`, NÃO `fill-box`: fill-box usaria a caixa do
   próprio grupo - que é o ponto - como origem, e ele giraria em torno de si
   mesmo, parado no lugar. Com view-box a origem é o centro do viewBox, que é
   o centro do anel.
   Era um arco de um quarto de volta: linha longa arrastando lê como borrão, e
   borrão sugere mistura, não processo. */
.ciclo__pulso { transform-box: view-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .ciclo__pulso { animation: ciclo-volta 16s linear infinite; }}

/* O centro nomeia o que o anel faz. É o único texto com peso de título aqui;
   os marcos são rótulos, e rótulo não compete com o H1 ao lado. */
.ciclo__centro {
  margin: 0;
  max-width: 8.5rem;
  text-align: center;
  font-family: var(--fonte-titulo);
  font-size: var(--t3);
  line-height: 1.25;
  color: #FFFFFF;
}
.ciclo__marco {
  position: absolute;
  font-size: var(--t1);
  line-height: 1.3;
  color: var(--navy-200);
  white-space: nowrap;
  letter-spacing: .01em;
}
/* Cada rótulo encosta no SEU marco, por fora do anel.
   ⚠️ A âncora é o CÍRCULO, não a caixa. O raio é 118 de um viewBox de 320,
   ou seja 36.875% do lado: a borda do anel cai em 50% ± 36.875%, e é daí que
   os rótulos saem. Presos à borda da caixa - que foi como nasceram - eles
   ficavam boiando a uma distância que só aumentava junto com o quadrado. */
.ciclo__marco--topo { top: 13.125%; left: 50%; transform: translate(-50%, calc(-100% - .55rem)); }
.ciclo__marco--base { top: 86.875%; left: 50%; transform: translate(-50%, .55rem); }
.ciclo__marco--dir  { top: 50%; left: 86.875%; transform: translate(.75rem, -50%); }
.ciclo__marco--esq  { top: 50%; left: 13.125%; transform: translate(calc(-100% - .75rem), -50%); }

/* Abaixo do desktop o palco vira pilha (a mesma regra da home) e o anel
   encolhe: com os rótulos por fora, ele precisa de margem lateral própria. */
@media (max-width: 1023px) {
  .ciclo { width: min(17rem, 62%); margin-top: var(--e8); margin-bottom: var(--e6); }
  .ciclo__marco { font-size: .8125rem; }}