/* ===========================================================================
   Títulos con degradé CICLIC (27-oct)
   Manual de marca: Albert Sans; degradé verde #59E721 → azul #46B1E1.
   Uso: envolver las palabras a resaltar en <span class="tx-grad">…</span>.
   Debajo de cada título va una línea corta con el mismo degradé.
   En fondos claros (Problemas, Equipo) el degradé baja un tono para leerse bien.
   =========================================================================== */

:root {
  --tx-grad: linear-gradient(90deg, #59e721 0%, #46b1e1 100%);
  --tx-grad-light: linear-gradient(90deg, #2fa30f 0%, #1f86bd 100%);
}

.hero h1,
.section-heading h2,
.cta-section h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.tx-grad {
  color: transparent;
  background: var(--tx-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* En el hero la segunda línea es un bloque: que el degradé abarque solo el texto */
.hero h1 span.tx-grad {
  display: inline-block;
}

/* Fondos claros */
#problemas .tx-grad,
#equipo .tx-grad {
  background: var(--tx-grad-light);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Línea corta con degradé debajo del título */
.hero h1::after,
.section-heading h2::after,
.cta-section h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 22px;
  border-radius: 2px;
  background: var(--tx-grad);
}

/* Equipo: sin tarjetas ni filtros, el pie solo lleva "Trabaja con nosotros" */
.team-section .team-footer {
  justify-content: flex-end;
}