.gradient-block {
  text-align: center;
  padding: 0 1rem 2rem;
}

/* ── TITOLO CON GRADIENTE ANIMATO ───────────────────────── */

.gradient-title {
  display: inline-block;
  font-family: var(--heading-font-family, "Barlow Condensed", sans-serif);
  font-weight: 800;
  letter-spacing: var(--heading-letter-spacing, .02em);
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1.1;
  margin: 0;

  background-image: linear-gradient(
    120deg,
    var(--palette-teal, #0bd1c0)      0%,
    var(--palette-teal-dark, #019482) 35%,
    var(--palette-white, #ffffff)     50%,
    var(--palette-teal-dark, #019482) 65%,
    var(--palette-teal, #0bd1c0)      100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleGradientMove 8s linear infinite;
}

@keyframes titleGradientMove {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── HR GRAFICA CON STESSO GRADIENTE ────────────────────── */

.gradient-hr {
  width: clamp(80px, 20vw, 160px);
  height: var(--accent-border-thick, 3px);
  border: none;
  border-radius: 999px;
  margin: 1.5rem auto 0;

  background-image: linear-gradient(
    120deg,
    var(--palette-teal, #0bd1c0)      0%,
    var(--palette-teal-dark, #019482) 35%,
    var(--palette-white, #ffffff)     50%,
    var(--palette-teal-dark, #019482) 65%,
    var(--palette-teal, #0bd1c0)      100%
  );
  background-size: 300% 100%;
  animation: titleGradientMove 8s linear infinite;
}

@media (max-width: 576px) {
  .gradient-title {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-title,
  .gradient-hr {
    animation: none;
    background-position: 0% 50%;
  }
}