/* ==========================================================================
   QUIÉNES SOMOS — Estilos exclusivos de la página
   --------------------------------------------------------------------------
   El héroe, el bloque de texto e imagen, el proceso y la llamada a la acción
   son componentes compartidos y viven en `global.css`. Aquí solo queda lo que
   esta página no comparte con ninguna otra.
   ========================================================================== */

/* ==========================================================
   1. QUÉ NOS DIFERENCIA — #about_values
   ========================================================== */

#about_values {
    padding-block: clamp(4.5rem, 9vw, var(--section-padding-y));
    background-color: var(--alt-color);
}

#about_values .about-values__container {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
}

/* La rejilla se dibuja con el hueco de 1 px, así que sobre el fondo alterno la
   tarjeta necesita seguir siendo blanca para que la retícula se vea. */
#about_values .site-card {
    background-color: var(--body-color);
}