Construir la sección Por qué nosotros en un proyecto web con SASS y Flexbox implica combinar herencia de estilos, mixins y propiedades como object-fit para mantener el diseño limpio y fiel al Figma. Aquí verás cómo estructurar el HTML, aplicar estilos reutilizables y resolver conflictos comunes de jerarquía CSS.

Cómo estructuro el HTML de la sección Por qué nosotros

Antes de tocar SASS, conviene dejar el marcado claro y semántico. La idea es agrupar los bloques visuales para luego manipularlos con Flexbox sin pelearse con el árbol del DOM.

Dentro del archivo index.html, agrega los textos descriptivos dentro de etiquetas <p> y suma las imágenes desde la carpeta assets/img. En este proyecto se usan dos: una de la Tierra y otra de ecología, ubicadas dentro de los bloques earth e innovation.

Después envuelve ambos bloques en un <div> contenedor con la clase mission-section. Esa clase es clave: indica que sigue siendo información de la empresa, pero específicamente la misión y la visión.

Por qué conviene agrupar earth e innovation en un div

Agrupar te permite aplicar Flexbox al contenedor padre y centrar ambas tarjetas de un solo golpe. Sin ese wrapper, tendrías que repetir reglas o forzar selectores más específicos.

¿Qué hace la clase mission-section? Es el contenedor que envuelve los bloques earth e innovation para aplicarles Flexbox y distribuirlos horizontalmente con espacio uniforme.

Cómo aplico herencia con extend en SASS sin romper estilos

El primer intento natural es heredar los estilos de la sección healthcare usando @extend. Funciona para el espaciado de las cards, pero aparece un problema: el font-weight: bold que quieres aplicar al <h2> no se respeta.

Esto pasa porque el font-weight: 300 heredado de healthcare tiene mayor jerarquía. Los estilos que vienen de conceptos más arriba en la herencia siempre ganan prioridad sobre los que escribes después en el hijo.

La solución no es eliminar la propiedad del padre, eso rompería otros lugares. Lo correcto es no heredar en este caso y replicar solo lo que necesitas: un padding-bottom: 60px directo en about-us.

Cuándo sí usar extend y cuándo no

• Úsalo cuando el componente comparte la mayoría de propiedades con otro.
• Evítalo si solo necesitas una o dos reglas, copiarlas es más limpio.
• Revisa siempre la jerarquía: una propiedad heredada puede bloquear la que intentas sobreescribir.

Más adelante, dentro de mission-section, la herencia sí funciona perfecto: la clase innovation extiende a earth porque ambos comparten casi todo el estilo y viven en la misma sección.

Cómo centro los bloques con mixin flex y propiedades de Flexbox

En mission-section se invoca el mixin flex-center con @include, pasándole dirección row, justify-content: space-evenly y centrado de elementos. Así los bloques earth e innovation quedan distribuidos de forma horizontal y equilibrada.

Dentro de cada bloque (earth e innovation) la lógica es distinta. Como solo necesitas alinear imagen y párrafo en horizontal, no tiene sentido invocar el mixin completo. Basta con:

• display: flex para acomodar imagen y texto en línea.
• gap: 40px para separarlos sin que se peguen.
• width: 30vw para fijar un ancho cómodo de lectura.

¿Cuándo conviene usar un mixin en vez de propiedades sueltas? Cuando vas a reutilizar 3 o más reglas juntas. Si solo necesitas una o dos, escribirlas directo es más legible y evita arrastrar estilos que no usas.

Ajustes de tipografía y color en el párrafo

El <p> necesita tres cosas para verse como en Figma: text-align: center, un font-size mayor (reutilizando la variable existente para párrafos) y un color hexadecimal específico que solo aparece en esta sección, por lo que no se guarda como variable global.

Cómo evito que las imágenes se distorsionen con object-fit

Al darle ancho fijo al contenedor, la imagen se estira y pierde proporciones. La propiedad object-fit controla cómo se comporta el contenido visual dentro de su caja.

• object-fit: cover expande la imagen para cubrir todo el espacio, recortando si es necesario.
• object-fit: contain respeta el tamaño original y ajusta sin deformar.

En este caso contain es la opción correcta porque conserva el aspecto original de los iconos de Earth e innovación.

¿Qué diferencia hay entre cover y contain? Cover llena todo el contenedor recortando bordes. Contain mantiene la imagen completa dentro de la caja, sin deformar ni recortar.

Qué retoques finales cierran la sección

Para terminar, la clase about-us recibe un padding-bottom: 60px que separa visualmente esta sección de la siguiente. Pequeños detalles como este son los que diferencian un layout que se ve apretado de uno que respira.

Con esto la sección Por qué nosotros queda lista, con HTML semántico, SASS organizado por secciones y Flexbox haciendo el trabajo pesado de alineación. ¿Tuviste alguna duda al replicar la estructura? Déjamela en los comentarios.