.hero-subtitle{
  position: relative;
  display: inline-block;

  margin-top: 14px;
  font-size: 16px;
  font-weight: 820;
  letter-spacing: 0.6px;

  /* Platejat fosc (premium) */
  background: linear-gradient(
    110deg,
    rgba(105,105,105,0.98) 0%,
    rgba(205,205,205,0.98) 18%,
    rgba(90,90,90,0.95) 42%,
    rgba(235,235,235,0.96) 55%,
    rgba(70,70,70,0.94) 80%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.16),
    0 10px 20px rgba(0,0,0,0.14);

  filter: contrast(1.08) saturate(1.05);
}

.km-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 6px;
  font-size: 0.75rem;
  color: #777;
}

.km-labels span {
  text-align: center;
  cursor: default;
}

/* Opcional: destacar pas actiu */
.km-labels span.active {
  font-weight: 600;
  color: #1d4ed8; /* blau corporatiu */
}



.hero-subtitle::after{
  content:"";
  position:absolute;
  inset: -6px -30px;

  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,0.00) 35%,
    rgba(255,255,255,0.48) 50%,
    rgba(255,255,255,0.00) 65%,
    transparent 100%
  );


  transform: translateX(-160%);
  mix-blend-mode: screen;
  pointer-events: none;

  /* 1r flash en carregar + després cada 10s */
  animation: subtitleShineFirst 1.2s ease-out 0.25s 1,
             subtitleShineLoop 10s ease-in-out 2s infinite;
}

/* Flash inicial (més curt i "wow") */
@keyframes subtitleShineFirst{
  0%   { transform: translateX(-160%); opacity: 0; }
  25%  { opacity: 0.70; }
  100% { transform: translateX(160%); opacity: 0; }
}

/* Flash recurrent (lent i discret) */
@keyframes subtitleShineLoop{
  0%   { transform: translateX(-160%); opacity: 0; }
  12%  { opacity: 0.45; }
  28%  { transform: translateX(160%); opacity: 0; }
  100% { transform: translateX(160%); opacity: 0; }
}