Un hero de dos columnas, y cuánto movió en realidad "ajustar el espaciado"

El Hero de la portada siempre fue una sola columna centrada: logo arriba, encabezado y CTAs debajo, todo apretado en una caja max-w-3xl. En cualquier ancho mayor al de una laptop, eso deja mucho espacio negro a los costados, y empuja la primera sección de contenido real más abajo de lo necesario.

Archivé este issue después de quedarme mirando una captura en un monitor ancho y preguntarme por qué había tanto espacio vacío en el fold. La corrección parecía obvia: dividir el hero en dos columnas, logo de un lado, copy y botones del otro. Pero el issue mismo marcaba un tradeoff real. Centrado se lee como un “momento de identidad” limpio para el logo. Dividirlo podría diluir eso.

Así que antes de tocar nada, medí. Cargué el hero actual en un navegador real y leí el offset de la sección #software desde arriba: 1017.5px, tanto a 1280 como a 1920 de ancho, ya que un layout centrado no cambia de alto con el ancho del viewport. Después construí la versión de dos columnas (flex-row en md:, logo a la izquierda, texto a la derecha, mobile sin tocar) y volví a medir: 651px. Un recorte del 36%, solo por usar espacio que ya estaba ahí.

Tomé capturas de ambas versiones en cuatro anchos y las comparé lado a lado en vez de decidir a partir de una descripción. Ganó la de dos columnas, con una nota para llevar al siguiente paso: ajustar el espaciado con la sección de abajo.

Esa fue una ganancia más chica de lo que suena. Solo toqué el padding inferior propio de Hero (md:pb-20 → md:pb-10), lo que bajó el número de 651px a 611px. La porción más grande de esa brecha es el padding superior propio de SoftwareSection (md:py-28), que dejé sin tocar porque es un ritmo compartido en toda la página, no algo específico de este hero. Si alguien quiere que quede más ajustado que 611px, eso es un follow-up que toca un componente distinto.

Resultado final: 1017.5px → 611px, una reducción del 40% en la distancia de scroll hasta la primera sección de contenido, confirmado en vivo en producción.