/* ==========================================================================
   COMPONENTE: TRILHO DE PROGRESSO PARA SCROLL HORIZONTAL
   --------------------------------------------------------------------------
   Substitui "dots" genéricos por um trilho fino com um segmento ativo que
   se desloca e redimensiona consoante o item em vista — o mesmo vocabulário
   visual do emblema da Hero (anéis finos, dourado sobre navy/creme) e do
   contador editorial ("01 — 04") já usado no resto do site.

   Usado em qualquer secção com scroll horizontal em mobile (Espaço,
   Processo, Benefícios): cada secção só precisa de instanciar o HTML e
   passar o nº de itens; o JS (scroll-rail.js) faz a sincronização com o
   scroll real via IntersectionObserver.

   Este componente só aparece no breakpoint em que a secção-mãe muda para
   scroll horizontal — cada ficheiro de secção decide o breakpoint exato
   e oculta/mostra este bloco em conformidade (ver ".xxx__rail" nos
   respetivos _*.css). Aqui ficam só os estilos partilhados.
   -------------------------------------------------------------------- */

.scroll-rail {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* Era "var(--space-4)" (24px) — reduzido para o indicador ler como
     parte do carrossel logo acima, não como um elemento solto mais
     abaixo na secção (auditoria 06/09). */
  margin-top: var(--space-3);
  /* Auditoria 06/09: em Terapias este componente vive dentro de um
     grid de coluna única (".terapias__deck-wrap"), onde a largura de
     um item de grid é normalmente 100% da coluna por omissão — mas ao
     mesmo tempo ".scroll-rail__track" abaixo usa "flex: 1", que é
     "flex-basis: 0%". Sem uma largura própria explícita aqui, essa
     combinação deixava o cálculo de largura do trilho ambíguo consoante
     o contexto do pai (grid, flex ou fluxo normal) — em Benefícios e
     Processo (fluxo normal) o trilho aparecia bem, mas em Terapias
     (grid) desaparecia por completo, ficando só o contador "01 — 04"
     visível (confirmado por screenshot). Fixar a largura aqui, no
     componente partilhado, torna-o robusto em qualquer contexto de
     layout onde for inserido — em vez de corrigir só a instância de
     Terapias e deixar o mesmo risco para o futuro. */
  width: 100%;
}

.scroll-rail__counter {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--color-navy-deep);
  min-width: 3.4em; /* evita "tremor" de largura quando o nº de dígitos muda */
}

.scroll-rail__counter-current {
  font-weight: 600;
}

.scroll-rail__counter-sep {
  margin-inline: 0.2em;
  color: var(--color-gold);
}

.scroll-rail__counter-total {
  color: var(--color-grey);
}

.scroll-rail__track {
  position: relative;
  flex: 1;
  min-width: 0; /* reset ao "min-width:auto" implícito de um item flex — sem isto, alguns contextos de layout (ver nota em ".scroll-rail" acima) podem recusar encolher/crescer corretamente este elemento */
  height: 2px;
  background-color: rgba(14, 42, 78, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.scroll-rail__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--color-gold);
  border-radius: 999px;
  /* largura e posição definidas inline via JS (percentagem do total) */
  transition: transform var(--duration-base) var(--ease-default);
  will-change: transform;
}

/* Variante para usar sobre fundo escuro (secção Sobre teria esta
   necessidade se alguma vez ganhasse scroll horizontal — preparado por
   coerência de sistema, mesmo sem uso imediato). */
.scroll-rail--on-dark .scroll-rail__track {
  background-color: rgba(250, 247, 241, 0.18);
}

.scroll-rail--on-dark .scroll-rail__counter-current {
  color: var(--color-white);
}

.scroll-rail--on-dark .scroll-rail__counter-total {
  color: rgba(250, 247, 241, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-rail__thumb {
    transition: none !important;
  }
}