.process-list { max-width: 780px; }

/* Causa (medida en la página real, con Fraunces cargada): a 44px
   (clamp mínimo de .display-1 en todo el rango 320-390px), el wrap por
   defecto reparte "Un proceso, no una improvisación." en 3 líneas
   dejando "una" sola en la línea intermedia. text-wrap:balance no
   cambia este resultado (verificado en aislamiento: preserva el mismo
   número de líneas que el wrap normal). Un único tamaño fijo obliga a
   elegir entre "demasiado pequeño en anchos que no lo necesitan" o
   "roto en el ancho más estrecho", así que se usa un breakpoint: barrido
   medido en 320/330/340/350/360/375/390px mostró que el tamaño mínimo
   necesario para 2 líneas limpias crece con el ancho (30/32/34/34/36/
   38/38px), y 38px — el mayor de los tamaños pedidos — es seguro de
   forma consistente a partir de 375px (a 360px con 38px todavía rompe
   en 3 líneas). Se usa breakpoint en vez de clamp() por ser más
   robusto: un clamp() interpolaría por vw sin garantizar que cada
   ancho intermedio caiga en un tamaño seguro para ESTE texto concreto,
   mientras que el breakpoint usa los dos valores ya verificados
   experimentalmente. Contacto y Sobre nosotros ya están en 2 líneas
   equilibradas a 44px y no se tocan; Servicios ya controla su salto
   con <br> manual y tampoco se toca. */
@media (max-width: 374px) {
  .page-hero__title { font-size: 1.875rem; } /* 30px — mínimo seguro medido en 320px */
}
@media (min-width: 375px) and (max-width: 640px) {
  .page-hero__title { font-size: 2.375rem; } /* 38px — seguro de forma consistente desde 375px */
}

.principles-preview__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
}

@media (max-width: 860px) {
  .principles-preview__grid { grid-template-columns: 1fr; gap: var(--sp-2); }
}