/*
  Páginas de servicio (section_hiring): espacio entre el párrafo descriptivo
  (.partnerships_heading) y los bullets con ícono (.hiring_grid). No existía
  una regla explícita de separación entre ambos bloques (el gap de
  .hiring_grid solo controla el espacio interno entre la foto/ícono y la
  lista), así que en tablet se sentían pegados. Estandarizado para las 5
  páginas de servicio que comparten esta estructura.
*/
.partnerships_heading {
  margin-bottom: 3rem;
}

@media screen and (max-width: 1030px) {
  .partnerships_heading {
    margin-bottom: 2.5rem;
  }
}

@media screen and (max-width: 767px) {
  .partnerships_heading {
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 479px) {
  .partnerships_heading {
    margin-bottom: 1.5rem;
  }
}

/* Títulos (bullets de "Cuando la consulta..." y de "Nuestro proceso"): en
   web y tablet se cierra el letter-spacing a -2px. En mobile se deja el -1px
   que ya trae el tema base, sin tocarlo. */
@media screen and (min-width: 768px) {
  .font-header.text-4xl {
    letter-spacing: -0.125rem;
  }
}

/*
  "Nuestro proceso": la línea punteada que conecta cada número con el
  siguiente se corta en mobile (≤767px) porque el cálculo original del tema
  base asume que todos los pasos miden lo mismo de alto (calc(50% + Nrem)).
  En cuanto un título se va a 2 líneas (ver "Diagnóstico explicado en
  lenguaje claro"), ese paso crece y el paso queda desalineado con el
  siguiente número.
  Aquí se ancla la línea justo debajo del círculo (top:3rem, alto real del
  step-badge en este breakpoint) y se extiende con calc(100% - 3rem + 2rem):
  el 100% es el alto real (y variable) de .timeline_step, así que la línea
  siempre llega hasta el siguiente número sin importar cuántas líneas ocupe
  el texto de por medio.
*/
@media screen and (max-width: 767px) {
  .timeline_path {
    top: 3rem;
    bottom: auto;
    height: calc(100% - 3rem + 2rem);
  }
}