/* ======================================================= */
/* SECCIÓN NOSOTROS (MISIÓN, VISIÓN, VALORES)             */
/* ======================================================= */
#nosotros {
    padding: 8rem 0;
    background-color: var(--blanco);
    text-align: center;
    /* ⚠️ Si esto está ocultando la sección, bórralo temporalmente */
    /* display: block; */ 
}

.titulo-seccion {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--negro);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.linea-seccion {
    border: 0;
    height: 3px;
    width: 60px;
    background-color: var(--azul); 
    margin: 10px auto 40px;
}

.introduccion-nosotros {
    font-size: 2rem;
    color: #555;
    max-width: 800px;
    margin: 0 auto 6rem auto;
}

/* --- Bloques Misión/Visión --- */
.bloque-nosotros {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 8rem;
    text-align: left;
}

.contenido-bloque {
    flex: 1;
    padding: 20px;
}

.imagen-bloque {
    flex: 1;
    overflow: hidden; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.imagen-bloque img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.subtitulo-nosotros {
    font-size: 3rem;
    font-weight: 700;
    color: var(--negro);
    margin-bottom: 20px;
    border-left: 5px solid var(--azul); 
    padding-left: 15px;
}

.bloque-inverso {
    flex-direction: row-reverse;
}


/* --- Grid de Valores --- */
.grid-valores {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 4rem;
}
/* Estilos de tarjetas omitidos por espacio, usar los que ya tenías. */


/* ======================================================= */
/* MEDIA QUERIES: NOSOTROS (RESPONSIVE)                  */
/* ======================================================= */
@media screen and (max-width: 992px) {
    /* Diseño apilado para Misión/Visión */
    .bloque-nosotros {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .bloque-inverso {
        flex-direction: column; 
    }
    
    .subtitulo-nosotros {
        border-left: none; 
        padding-left: 0;
    }

    /* Grid de Valores a 2 columnas */
    .grid-valores {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    /* Móviles: Grid de Valores a 1 columna */
    .grid-valores {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}