/* Repete o destaque dos cards enquanto passam pela área de leitura no celular. */
@media (max-width: 720px) {
  .pagina-formacao .formacao-scroll-card.is-scroll-highlighted {
    border-color: rgba(251, 191, 36, 0.26);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(251, 191, 36, 0.06);
  }

  .pagina-formacao .formacao-scroll-card.is-scroll-highlighted::before {
    opacity: 1;
  }

  .pagina-formacao .formacao-scroll-card.is-scroll-highlighted::after {
    opacity: 1;
    transform: scaleY(1);
  }

  .pagina-formacao .formacao-scroll-card.is-scroll-highlighted :is(h3, h4) {
    color: rgba(251, 191, 36, 0.95);
  }

  .pagina-formacao .saint-card-layout.formacao-scroll-card::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.7), rgba(59, 130, 246, 0.5));
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
  }

  .pagina-formacao .saint-card-layout.is-scroll-highlighted::after {
    opacity: 1;
    transform: scaleY(1);
  }

  html.light-mode .pagina-formacao .formacao-scroll-card.is-scroll-highlighted {
    border-color: rgba(217, 119, 6, 0.3);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(217, 119, 6, 0.15);
  }

  html.light-mode .pagina-formacao .formacao-scroll-card.is-scroll-highlighted :is(h3, h4) {
    color: #b45309;
  }

  html.light-mode .pagina-formacao .saint-card-layout.formacao-scroll-card::after {
    background: linear-gradient(180deg, rgba(217, 119, 6, 0.8), rgba(37, 99, 235, 0.6));
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .pagina-formacao .formacao-topic-panel .formacao-scroll-card,
  .pagina-formacao .formacao-topic-panel .formacao-scroll-card::before,
  .pagina-formacao .formacao-topic-panel .formacao-scroll-card::after,
  .pagina-formacao .formacao-topic-panel .formacao-scroll-card :is(h3, h4) {
    transition: none;
  }
}