/* Marquee de temas — HR4Results 2027 (Home)
 *
 * Medidas do Figma "HR427 Central", canvas de 1920px.
 *   linha 1: 735:6675 | linha 2: 735:6661 (opacity .6)
 *
 * Convenções: px/vw nunca rem; hex cru quando não há token.
 */

.marquee {
  /* Figma: fica sobre a faixa 705:4462 (navy com tint roxo) */
  background-color: #00122f;
  color: #cdff82;
  font-family: var(--font-family, "Inter", Helvetica, Arial, sans-serif);
  /* Figma: linhas em y=7133 e 7246, alturas 89 e 71 */
  padding: 2% 0;
  overflow: hidden;
}

.marquee__linha {
  overflow: hidden;
  /* Figma 735:6353 — padding 10px */
  padding: 10px 0;
}

/* Figma 735:6661 — a segunda linha tinha opacity .6; por decisao de 2026-10-01
   as DUAS linhas ficam a 0.6, para a faixa inteira ter o mesmo peso. */
.marquee__linha { opacity: 0.6; }

.marquee__fita {
  display: flex;
  width: max-content;
  animation: marquee-rolar 40s linear infinite;
}

.marquee__linha--dois .marquee__fita {
  animation-direction: reverse;
  animation-duration: 52s;
}

.marquee__grupo {
  display: flex;
  align-items: center;
  /* Figma: gap de 40px entre os itens */
  gap: 40px;
  margin: 0;
  padding: 0 20px 0 0;
  list-style: none;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  white-space: nowrap;
}

/* Figma 735:6292 — Inter Medium 70.771px (→ 52.34px, reescalado pelo fator do container 1136/1536), tracking -0.04em, preenchimento
   em degradê #cdff82 -> #d4c1ff recortado no texto */
.marquee__tema {
  font-family: var(--title-font-family, "Inter", Helvetica, Arial, sans-serif);
  font-size: clamp(28px, 2.726vw, 52.34px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
  background-image: linear-gradient(90deg, #cdff82 0%, #d4c1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Fallback: sem background-clip:text, o texto fica verde sólido em vez de sumir */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .marquee__tema { background-image: none; color: #cdff82; }
}

/* Figma 735:6303 — separador em 50px, #cdff82 sólido */
.marquee__separador {
  font-size: clamp(20px, 2.604vw, 50px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: #cdff82;
}

@keyframes marquee-rolar {
  from { transform: translateX(0); }
  /* -50% porque a fita tem duas cópias do mesmo grupo */
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__fita { animation: none; }
  .marquee__linha { overflow-x: auto; }
}

/* ---------- Âncoras ---------- */
/* Respiro acima da seção quando se chega nela por um link #ancora.
   Valor definido pela Paloma em 2026-10-02. */
.marquee {
  scroll-margin-top: 40px;
}

/* ---------- Desktop ---------- */
/* Tamanho definido pela Paloma em 2026-10-02. O separador acompanha o tema,
   senao os dois desencontram de tamanho na mesma linha. */

@media (min-width: 80em) {
  .marquee__tema { font-size: 60px; }
  .marquee__separador { font-size: 60px; }
}