/* ============================================================
   FLASH — Seção de resultados (.cred)

   Refinamento de ritmo vertical, grade dos indicadores e faixa de
   logos. O componente React nao e tocado: ele ja monta numero,
   subtitulo, corpo, metricas e marcas a partir do JSON.
   ============================================================ */

/* ------------------------- ritmo vertical ------------------------ */
/* Antes: numero gigante colado no subtitulo, "desde..." com 56px de
   margem e as metricas encostando na faixa de logos. A escada abaixo
   separa os quatro grupos -- numero, subtitulo, apoio, indicadores --
   em vez de deixar tudo com o mesmo respiro. */
#allomni-root .cred .container { padding-block: clamp(8px, 1.4vh, 20px); }
#allomni-root .cred__num {
  line-height: .92; margin-bottom: clamp(14px, 1.8vh, 24px);
  letter-spacing: -.03em;
}
#allomni-root .cred__sub {
  margin-bottom: clamp(10px, 1.2vh, 16px);
  font-size: clamp(19px, 2.1vw, 24px); color: #EEF3FA;
}
#allomni-root .cred__since {
  margin: 0 auto clamp(40px, 5vh, 64px); max-width: 56ch;
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6;
}

/* ---------------------- grade dos indicadores -------------------- */
/* Eram quatro colunas em flex com gap de 64px: com rotulos de tamanhos
   muito diferentes ("300%" ao lado de "Atendimento humanizado") as
   colunas ficavam desalinhadas. Grade de quatro faixas iguais resolve,
   e cada bloco alinha pelo topo. */
#allomni-root .cred__metrics {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  padding: clamp(26px, 3vh, 40px) 0;
  margin-bottom: clamp(26px, 3.2vh, 44px);   /* o fio de baixo separa da faixa */
  align-items: start; text-align: center;
}
#allomni-root .cred__metric { gap: 8px; align-items: center; }
#allomni-root .cred__metric-num {
  font-size: clamp(22px, 2.1vw, 30px); line-height: 1.12;
  letter-spacing: -.01em; text-wrap: balance;
}
#allomni-root .cred__metric-lbl {
  font-size: clamp(13px, 1vw, 14.5px); line-height: 1.5;
  max-width: 24ch; margin: 0 auto; text-wrap: balance;
}

/* -------------------------- faixa de logos ----------------------- */
/* A esteira do site fica como esta: .marquee corta o excesso e apaga as
   pontas com mascara, e .marquee__track roda "marquee 40s linear
   infinite" de 0 ate -50%. Esse -50% so fecha o ciclo porque a lista
   vem repetida duas vezes -- mexer na animacao ou na duplicata quebra a
   emenda. Daqui para baixo entra so o tratamento visual das marcas. */
#allomni-root .marquee--clients { margin-top: clamp(6px, .8vh, 12px); }

/* uma linha so: o trilho ja e width:max-content, e o nowrap impede que
   o flex-wrap herdado do CSS do site quebre a fileira em duas */
#allomni-root .marquee--clients .marquee__track {
  flex-wrap: nowrap; align-items: center;
  gap: clamp(44px, 5vw, 80px);
}
#allomni-root .marquee--clients .marquee__logo {
  flex: 0 0 auto; opacity: 1;              /* a opacidade vai na imagem */
}
/* O ponto separa um nome do outro; entre logos vira ruido. O !important
   e obrigatorio: o componente escreve "display:inline-block" no atributo
   style do proprio span, e estilo inline vence qualquer seletor. */
#allomni-root .marquee--clients .marquee__logo:has(img) > span:first-child,
#allomni-root .marquee--clients .marquee__logo:has(svg) > span:first-child {
  display: none !important;
}

#allomni-root .marquee--clients .marquee__logo img,
#allomni-root .marquee--clients .marquee__logo svg {
  /* A altura vai DIRETO na imagem, nao no item: o <img> e filho de
     .footer__brand-link, que nao tem altura definida, entao um
     "height:100%" ali resolveria para auto e a tela sairia no tamanho
     natural. E o CSS do site limita .brand-logo-img a 38px de altura e
     145px de largura -- max-height vence height, entao os dois tetos
     precisam cair.

     Os PNGs vem com ALTURA de tela fixa (150px) e largura colada na
     marca, que foi escalada por AREA e nao por altura -- igualar altura
     fazia a marca larga parecer tres vezes maior que a quadrada. Como
     so a altura e comum, esta medida e um pouco maior que o desenho
     aparente das marcas mais alongadas. */
  height: clamp(48px, 4.6vw, 64px); width: auto;
  max-height: none; max-width: none;
  object-fit: contain;                    /* nunca distorce a proporcao */
  /* as marcas chegam em cores diferentes: monocromia uniformiza, e o
     brilho compensa as versoes escuras sobre o fundo escuro */
  filter: grayscale(1) brightness(2.2) contrast(.9);
  opacity: .8;                            /* .62 apagava demais o traco fino */
  transition: opacity .25s ease, filter .25s ease;
}
#allomni-root .marquee--clients .marquee__logo:hover img,
#allomni-root .marquee--clients .marquee__logo:hover svg {
  opacity: 1; filter: grayscale(0) brightness(1.15);
}

/* Enquanto o arquivo da logo nao existe, o JS troca a imagem pelo nome da
   marca. Fica proposital em vez de icone quebrado -- e some sozinho
   quando o PNG entra na pasta. */
#allomni-root .marquee--clients .marca-texto {
  font-family: var(--font-display, Montserrat, sans-serif);
  font-weight: 700; font-size: clamp(14px, 1.25vw, 17px);
  letter-spacing: .04em; text-transform: uppercase;
  color: #C2CCDA; opacity: .5; white-space: nowrap;
  transition: opacity .25s ease, color .25s ease;
}
#allomni-root .marquee--clients .marquee__logo:hover .marca-texto {
  opacity: .95; color: #FFFFFF;
}

@media (max-width: 980px) {
  #allomni-root .cred__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  #allomni-root .marquee--clients .marquee__logo img { height: 54px; }
  #allomni-root .marquee--clients .marquee__track { gap: 48px; }
}
@media (max-width: 560px) {
  #allomni-root .cred__metrics { grid-template-columns: 1fr; gap: 20px; }
  #allomni-root .cred__metric-lbl { max-width: 32ch; }
  #allomni-root .marquee--clients .marquee__logo img { height: 46px; }
  #allomni-root .marquee--clients .marquee__track { gap: 36px; }
}

/* Movimento reduzido: a esteira para. Nao da para quebrar em linhas
   porque a lista vem duplicada -- cada marca apareceria duas vezes. A
   fileira vira rolavel: a primeira passagem ja e a lista completa, e a
   mascara das pontas sai para nao esconder o comeco nem o fim. */
@media (prefers-reduced-motion: reduce) {
  #allomni-root .marquee--clients {
    overflow-x: auto;
    -webkit-mask-image: none; mask-image: none;
  }
  #allomni-root .marquee--clients .marquee__track { animation: none; }
  #allomni-root .marquee--clients .marquee__logo img,
  #allomni-root .marquee--clients .marquee__logo svg,
  #allomni-root .marquee--clients .marca-texto { transition: none; }
}