/* =========================================================
   NORMA — pista que rola (Marquee)

   Estas regras não são novas. São as da faixa de depoimentos, movidas de
   enhancements.css e renomeadas de `.testimonials-*` para `.marquee-*`,
   porque passaram a servir mais do que uma banda. O comportamento é o
   mesmo, linha por linha; o que mudou foi o alcance.

   Duas coisas passaram a ser reguláveis por quem usa o componente, e
   ambas por variável e não por classe nova: a duração
   (--marquee-duration, era 45s fixo) e o sentido (.is-reverse).
   ========================================================= */

/* A máscara nas duas pontas é o que faz a coisa parecer contínua em vez
   de cortada. `mask-image` sem prefixo: o site já assume navegadores com
   color-mix() e :focus-visible. Onde faltar, vê-se a pista inteira sem
   máscara -- degrada para menos bonito, nunca para partido. */
.marquee-viewport {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.marquee-track {
  display: flex;
  gap: var(--space-lg);
  width: max-content;
  /* A pista tem a lista DUAS vezes -- o espelho -- portanto -50% é
     exactamente um comprimento de lista: o fim do original cai no início
     da cópia e a emenda não aparece. Mexer nisto sem mexer no espelho
     parte a emenda. */
  animation: norma-marquee var(--marquee-duration, 45s) linear infinite;
}

.marquee-track.is-reverse { animation-direction: reverse; }

@keyframes norma-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee-track > * {
  display: flex;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
}

/* PARAR AO APROXIMAR é o mínimo quando o conteúdo é para LER: texto que
   foge do olho é uma armadilha, não um efeito. Opcional, porque uma
   fila de marcas não se lê da mesma maneira que um depoimento. */
.marquee-viewport.pauses-on-hover:hover .marquee-track {
  animation-play-state: paused;
}

/* PARAR NO FOCO não é opcional e não tem prop. Seguir um foco de teclado
   para dentro de uma faixa em movimento é impossível; isto não é uma
   preferência de quem monta o componente. */
.marquee-track:focus-within {
  animation-play-state: paused;
}

/* Movimento infinito é o caso que a preferência existe mesmo para
   cobrir. Sem animação a pista fica parada e passa a rolar à mão --
   `overflow-x: auto` devolve o controlo a quem desligou o movimento, em
   vez de o deixar com metade da lista inalcançável. O espelho
   desaparece: duplicado e parado, seria a mesma lista duas vezes. */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; width: auto; }
  .marquee-viewport { overflow-x: auto; mask-image: none; }
  .marquee-track > [data-cms-item-mirror],
  .marquee-track > .marquee-mirror { display: none; }
}

/* =========================================================
   Faixa de marcas e plataformas
   ========================================================= */

/* NASCE VAZIA E ESCONDIDA, como os depoimentos. Sai de `hidden` quando
   js/cms-hydrate.js escrever pelo menos um item real do CMS. PRODUCT.md
   é explícito: não há clientes publicados, e logótipos de cliente estão
   na mesma lista de coisas que não se inventam.

   E há um segundo motivo, próprio desta banda: uma marca de terceiro
   desenhada num site é permitida como MARCA (norma_DESIGN.md admite as
   cores oficiais das plataformas como a única excepção à paleta), mas
   nunca como afirmação de parceria ou endosso -- isso é uma declaração
   separada e aprovada à parte. Quem escreve o título da secção decide o
   que a fila afirma, e essa decisão é de quem edita, não deste
   ficheiro. */
.brandstrip { padding-block: var(--space-3xl); background: var(--color-white); }

.brandstrip-head {
  margin-bottom: var(--space-lg);
  text-align: center;
}

/* O título desta faixa é um MICRO-RÓTULO, não um título de secção -- e
   por isso precisa de desfazer o papel que `.page-home h2` (home.css) dá
   a qualquer h2 da página inicial: 2rem-2.75rem em clamp, max-width de
   18ch, tracking negativo e text-wrap: balance. Sem isto renderiza a
   44px em caixa alta, que foi exactamente o que aconteceu na primeira
   verificação.

   Uma classe própria e não `.brandstrip-head h2`: as duas têm a mesma
   especificidade (0,1,1) e home.css carrega DEPOIS desta folha, portanto
   a regra genérica ganhava por ordem. É o mesmo caminho que
   `.page-home .footer-nav-heading` já usa em home-sections.css, pela
   mesma razão e com a mesma nota. */
.page-home .brandstrip-heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: inherit;
  text-transform: uppercase;
  color: var(--color-onyx-soft);
  max-width: none;
  margin: 0;
  text-wrap: initial;
}

.brandstrip-item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Altura fixa e largura livre: os logótipos chegam do CMS em
     proporções que ninguém controla, e alinhar pela altura é o que faz
     uma fila de formas diferentes ler como uma fila. */
  height: 32px;
  padding-inline: var(--space-2xl);
}

.brandstrip-logo {
  max-height: 32px;
  width: auto;
  /* Sem `src` publicado não há pedido de rede nenhum -- o mesmo que o
     retrato do depoimento faz. */
}

.brandstrip-logo:not([src]) { display: none; }