/* ==========================================================================
   Módulo: Valores / Filosofía (Banner Rojo)
   ========================================================================== */

.module-valores {
    padding: 100px 0;
    /* Color rojo institucional (ajusta a tu variable --color-primary si prefieres) */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* MÁGIA DE INGENIERÍA: Mezcla el fondo con el color rojo */
    /* background-blend-mode: color-dodge;  */
    position: relative;
}

.valores-inner-overlay{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: color-mix(in srgb, var(--color-primary), 10% transparent); 
    z-index: 1;
}

.valores-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* =====================================================
   GRID DE 3 COLUMNAS
   ===================================================== */
.valores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
    gap: 60px; /* Espacio generoso entre columnas */
}

/* =====================================================
   CONTENIDO DE COLUMNA
   ===================================================== */
.valores-col {
    display: flex;
    flex-direction: column;
}

.valores-col-title {
    font-size: var(--text-2xl);
    font-weight: 800; /* Extra negrita según diseño */
    color: var(--color-white);
    margin: 0 0 25px 0;
    line-height: 1.2;
    /* Un pequeño detalle de calidad: sombra de texto muy sutil */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.valores-col-desc {
    font-size: var(--text-base);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9); /* Blanco ligeramente transparente para lectura */
    font-weight: 400;
}

.valores-col-desc p {
    margin: 0;
}

/* =====================================================
   RESPONSIVE (Tablets y Móviles)
   ===================================================== */
@media (max-width: 1024px) {
    .valores-inner {
        padding: 0 20px;
    }

    .valores-grid {
        /* grid-template-columns: 1fr; Colapsa a 1 columna en tablets */
        gap: 50px;
        text-align: left; /* Centramos el texto en móviles para mejor estética */
    }
    
    .module-valores {
        padding: 70px 0;
    }
    
    .valores-col-title {
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .valores-grid {
        grid-template-columns: 1fr; /*Colapsa a 1 columna en tablets*/
    }
}